リスト Svelte コンポーネント

リストコンポーネント
リストプロパティ
例

リストビューは、アプリで頻繁に見られる、汎用性が高く強力なユーザーインターフェースコンポーネントです。リストビューは、セクション/グループに分割できる複数の行のスクロール可能なリストにデータを表示します。

リストビューには多くの用途があります

階層的に構造化されたデータ内をユーザーがナビゲートできるようにするため
アイテムのインデックス付きリストを表示するため
視覚的に区別されたグループで詳細情報とコントロールを表示するため
オプションの選択可能なリストを表示するため

リストコンポーネント

次のコンポーネントが含まれています

List - メインのリストビュー要素
ListGroup - リストグループ要素

リストプロパティ

名前	型	デフォルト	説明
colors	オブジェクト		Tailwind CSS カラークラスを含むオブジェクト
colors.outlineIos	文字列	'border-black border-opacity-20 dark:border-white dark:border-opacity-15'
colors.outlineMaterial	文字列	'border-md-light-outline border-md-dark-outline'
colors.strongBgIos	文字列	'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.strongBgMaterial	文字列	'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
dividers	ブール値	未定義	リストアイテム間に区切り線（境界線）を表示します。`dividersIos` と `dividersMaterial` を上書きします。
dividersIos	ブール値	true	iOSテーマでリストアイテム間に区切り線（境界線）を表示します。
dividersMaterial	ブール値	false	Materialテーマでリストアイテム間に区切り線（境界線）を表示します。
inset	ブール値	未定義	リストブロックをインセットにします。`insetIos` と `insetMaterial` を上書きします。
insetIos	ブール値	false	iOSテーマでリストブロックをインセットにします。
insetMaterial	ブール値	false	Materialテーマでリストブロックをインセットにします。
margin	文字列	'my-8'	Tailwind CSS マージンクラス
menuList	ブール値		リストをメニューリストとして表示します（`<MenuList>` と同じ）
nested	ブール値	false	ヘアライン/区切り線とマージンを削除します。他のブロック内にリストブロックをネストする場合に便利です。
outline	ブール値	未定義	リストの外側の境界線を表示します。`outlineIos` と `outlineMaterial` を上書きします。
outlineIos	ブール値	false	iOSテーマでリストの外側の境界線を表示します。
outlineMaterial	ブール値	false	Materialテーマでリストの外側の境界線を表示します。
strong	ブール値	未定義	追加の強調表示を追加します。`strongIos` と `strongMaterial` を上書きします。
strongIos	ブール値	false	iOSテーマで追加の強調表示を追加します。
strongMaterial	ブール値	false	Materialテーマで追加の強調表示を追加します。

例

List.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Badge,
    Block,
    BlockTitle,
    List,
    ListGroup,
    ListItem,
  } from 'konsta/svelte';
  import DemoIcon from '../components/DemoIcon.svelte';

</script>

<Page>
  <Navbar title="List" />

  <BlockTitle>Simple List</BlockTitle>
  <List>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong List</BlockTitle>
  <List strong>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Outline List</BlockTitle>
  <List strong outline>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Inset List</BlockTitle>
  <List strong inset>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Strong Outline Inset List</BlockTitle>
  <List strong outline inset>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>

  <BlockTitle>Simple Links List</BlockTitle>
  <List strongIos outlineIos>
    <ListItem title="Link 1" link />
    <ListItem title="Link 2" link />
    <ListItem title="Link 3" link />
  </List>

  <BlockTitle>Data list, with icons</BlockTitle>
  <List strongIos outlineIos>
    <ListItem title="Ivan Petrov" after="CEO">
      <DemoIcon slot="media" />
    </ListItem>
    <ListItem title="John Doe">
      <DemoIcon slot="media" />
      <Badge slot="after">5</Badge>
    </ListItem>
    <ListItem title="Jenna Smith">
      <DemoIcon slot="media" />
    </ListItem>
  </List>
  <BlockTitle>Links</BlockTitle>
  <List strongIos outlineIos>
    <ListItem link title="Ivan Petrov" after="CEO"
      ><DemoIcon slot="media" /></ListItem
    >
    <ListItem link title="John Doe" after="Cleaner"
      ><DemoIcon slot="media" /></ListItem
    >
    <ListItem link title="Jenna Smith"><DemoIcon slot="media" /></ListItem>
  </List>
  <BlockTitle>Links, Header, Footer</BlockTitle>
  <List strongIos outlineIos>
    <ListItem link header="Name" title="John Doe" after="Edit">
      <DemoIcon slot="media" />
    </ListItem>
    <ListItem link header="Phone" title="+7 90 111-22-3344" after="Edit">
      <DemoIcon slot="media" />
    </ListItem>
    <ListItem link header="Email" title="john@doe" footer="Home" after="Edit">
      <DemoIcon slot="media" />
    </ListItem>
    <ListItem
      link
      header="Email"
      title="john@konsta"
      footer="Work"
      after="Edit"
    >
      <DemoIcon slot="media" />
    </ListItem>
  </List>

  <BlockTitle>Links, no icons</BlockTitle>
  <List strongIos outlineIos>
    <ListItem link title="Ivan Petrov" />
    <ListItem link title="John Doe" />
    <ListItem groupTitle title="Group title Here" />
    <ListItem link title="Ivan Petrov" />
    <ListItem link title="Jenna Smith" />
  </List>

  <BlockTitle>Grouped with sticky titles</BlockTitle>
  <List strongIos outlineIos>
    <ListGroup>
      <ListItem
        title="A"
        groupTitle
        class="ios:top-11-safe material:top-16-safe sticky"
      />
      <ListItem title="Aaron " />
      <ListItem title="Abbie" />
      <ListItem title="Adam" />
    </ListGroup>
    <ListGroup>
      <ListItem
        title="B"
        groupTitle
        class="ios:top-11-safe material:top-16-safe sticky"
      />
      <ListItem title="Bailey" />
      <ListItem title="Barclay" />
      <ListItem title="Bartolo" />
    </ListGroup>
    <ListGroup>
      <ListItem
        title="C"
        groupTitle
        class="ios:top-11-safe material:top-16-safe sticky"
      />
      <ListItem title="Caiden" />
      <ListItem title="Calvin" />
      <ListItem title="Candy" />
    </ListGroup>
  </List>

  <BlockTitle class="text-2xl">Media Lists</BlockTitle>
  <Block>
    <p>
      Media Lists are almost the same as Data Lists, but with a more flexible
      layout for visualization of more complex data, like products, services,
      user, etc.
    </p>
  </Block>

  <BlockTitle>Songs</BlockTitle>
  <List strongIos outlineIos>
    <ListItem
      chevronMaterial={false}
      link
      title="Yellow Submarine"
      after="$15"
      subtitle="Beatles"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <img
        class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
        slot="media"
        src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
        width="80"
        alt="demo"
      />
    </ListItem>
    <ListItem
      chevronMaterial={false}
      link
      title="Don't Stop Me Now"
      after="$22"
      subtitle="Queen"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <img
        class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
        slot="media"
        src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
        width="80"
        alt="demo"
      />
    </ListItem>
    <ListItem
      chevronMaterial={false}
      link
      title="Billie Jean"
      after="$16"
      subtitle="Michael Jackson"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <img
        class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
        slot="media"
        src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
        width="80"
        alt="demo"
      />
    </ListItem>
  </List>
  <BlockTitle>Mail App</BlockTitle>
  <List strongIos outlineIos>
    <ListItem
      chevronMaterial={false}
      link
      title="Facebook"
      after="17:14"
      subtitle="New messages from John Doe"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    />
    <ListItem
      chevronMaterial={false}
      link
      title="John Doe (via Twitter)"
      after="17:11"
      subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    />
    <ListItem
      chevronMaterial={false}
      link
      title="Facebook"
      after="16:48"
      subtitle="New messages from John Doe"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    />
    <ListItem
      chevronMaterial={false}
      link
      title="John Doe (via Twitter)"
      after="15:32"
      subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    />
  </List>
</Page>