Ionic list - ion-item的相关用法

1 ion-item

Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Items should only be used as rows in a List with other items. Items can be swiped, deleted, reordered, edited, and more.

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

<ion-item>
  <ion-label>
    Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit.
  </ion-label>
</ion-item>

<ion-item>
  <ion-label class="ion-text-wrap">
    Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit.
  </ion-label>
</ion-item>

<ion-item>
  <ion-label>
    <h1>H1 Heading</h1>
    <p>Paragraph</p>
  </ion-label>
</ion-item>

<ion-item>
  <ion-label>
    <h2>H2 Heading</h2>
    <p>Paragraph</p>
  </ion-label>
</ion-item>

<ion-item>
  <ion-label>
    <h3>H3 Heading</h3>
    <p>Paragraph</p>
  </ion-label>
</ion-item>

1.1 Content Types

虽然列表中的 items有多种形式，但它们通常支持5种不同的内容类型：supporting visuals, text, metadata, actions, and controls。但是，并不是所有这些内容类型都应该同时使用。以下指南显示了不同的内容类型以及如何在应用程序中正确使用它们。

1.1.1 Supporting Visuals

<ion-list>
  <ion-item>
    <!--     此元素将被辅助技术隐藏，但仍然在视觉上呈现-->
    <ion-icon aria-hidden="true" name="airplane" slot="start"></ion-icon>
    <ion-label>Airplane Mode</ion-label>
  </ion-item>
  <ion-item>
    <ion-icon aria-hidden="true" name="wifi" slot="start"></ion-icon>
    <ion-label>Wi-Fi</ion-label>
  </ion-item>
  <ion-item>
    <ion-icon aria-hidden="true" name="bluetooth" slot="start"></ion-icon>
    <ion-label>Bluetooth</ion-label>
  </ion-item>
  <ion-item>
    <ion-icon aria-hidden="true" name="call" slot="start"></ion-icon>
    <ion-label>Cellular</ion-label>
  </ion-item>
</ion-list>

<ion-list>
  <ion-item>
    <ion-avatar aria-hidden="true" slot="start">
      <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
    </ion-avatar>
    <ion-label>Huey</ion-label>
  </ion-item>
  <ion-item>
    <ion-avatar aria-hidden="true" slot="start">
      <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
    </ion-avatar>
    <ion-label>Dewey</ion-label>
  </ion-item>
  <ion-item>
    <ion-avatar aria-hidden="true" slot="start">
      <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
    </ion-avatar>
    <ion-label>Louie</ion-label>
  </ion-item>
  <ion-item>
    <ion-avatar aria-hidden="true" slot="start">
      <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
    </ion-avatar>
    <ion-label>Fooie</ion-label>
  </ion-item>
</ion-list>

1.1.2 Text

<ion-header>
  <ion-toolbar>
    <ion-title>Example</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content color="light">
  <ion-list [inset]="true">
    <ion-item>
      <ion-input label="First Name" clear-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-input label="Last Name" clear-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-toggle>
        <ion-label>Allow Notifications</ion-label>
        <ion-note color="medium">Unsubscribe at any time</ion-note>
      </ion-toggle>
    </ion-item>
  </ion-list>

  <ion-list [inset]="true">
    <ion-item>
      <ion-textarea label="Comments" labelPlacement="floating" rows="5"></ion-textarea>
    </ion-item>
  </ion-list>

  <ion-note color="medium" class="ion-margin-horizontal">
    Your comments will be kept anonymous and will only be used to improve the reliability of our products.</ion-note>
</ion-content>

1.1.3 Metadata

<ion-header>
  <ion-toolbar>
    <ion-title>Example</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content color="light">
  <ion-list [inset]="true">
    <ion-item [button]="true">
      <ion-icon color="danger" slot="start" name="list-circle" size="large"></ion-icon>
      <ion-label>General</ion-label>
      <ion-note slot="end">6</ion-note>
    </ion-item>
    <ion-item [button]="true">
      <ion-icon color="tertiary" slot="start" name="list-circle" size="large"></ion-icon>
      <ion-label>Shopping</ion-label>
      <ion-note slot="end">15</ion-note>
    </ion-item>
    <ion-item [button]="true">
      <ion-icon color="success" slot="start" name="list-circle" size="large"></ion-icon>
      <ion-label>Cleaning</ion-label>
      <ion-note slot="end">3</ion-note>
    </ion-item>
    <ion-item [button]="true">
      <ion-icon color="warning" slot="start" name="list-circle" size="large"></ion-icon>
      <ion-label>Reminders</ion-label>
      <ion-note slot="end">8</ion-note>
    </ion-item>
  </ion-list>
</ion-content>

<ion-header>
  <ion-toolbar>
    <ion-title>Example</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content color="light">
  <ion-list [inset]="true">
    <ion-item [button]="true" detail="false">
      <div class="unread-indicator-wrapper" slot="start">
        <div class="unread-indicator"></div>
      </div>
      <ion-label>
        <strong>Rick Astley</strong>
        <ion-text>Never Gonna Give You Up</ion-text><br />
        <ion-note color="medium" class="ion-text-wrap">
          Never gonna give you up Never gonna let you down Never gonna run...
        </ion-note>
      </ion-label>
      <div class="metadata-end-wrapper" slot="end">
        <ion-note color="medium">06:11</ion-note>
        <ion-icon color="medium" name="chevron-forward"></ion-icon>
      </div>
    </ion-item>
    <ion-item [button]="true" detail="false">
      <div class="unread-indicator-wrapper" slot="start"></div>
      <ion-label>
        <strong>Ionitron</strong>
        <ion-text>I have become sentient</ion-text><br />
        <ion-note color="medium" class="ion-text-wrap">That is all.</ion-note>
      </ion-label>
      <div class="metadata-end-wrapper" slot="end">
        <ion-note color="medium">03:44</ion-note>
        <ion-icon color="medium" name="chevron-forward"></ion-icon>
      </div>
    </ion-item>
    <ion-item [button]="true" detail="false">
      <div class="unread-indicator-wrapper" slot="start">
        <div class="unread-indicator"></div>
      </div>
      <ion-label>
        <strong>Steam</strong>
        <ion-text>Game Store Sale</ion-text><br />
        <ion-note color="medium" class="ion-text-wrap">
          That game you added to your wish list 2 years ago is now on sale!
        </ion-note>
      </ion-label>
      <div class="metadata-end-wrapper" slot="end">
        <ion-note color="medium">Yesterday</ion-note>
        <ion-icon color="medium" name="chevron-forward"></ion-icon>
      </div>
    </ion-item>
    <ion-item [button]="true" detail="false">
      <div class="unread-indicator-wrapper" slot="start"></div>
      <ion-label>
        <strong>Ionic</strong>
        <ion-text>Announcing Ionic 7.0</ion-text><br />
        <ion-note color="medium" class="ion-text-wrap">This version is one more than Ionic 6!</ion-note>
      </ion-label>
      <div class="metadata-end-wrapper" slot="end">
        <ion-note color="medium">Yesterday</ion-note>
        <ion-icon color="medium" name="chevron-forward"></ion-icon>
      </div>
    </ion-item>
  </ion-list>
</ion-content>

.unread-indicator {
  background: var(--ion-color-primary);

  width: 10px;
  height: 10px;

  border-radius: 100%;

  position: absolute;

  inset-inline-start: 12px;
  top: 12px;
}

.metadata-end-wrapper {
  position: absolute;

  top: 10px;
  inset-inline-end: 10px;

  font-size: 0.8rem;

  display: flex;
  align-items: center;
}

ion-label strong {
  display: block;

  max-width: calc(100% - 60px);

  overflow: hidden;

  text-overflow: ellipsis;
}

ion-label ion-note {
  font-size: 0.9rem;
}

1.1.4 Actions

<ion-header>
  <ion-toolbar>
    <ion-title>Example</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content color="light">
  <ion-list [inset]="true">
    <ion-item-sliding>
      <ion-item [button]="true">
        <ion-avatar aria-hidden="true" slot="start">
          <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
        </ion-avatar>
        <ion-label>Rick Astley</ion-label>
      </ion-item>
      <ion-item-options slot="end">
        <ion-item-option color="warning">
          <ion-icon slot="icon-only" name="pin"></ion-icon>
        </ion-item-option>
        <ion-item-option color="tertiary">
          <ion-icon slot="icon-only" name="share"></ion-icon>
        </ion-item-option>
        <ion-item-option color="danger" expandable="true">
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item [button]="true">
        <ion-avatar aria-hidden="true" slot="start">
          <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
        </ion-avatar>
        <ion-label>Leeroy Jenkins</ion-label>
      </ion-item>
      <ion-item-options slot="end">
        <ion-item-option color="warning">
          <ion-icon slot="icon-only" name="pin"></ion-icon>
        </ion-item-option>
        <ion-item-option color="tertiary">
          <ion-icon slot="icon-only" name="share"></ion-icon>
        </ion-item-option>
        <ion-item-option color="danger" expandable="true">
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item [button]="true">
        <ion-avatar aria-hidden="true" slot="start">
          <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
        </ion-avatar>
        <ion-label>Ionitron</ion-label>
      </ion-item>
      <ion-item-options slot="end">
        <ion-item-option color="warning">
          <ion-icon slot="icon-only" name="pin"></ion-icon>
        </ion-item-option>
        <ion-item-option color="tertiary">
          <ion-icon slot="icon-only" name="share"></ion-icon>
        </ion-item-option>
        <ion-item-option color="danger" expandable="true">
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item [button]="true">
        <ion-avatar aria-hidden="true" slot="start">
          <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
        </ion-avatar>
        <ion-label>Wall-E</ion-label>
      </ion-item>
      <ion-item-options slot="end">
        <ion-item-option color="warning">
          <ion-icon slot="icon-only" name="pin"></ion-icon>
        </ion-item-option>
        <ion-item-option color="tertiary">
          <ion-icon slot="icon-only" name="share"></ion-icon>
        </ion-item-option>
        <ion-item-option color="danger" expandable="true">
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item [button]="true">
        <ion-avatar aria-hidden="true" slot="start">
          <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
        </ion-avatar>
        <ion-label>Cortana</ion-label>
      </ion-item>
      <ion-item-options slot="end">
        <ion-item-option color="warning">
          <ion-icon slot="icon-only" name="pin"></ion-icon>
        </ion-item-option>
        <ion-item-option color="tertiary">
          <ion-icon slot="icon-only" name="share"></ion-icon>
        </ion-item-option>
        <ion-item-option color="danger" expandable="true">
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item [button]="true">
        <ion-avatar aria-hidden="true" slot="start">
          <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
        </ion-avatar>
        <ion-label>Bender</ion-label>
      </ion-item>
      <ion-item-options slot="end">
        <ion-item-option color="warning">
          <ion-icon slot="icon-only" name="pin"></ion-icon>
        </ion-item-option>
        <ion-item-option color="tertiary">
          <ion-icon slot="icon-only" name="share"></ion-icon>
        </ion-item-option>
        <ion-item-option color="danger" expandable="true">
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item [button]="true">
        <ion-avatar aria-hidden="true" slot="start">
          <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
        </ion-avatar>
        <ion-label>BB-8</ion-label>
      </ion-item>
      <ion-item-options slot="end">
        <ion-item-option color="warning">
          <ion-icon slot="icon-only" name="pin"></ion-icon>
        </ion-item-option>
        <ion-item-option color="tertiary">
          <ion-icon slot="icon-only" name="share"></ion-icon>
        </ion-item-option>
        <ion-item-option color="danger" expandable="true">
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

1.1.5 Controls

<ion-header>
  <ion-toolbar>
    <ion-title>Example</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content color="light">
  <ion-list [inset]="true">
    <ion-item>
      <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
      <ion-input aria-label="Task name" value="Get eggs"></ion-input>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
      <ion-input aria-label="Task name" value="Get milk"></ion-input>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
      <ion-input aria-label="Task name" value="Take out compost"></ion-input>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
      <ion-input aria-label="Task name" value="Pick up dry cleaning"></ion-input>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
      <ion-input aria-label="Task name" value="Call mom"></ion-input>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
      <ion-input aria-label="Task name" value="Order more dog food"></ion-input>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
      <ion-input aria-label="Task name" value="Think of new tasks for this demo"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

1.1.6 Clickable Items

如果项目设置了href或button属性，则该项目被视为“可单击”。可点击项目有一些视觉差异，表明它们可以进行交互。例如，一个可点击的项目在md模式下激活时会收到涟漪效果，在ios模式下激活后会有一个高亮显示，并且在ios模式中默认情况下有一个详细箭头。

<ion-item href="#">
  <ion-label>Anchor Item</ion-label>
</ion-item>

<ion-item href="#" disabled="true">
  <ion-label>Disabled Anchor Item</ion-label>
</ion-item>

<ion-item button>
  <ion-label>Button Item</ion-label>
</ion-item>

<ion-item button disabled="true">
  <ion-label>Disabled Button Item</ion-label>
</ion-item>

1.1.7 Detail Arrows

默认情况下，可点击items在ios模式下会显示一个右箭头图标。若要隐藏可单击元素上的右箭头图标，请将detail属性设置为false。若要在不自然显示的项目上显示右箭头图标，请将detail属性设置为true。

<ion-item detail="true">
  <ion-label>
    <h3>Text Item</h3>
    <p>Detail set to true - detail arrow displays on both modes</p>
  </ion-label>
</ion-item>

<ion-item button>
  <ion-label>
    <h3>Button Item</h3>
    <p>Default detail - detail arrow displays on iOS only</p>
  </ion-label>
</ion-item>

<ion-item button detail="true">
  <ion-label>
    <h3>Button Item</h3>
    <p>Detail set to true - detail arrow displays on both modes</p>
  </ion-label>
</ion-item>

<ion-item button detail="false">
  <ion-label>
    <h3>Button Item</h3>
    <p>Detail set to false - detail arrow hidden on both modes</p>
  </ion-label>
</ion-item>

<ion-item button detail="true" detail-icon="caret-forward-outline">
  <ion-label>
    <h3>Button Item</h3>
    <p>Detail set to true - detail arrow displays on both modes</p>
    <p>Detail icon set to caret-forward-outline</p>
  </ion-label>
</ion-item>

1.1.8 Item Lines

默认情况下，Items 显示插入的底部边框。边框在左侧有填充，不会出现在“start”插槽中的任何内容下。lines属性可以修改为“full”或“none”，分别显示全宽边框或无边框。

<ion-item>
  <ion-label> Default Item Lines </ion-label>
</ion-item>

<ion-item lines="inset">
  <ion-label>Item Lines Inset</ion-label>
</ion-item>

<ion-item lines="full">
  <ion-label>Item Lines Full</ion-label>
</ion-item>

<ion-item lines="none">
  <ion-label>Item Lines None</ion-label>
</ion-item>

<ion-item>
  <ion-icon name="star" slot="start"></ion-icon>
  <ion-label>Default Item Lines</ion-label>
  <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

<ion-item lines="inset">
  <ion-icon name="star" slot="start"></ion-icon>
  <ion-label>Item Lines Inset</ion-label>
  <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

<ion-item lines="full">
  <ion-icon name="star" slot="start"></ion-icon>
  <ion-label>Item Lines Full</ion-label>
  <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

<ion-item lines="none">
  <ion-icon name="star" slot="start"></ion-icon>
  <ion-label>Item Lines None</ion-label>
  <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

1.1.9 Buttons in Items

Buttons 在项目内部的样式比在项目外部的样式小。要使按钮大小与项目外的按钮相匹配，请将size 属性设置为“default”。

<ion-item>
  <ion-button slot="start"> Start </ion-button>
  <ion-label>Default Buttons</ion-label>
  <ion-button slot="end"> End </ion-button>
</ion-item>

<ion-item>
  <ion-button slot="start">
    Start
    <ion-icon name="home" slot="end"></ion-icon>
  </ion-button>
  <ion-label>Buttons with Icons</ion-label>
  <ion-button slot="end">
    <ion-icon name="star" slot="end"></ion-icon>
    End
  </ion-button>
</ion-item>

<ion-item>
  <ion-button slot="start">
    <ion-icon slot="icon-only" name="navigate"></ion-icon>
  </ion-button>
  <ion-label>Icon only Buttons</ion-label>
  <ion-button slot="end">
    <ion-icon slot="icon-only" name="star"></ion-icon>
  </ion-button>
</ion-item>

<ion-item>
  <ion-label>Button Sizes</ion-label>
  <ion-button slot="end" size="small"> Small </ion-button>
  <ion-button slot="end" size="default"> Default </ion-button>
  <ion-button slot="end" size="large"> Large </ion-button>
</ion-item>

1.1.10 Item Inputs

<ion-item>
  <ion-input label="Default Input" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
  <ion-input label="Fixed Input" label-placement="fixed" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
  <ion-input label="Stacked Input" label-placement="stacked" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
  <ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
  <ion-select label="Select" placeholder="Make a Selection">
    <ion-select-option value="">No Game Console</ion-select-option>
    <ion-select-option value="nes">NES</ion-select-option>
    <ion-select-option value="n64">Nintendo64</ion-select-option>
    <ion-select-option value="ps">PlayStation</ion-select-option>
    <ion-select-option value="genesis">Sega Genesis</ion-select-option>
    <ion-select-option value="saturn">Sega Saturn</ion-select-option>
    <ion-select-option value="snes">SNES</ion-select-option>
  </ion-select>
</ion-item>

<ion-item>
  <ion-toggle> Toggle </ion-toggle>
</ion-item>

<ion-item>
  <ion-checkbox> Checkbox </ion-checkbox>
</ion-item>

<ion-item>
  <ion-range label-placement="start">
    <div slot="label">Range</div>
  </ion-range>
</ion-item>

1.1.11 Theming

<ion-item>
  <ion-label>Default Item</ion-label>
</ion-item>
<ion-item color="primary">
  <ion-label>Primary Item</ion-label>
</ion-item>
<ion-item color="secondary">
  <ion-label>Secondary Item</ion-label>
</ion-item>
<ion-item color="tertiary">
  <ion-label>Tertiary Item</ion-label>
</ion-item>
<ion-item color="success">
  <ion-label>Success Item</ion-label>
</ion-item>
<ion-item color="warning">
  <ion-label>Warning Item</ion-label>
</ion-item>
<ion-item color="danger">
  <ion-label>Danger Item</ion-label>
</ion-item>
<ion-item color="light">
  <ion-label>Light Item</ion-label>
</ion-item>
<ion-item color="medium">
  <ion-label>Medium Item</ion-label>
</ion-item>
<ion-item color="dark">
  <ion-label>Dark Item</ion-label>
</ion-item>

<ion-item button detail lines="full">
  <ion-label>Custom Item</ion-label>
</ion-item>

ion-item::part(native) {
  background: #19422d;
  color: #fff;

  border-color: #fff;
  border-style: dashed;
  border-width: 2px;

  border-radius: 20px;
}

ion-item::part(detail-icon) {
  color: white;
  opacity: 1;
  font-size: 20px;
}