mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00

Files

Adam Bradley c2fe9175bf refactor(rtl): use css logical properties for padding/margin (#16987 )

* refactor(rtl): use css logical properties for padding/margin

* fix(item-divider): fix padding

* test(rtl): add item basic rtl script

* fix(rtl): update core/src/themes/ionic.mixins.scss

* refactor(rtl): wrap css logical props with @supports

* refactor(rtl): do not use css logical properties for hardcoded 0 values

2019-01-15 10:43:00 -06:00

test

test(rtl): add rtl script to all e2e tests (#17009 )

2019-01-08 15:06:23 -06:00

usage

docs(components): add usage examples for components missing them

2018-07-09 16:18:22 -04:00

item-divider.ios.scss

fix(label): move default flex and margin to item (#16461 )

2018-11-26 18:30:17 -06:00

item-divider.ios.vars.scss

refactor(all): cleanup mode font

2018-08-24 03:33:44 +02:00

item-divider.md.scss

fix(label): move default flex and margin to item (#16461 )

2018-11-26 18:30:17 -06:00

item-divider.md.vars.scss

fix(item): update to match Material Design spec (#16182 )

2018-11-04 10:58:57 -05:00

item-divider.scss

refactor(rtl): use css logical properties for padding/margin (#16987 )

2019-01-15 10:43:00 -06:00

item-divider.tsx

fix(item-divider): use prop for sticky (#16691 )

2018-12-11 23:06:14 +01:00

item-divider.vars.scss

chore(packages): move the packages to root

2018-03-12 16:02:25 -04:00

readme.md

fix(item-divider): use prop for sticky (#16691 )

2018-12-11 23:06:14 +01:00

readme.md

ion-item-divider

Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead of being placed at the top of a list, they should go in between groups of like items.

Usage

Angular / javascript

<ion-item-divider>
  <ion-label>
    Basic Item Divider
  </ion-label>
</ion-item-divider>

<ion-item-divider color="secondary">
  <ion-label>
    Secondary Item Divider
  </ion-label>
</ion-item-divider>

<!-- Item Dividers in a List -->
<ion-list>
  <ion-item-divider>
    <ion-label>
      Section A
    </ion-label>
  </ion-item-divider>

  <ion-item><ion-label>A1</ion-label></ion-item>
  <ion-item><ion-label>A2</ion-label></ion-item>
  <ion-item><ion-label>A3</ion-label></ion-item>
  <ion-item><ion-label>A4</ion-label></ion-item>
  <ion-item><ion-label>A5</ion-label></ion-item>

  <ion-item-divider>
    <ion-label>
      Section B
    </ion-label>
  </ion-item-divider>

  <ion-item><ion-label>B1</ion-label></ion-item>
  <ion-item><ion-label>B2</ion-label></ion-item>
  <ion-item><ion-label>B3</ion-label></ion-item>
  <ion-item><ion-label>B4</ion-label></ion-item>
  <ion-item><ion-label>B5</ion-label></ion-item>
</ion-list>

Properties

Property	Attribute	Description	Type	Default
`color`	`color`	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.	`string \| undefined`	`undefined`
`mode`	`mode`	The mode determines which platform styles to use.	`"ios" \| "md"`	`undefined`
`sticky`	`sticky`	When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it. This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky	`boolean`	`false`

CSS Custom Properties

Name	Description
`--background`	Background of the item divider
`--color`	Color of the item divider
`--padding-bottom`	Bottom padding of the item divider
`--padding-end`	End padding of the item divider
`--padding-start`	Start padding of the item divider
`--padding-top`	Top padding of the item divider

Built with StencilJS