javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +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 { namespace JSXElements {
export interface IonButtonAttributes extends HTMLAttributes { export interface IonButtonAttributes extends HTMLAttributes {
itemButton?: boolean;
href?: string; href?: string;
buttonType?: string; buttonType?: string;
size?: 'small' | 'large'; size?: 'small' | 'default' | 'large';
disabled?: boolean; disabled?: boolean;
fill?: 'clear' | 'outline' | 'solid' | 'default'; fill?: 'clear' | 'outline' | 'solid' | 'default';
round?: boolean; round?: boolean;

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

@ -12,8 +12,6 @@ import { getElementClassObject } from '../../utils/theme';
export class Button { export class Button {
@Element() private el: HTMLElement; @Element() private el: HTMLElement;
@Prop() itemButton: boolean = false;
/** /**
* Contains a URL or a URL fragment that the hyperlink points to. * Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered. * If this property is set, an anchor tag will be rendered.
@ -28,9 +26,9 @@ export class Button {
/** /**
* The button size. * 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. * 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 * 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 * 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'; @Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default';
/** /**
* If true, activates a button with rounded corners. * If true, activates a button with rounded corners.
* Type: shape
*/ */
@Prop() round: boolean = false; @Prop() round: boolean = false;
@ -58,7 +55,6 @@ export class Button {
/** /**
* If true, activates a button with a heavier font weight. * If true, activates a button with a heavier font weight.
* Type: decorator
*/ */
@Prop() strong: boolean = false; @Prop() strong: boolean = false;
@ -80,7 +76,6 @@ export class Button {
const { const {
buttonType, buttonType,
itemButton,
color, color,
expand, expand,
fill, fill,
@ -98,7 +93,6 @@ export class Button {
getClassList(buttonType, round ? 'round' : null, mode), getClassList(buttonType, round ? 'round' : null, mode),
getClassList(buttonType, strong ? 'strong' : null, mode), getClassList(buttonType, strong ? 'strong' : null, mode),
getColorClassList(buttonType, color, fill, mode), getColorClassList(buttonType, color, fill, mode),
getItemClassList(itemButton, size)
); );
const TagType = this.href ? 'a' : 'button'; const TagType = this.href ? 'a' : 'button';
@ -178,7 +172,3 @@ function getColorClassList(buttonType: string, color: string, fill: string, mode
color ? `${className}-${mode}-${color}` : [] 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 # ion-button
Buttons are simple components in Ionic. They can consist of text and icons 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.
and be enhanced by a wide range of attributes.
## 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 ```html
<!-- Colors --> <!-- Colors -->
<ion-button>Default</ion-button> <ion-button>Default</ion-button>
<ion-button color="secondary">Secondary</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="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button> <ion-button color="light">Light</ion-button>
<ion-button color="dark">Dark</ion-button> <ion-button color="dark">Dark</ion-button>
<!-- Shapes --> <!-- Expand -->
<ion-button expand="full">Full Button</ion-button> <ion-button expand="full">Full Button</ion-button>
<ion-button expand="block">Block Button</ion-button> <ion-button expand="block">Block Button</ion-button>
<ion-button round>Round 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="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button> <ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button round fill="outline">Outline + Round</ion-button> <ion-button round fill="outline">Outline + Round</ion-button>
@ -79,11 +108,6 @@ any
string string
#### itemButton
boolean
#### mode #### mode
any any
@ -136,11 +160,6 @@ any
string string
#### itemButton
boolean
#### mode #### mode
any any

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

@ -62,10 +62,13 @@ export class Item {
} }
componentDidLoad() { componentDidLoad() {
// Add item-button classes to each ion-button in the item // Change the button size to small for each ion-button in the item
const buttons = this.el.querySelectorAll('ion-button') as any; // unless the size is explicitly set
const buttons = this.el.querySelectorAll('ion-button');
for (var i = 0; i < buttons.length; i++) { 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> <!DOCTYPE html>
<html dir="ltr"> <html dir="ltr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Item - Basic</title> <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"> <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> <script src="/dist/ionic.js"></script>
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item - Basic</ion-title> <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-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<ion-list>
<ion-list-header>
List Header
</ion-list-header>
<ion-item> <ion-item>
<ion-label>Item Icons</ion-label> Item
<ion-icon name="heart" slot="end"></ion-icon> </ion-item>
<ion-icon name="star" slot="start"></ion-icon> <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-item> <ion-item>
<ion-label>Item No Size Button</ion-label> <ion-label>
<ion-button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button> Single line text that should have ellipses when it doesn't all fit in the item
<ion-button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button> </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-item> <ion-item>
<ion-label>Item Outline Button</ion-label> <ion-label>
<ion-button outline slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button> Item using inner ion-label
<ion-button outline slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button> </ion-label>
</ion-item> </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-content>
<ion-footer> <ion-footer>
@ -100,4 +104,5 @@
</ion-page> </ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>