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

docs(button) add size, fill, expand to breaking

Browse Source
This commit is contained in:
Cam Wiegert
2018-02-01 11:17:29 -06:00
parent 79554af087
commit 4f66a01cbf
1 changed files with 34 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
BREAKING.md
View File

@ -70,6 +70,16 @@ These have been renamed to the following, and moved from the button element to t
| `icon-left`, `icon-start` | `slot="start"` | Positions to the left of the button in LTR, and to the right in RTL. | | `icon-left`, `icon-start` | `slot="start"` | Positions to the left of the button in LTR, and to the right in RTL. |
| `icon-right`, `icon-end` | `slot="end"` | Positions to the right of the button in LTR, and to the left in RTL. | | `icon-right`, `icon-end` | `slot="end"` | Positions to the right of the button in LTR, and to the left in RTL. |
In addition, several sets of mutually exclusive boolean attributes have been combined into a single string attribute.
The `small` and `large` attributes are now combined under the `size` attribute. The `clear`, `outline`, and `solid` attributes have been combined under `fill`. And, lastly, the `full` and `block` attributes have been combined under `expand`.
| Old Property | New Property | Property Behavior
| - | - | - | - |
| `small`, `large` | `size` | Sets the button size.
| `clear`, `outline`, `solid` | `fill` | Sets the button fill style.
| `full`, `block` | `expand` | Sets the button width.
**Old Usage Example:** **Old Usage Example:**
@ -93,6 +103,18 @@ These have been renamed to the following, and moved from the button element to t
Icon Right on LTR, Left on RTL Icon Right on LTR, Left on RTL
<ion-icon name="home"></ion-icon> <ion-icon name="home"></ion-icon>
</ion-button> </ion-button>
<ion-button large>
Large Button
</ion-button>
<ion-button outline>
Outline Button
</ion-button>
<ion-button full>
Full-width Button
</ion-button>
``` ```
**New Usage Example:** **New Usage Example:**
@ -107,6 +129,18 @@ These have been renamed to the following, and moved from the button element to t
Icon Right on LTR, Left on RTL Icon Right on LTR, Left on RTL
<ion-icon slot="end" name="home"></ion-icon> <ion-icon slot="end" name="home"></ion-icon>
</ion-button> </ion-button>
<ion-button size="large">
Large Button
</ion-button>
<ion-button fill="outline">
Outline Button
</ion-button>
<ion-button expand="full">
Full-width Button
</ion-button>
``` ```
## Chip ## Chip