diff --git a/angular/BREAKING.md b/angular/BREAKING.md index ce6df83f0b..afe70c24e6 100644 --- a/angular/BREAKING.md +++ b/angular/BREAKING.md @@ -444,7 +444,7 @@ $input-highlight-color-valid: #32db64; ### Markup Changed -Item should now be written as an `` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute, and a button tag based on the presence of an `onclick` or `tappable` attribute. Otherwise, it will render a div. +Item should now be written as an `` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute, and a button tag based on the presence of an `onclick` or `button` attribute. Otherwise, it will render a div. **Old Usage Example:** @@ -466,15 +466,21 @@ Item should now be written as an `` element. Ionic will determine when ```html - Default Item + + Default Item + - - Button Item + + + Button Item + - Anchor Item + + Anchor Item + ``` @@ -484,7 +490,9 @@ Previously an `ion-label` would automatically get added to an `ion-item` if one ```html - Item Label + + Item Label + ``` @@ -545,7 +553,7 @@ The attributes to show/hide the detail arrows on items have been converted to a **New Usage Example:** ```html - + Item Label diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 1061afad46..112458c371 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -30,6 +30,11 @@ export class Item { */ @Prop() mode: 'ios' | 'md'; + /** + * If true, a button tag will be rendered and the item will be tappable. Defaults to `false`. + */ + @Prop() button = false; + /** * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` * is `ios` and an `href`, `onclick` or `button` property is present. @@ -48,14 +53,8 @@ export class Item { @Prop() href: string; /** - * Whether or not this item should be tappable. - * If true, a button tag will be rendered. Defaults to `false`. - */ - @Prop() button = false; - - /** - * When using a router, it specifies the transition direction when navigating a - * another page usign `href`. + * When using a router, it specifies the transition direction when navigating to + * another page using `href`. */ @Prop() routerDirection: 'forward' | 'back'; diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md index 1c659451ae..49ae4e2219 100644 --- a/core/src/components/item/readme.md +++ b/core/src/components/item/readme.md @@ -1,5 +1,43 @@ # ion-item +Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more. + + +## Detail Arrows + +By default, clickable items will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, add the `detail` attribute to the item. + +This feature is not enabled by default on clickable items for the `md` mode, but it can be enabled by setting the following Sass variable: + +```scss +$item-md-detail-push-show: true; +``` + +It can also be turned off by default on clickable items for ios by setting the following Sass variable: + +```scss +$item-ios-detail-push-show: false; +``` + +See the [theming documentation](http://ionicframework.com/docs/theming/overriding-ionic-variables/) for more information on overriding Sass variables. + + +## Item Placement + +Item uses named [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) in order to position content. This logic makes it possible to write a complex item with simple, understandable markup without having to worry about styling and positioning the elements. + +The below chart details the item slots and where it will place the element inside of the item: + +| Slot | Description | +|---------|-----------------------------------------------------------------------------------| +| `start` | Placed to the left of all other content in LTR, and to the `right` in RTL. | +| `end` | Placed to the right of all other content in LTR, and to the `right` in RTL. | +| none | Placed inside of the input wrapper. | + + +### Text Alignment + +Items left align text and add an ellipsis when the text is wider than the item. See the [Utility Attributes Documentation](../../../../theming/css-utilities/) for attributes that can be added to `` to transform the text. @@ -11,8 +49,7 @@ boolean -Whether or not this item should be tappable. -If true, a button tag will be rendered. Defaults to `false`. +If true, a button tag will be rendered and the item will be tappable. Defaults to `false`. #### color @@ -60,8 +97,8 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl string -When using a router, it specifies the transition direction when navigating a -another page usign `href`. +When using a router, it specifies the transition direction when navigating to +another page using `href`. ## Attributes @@ -70,8 +107,7 @@ another page usign `href`. boolean -Whether or not this item should be tappable. -If true, a button tag will be rendered. Defaults to `false`. +If true, a button tag will be rendered and the item will be tappable. Defaults to `false`. #### color @@ -119,8 +155,8 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl string -When using a router, it specifies the transition direction when navigating a -another page usign `href`. +When using a router, it specifies the transition direction when navigating to +another page using `href`. diff --git a/core/src/components/item/usage/angular.md b/core/src/components/item/usage/angular.md new file mode 100644 index 0000000000..dcc1c0cb3d --- /dev/null +++ b/core/src/components/item/usage/angular.md @@ -0,0 +1,250 @@ +Basic Usage + +```html + + + + Item + + + + + + + Button Item + + + + + + + Anchor Item + + + + + Secondary Color Item + +``` + +Detail Arrows + +```html + + + Standard Item with Detail Arrow + + + + + + Button Item with Detail Arrow + + + + + + Anchor Item with no Detail Arrow + + +``` + +List Items + +```html + + + + Item + + + + No Lines Item + + + + Multiline text that should wrap when it is too long + to fit on one line in the item. + + + + + +

H3 Primary Title

+ +

Paragraph line 1

+ +

Paragraph line 2 secondary

+ + + + + +``` + +Media Items + +```html + + + + + + Avatar Start, Button Item + + + + + + Thumbnail End, Anchor Item + + + + + + + + + + + +

H2 Title Text

+

Button on right

+ + View + + + + + + + +

H3 Title Text

+

Icon on right

+ + + +``` + +Buttons in Items + +```html + + + Start + + Button Start/End + + End + + + + + + Start Icon + + + Buttons with Icons + + + End Icon + + + + + + + + Icon only Buttons + + + + +``` + +Icons in Items + +```html + + + Icon End + + + + + + + Large Icon End + + + + + + + Small Icon End + + + + + + + + Icon Start + + + + + + Two Icons End + + + + +``` + +Item Inputs + +```html + + Datetime + + + + + Select + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + Toggle + + + + + Floating Input + + + + + Input (placeholder) + + + + + Checkbox + + + + + Range + + +``` diff --git a/core/src/components/item/usage/javascript.md b/core/src/components/item/usage/javascript.md new file mode 100644 index 0000000000..1b734a4bdf --- /dev/null +++ b/core/src/components/item/usage/javascript.md @@ -0,0 +1,250 @@ +Basic Usage + +```html + + + + Item + + + + + + + Button Item + + + + + + + Anchor Item + + + + + Secondary Color Item + +``` + +Detail Arrows + +```html + + + Standard Item with Detail Arrow + + + + + + Button Item with Detail Arrow + + + + + + Anchor Item with no Detail Arrow + + +``` + +List Items + +```html + + + + Item + + + + No Lines Item + + + + Multiline text that should wrap when it is too long + to fit on one line in the item. + + + + + +

H3 Primary Title

+ +

Paragraph line 1

+ +

Paragraph line 2 secondary

+ + + + + +``` + +Media Items + +```html + + + + + + Avatar Start, Button Item + + + + + + Thumbnail End, Anchor Item + + + + + + + + + + + +

H2 Title Text

+

Button on right

+ + View + + + + + + + +

H3 Title Text

+

Icon on right

+ + + +``` + +Buttons in Items + +```html + + + Start + + Button Start/End + + End + + + + + + Start Icon + + + Buttons with Icons + + + End Icon + + + + + + + + Icon only Buttons + + + + +``` + +Icons in Items + +```html + + + Icon End + + + + + + + Large Icon End + + + + + + + Small Icon End + + + + + + + + Icon Start + + + + + + Two Icons End + + + + +``` + +Item Inputs + +```html + + Datetime + + + + + Select + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + Toggle + + + + + Floating Input + + + + + Input (placeholder) + + + + + Checkbox + + + + + Range + + +```