javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(button): remove itemButton and add documentation

Browse Source
This commit is contained in:
Brandy Carney
2017-12-14 13:08:33 -05:00
parent 3aeb51bdb8
commit 08ac293ad6
5 changed files with 117 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/src/components.d.ts vendored
View File

@ -354,10 +354,9 @@ declare global {
}
namespace JSXElements {
export interface IonButtonAttributes extends HTMLAttributes {
itemButton?: boolean;
href?: string;
buttonType?: string;
size?: 'small' | 'large';
size?: 'small' | 'default' | 'large';
disabled?: boolean;
fill?: 'clear' | 'outline' | 'solid' | 'default';
round?: boolean;

16
packages/core/src/components/button/button.tsx
View File

@ -12,8 +12,6 @@ import { getElementClassObject } from '../../utils/theme';
export class Button {
@Element() private el: HTMLElement;
@Prop() itemButton: boolean = false;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
@ -28,9 +26,9 @@ export class Button {
/**
* The button size.
* Possible values are: `"small"`, `"large"`.
* Possible values are: `"small"`, `"default"`, `"large"`.
*/
@Prop() size: 'small' | 'large';
@Prop() size: 'small' | 'default' | 'large';
/**
* If true, sets the button into a disabled state.
@ -40,13 +38,12 @@ export class Button {
/**
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent
* button with a border, or to `"solid"`. The default style is `"solid"` except inside of
* `ion-navbar`, where the default is `"clear"`.
* a toolbar, where the default is `"clear"`.
*/
@Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default';
/**
* If true, activates a button with rounded corners.
* Type: shape
*/
@Prop() round: boolean = false;
@ -58,7 +55,6 @@ export class Button {
/**
* If true, activates a button with a heavier font weight.
* Type: decorator
*/
@Prop() strong: boolean = false;
@ -80,7 +76,6 @@ export class Button {
const {
buttonType,
itemButton,
color,
expand,
fill,
@ -98,7 +93,6 @@ export class Button {
getClassList(buttonType, round ? 'round' : null, mode),
getClassList(buttonType, strong ? 'strong' : null, mode),
getColorClassList(buttonType, color, fill, mode),
getItemClassList(itemButton, size)
);
const TagType = this.href ? 'a' : 'button';
@ -178,7 +172,3 @@ function getColorClassList(buttonType: string, color: string, fill: string, mode
color ? `${className}-${mode}-${color}` : []
);
}
function getItemClassList(itemButton: boolean, size: string) {
return itemButton && !size ? ['item-button'] : [];
}

49
packages/core/src/components/button/readme.md
View File

@ -1,23 +1,52 @@
# ion-button
Buttons are simple components in Ionic. They can consist of text and icons
and be enhanced by a wide range of attributes.
Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way.
## Expand
This attribute lets you specify how wide the button should be. By default, buttons are inline blocks, but setting this attribute will change the button to a full-width block element.
| Value | Details |
|----------------|------------------------------------------------------------------------------|
| `block` | Full-width button with rounded corners. |
| `full` | Full-width button with square corners and no border on the left or right. |
## Fill
This attributes determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background.
| Value | Details |
|----------------|------------------------------------------------------------------------------|
| `clear` | Button with a transparent background that resembles a flat button. |
| `outline` | Button with a transparent background and a visible border. |
| `solid` | Button with a filled background. Useful for buttons in a toolbar. |
## Size
This attribute specifies the size of the button. Setting this attribute will change the height and padding of a button.
| Value | Details |
|----------------|------------------------------------------------------------------------------|
| `small` | Button with less height and padding. Default for buttons in an item. |
| `default` | Button with the default height and padding. Useful for buttons in an item. |
| `large` | Button with more height and padding. |
```html
<!-- Colors -->
<ion-button>Default</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="dark">Dark</ion-button>
<!-- Shapes -->
<!-- Expand -->
<ion-button expand="full">Full Button</ion-button>
<ion-button expand="block">Block Button</ion-button>
<ion-button round>Round Button</ion-button>
<!-- Outline -->
<!-- Fill -->
<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button round fill="outline">Outline + Round</ion-button>
@ -79,11 +108,6 @@ any
string
#### itemButton
boolean
#### mode
any
@ -136,11 +160,6 @@ any
string
#### itemButton
boolean
#### mode
any

9
packages/core/src/components/item/item.tsx
View File

@ -62,10 +62,13 @@ export class Item {
}
componentDidLoad() {
// Add item-button classes to each ion-button in the item
const buttons = this.el.querySelectorAll('ion-button') as any;
// Change the button size to small for each ion-button in the item
// unless the size is explicitly set
const buttons = this.el.querySelectorAll('ion-button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].itemButton = true;
if (!buttons[i].size) {
buttons[i].size = 'small';
}
}
}

135
packages/core/src/components/item/test/basic/index.html
View File

@ -1,95 +1,99 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Item - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Item - Basic</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary">
Default
<ion-icon name="star" slot="end"></ion-icon>
</ion-button>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
List Header
</ion-list-header>
<ion-item>
<ion-label>Item Icons</ion-label>
<ion-icon name="heart" slot="end"></ion-icon>
<ion-icon name="star" slot="start"></ion-icon>
Item
</ion-item>
<ion-item-divider>
Item Divider
</ion-item-divider>
<ion-item>
Item
</ion-item>
</ion-list>
<ion-item>
<ion-label>
Plain Ol' div with some text
</ion-label>
</ion-item>
<ion-item>
<ion-label>Item No Size Button</ion-label>
<ion-button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
<ion-button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
<ion-label>
Single line text that should have ellipses when it doesn't all fit in the item
</ion-label>
</ion-item>
<ion-item no-lines>
<ion-label>
Single line item with no lines
</ion-label>
</ion-item>
<ion-item text-wrap>
<ion-label>
Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item
</ion-label>
</ion-item>
<ion-item text-wrap color="secondary">
<ion-label>
<h1>H1 Title Text</h1>
<p>Paragraph line 1</p>
</ion-label>
</ion-item>
<ion-item text-wrap>
<ion-label>
<h2>H2 Title Text</h2>
<p>Paragraph line 1</p>
</ion-label>
</ion-item>
<ion-item text-wrap>
<ion-label>
<h3 ion-text color="primary">H3 Title Text</h3>
<p>Paragraph line 1</p>
<p ion-text color="secondary">Paragraph line 2 secondary</p>
</ion-label>
</ion-item>
<ion-item text-wrap>
<ion-label>
<h4>H4 Title Text</h4>
<p>Paragraph line 1</p>
<p>Paragraph line 2</p>
<p>Paragraph line 3</p>
</ion-label>
</ion-item>
<ion-item>
<ion-label>Item Outline Button</ion-label>
<ion-button outline slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
<ion-button outline slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
<ion-label>
Item using inner ion-label
</ion-label>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Small Button</ion-label>
<ion-button small slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button small slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Default Button</ion-label>
<ion-button default slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item-group>
<ion-item-divider color="light">Divider</ion-item-divider>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Small Button</ion-label>
<ion-button small slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button small slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Default Button</ion-label>
<ion-button default slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
</ion-item-group>
</ion-content>
<ion-footer>
@ -100,4 +104,5 @@
</ion-page>
</ion-app>
</body>
</html>