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

Files

Brandy Carney bc77479f27 fix(item): add detail prop, fix lines and styles

- removes item-block class
- fixes some styling with first/last-child
- adds detail prop to replace detail-none / detail-push attributes
- style the border and push arrow properly inside of an item with color

2018-02-21 16:56:10 -05:00

item-group.ios.scss

fix(item): add detail prop, fix lines and styles

2018-02-21 16:56:10 -05:00

item-group.ios.vars.scss

feat(item-group): add the item group component and move styles

2018-01-08 17:53:06 -05:00

item-group.md.scss

fix(item): add detail prop, fix lines and styles

2018-02-21 16:56:10 -05:00

item-group.md.vars.scss

feat(item-group): add the item group component and move styles

2018-01-08 17:53:06 -05:00

item-group.scss

style(sass): fix sass lint errors

2018-01-30 12:22:24 -05:00

item-group.tsx

feat(item-group): add the item group component and move styles

2018-01-08 17:53:06 -05:00

item-group.vars.scss

feat(item-group): add the item group component and move styles

2018-01-08 17:53:06 -05:00

readme.md

chore(): update to latest stencil

2018-02-06 20:04:28 +01:00

readme.md

ion-item-group

Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections.

<ion-item-group>
  <ion-item-divider>A</ion-item-divider>

  <ion-item>
    <ion-label>Angola</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Argentina</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Armenia</ion-label>
  </ion-item>
</ion-item-group>

<ion-item-group>
  <ion-item-divider>B</ion-item-divider>

  <ion-item>
    <ion-label>Bangladesh</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Belarus</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Belgium</ion-label>
  </ion-item>
</ion-item-group>

They can also be used to group sliding items:

<ion-item-group>
  <ion-item-divider>
    Fruits
  </ion-item-divider>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Grapes</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Apples</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-item-group>

<ion-item-group>
  <ion-item-divider>
    Vegetables
  </ion-item-divider>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Carrots</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Celery</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option>
        Favorite
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-item-group>

Built with StencilJS