芯片 Svelte 组件

芯片属性
芯片插槽
示例

芯片 (标签) Svelte 组件以小块的形式表示复杂的实体，例如联系人。它们可以包含照片、简短的标题字符串和简短的信息

芯片组件

包括以下组件

芯片

芯片属性

名称	类型	默认值	描述
颜色	对象		包含 Tailwind CSS 颜色类的对象
colors.fillBgIos	字符串	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.fillBgMaterial	字符串	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.fillTextIos	字符串	'text-current'
colors.fillTextMaterial	字符串	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.outlineBorderIos	字符串	'border-black border-opacity-20 dark:border-white dark:border-opacity-20'
colors.outlineBorderMaterial	字符串	'border-md-light-outline dark:border-md-dark-outline'
colors.outlineTextIos	字符串	'text-current'
colors.outlineTextMaterial	字符串	'text-md-light-on-surface dark:text-md-dark-on-surface'
删除按钮	布尔值	false	定义芯片是否具有额外的“删除”按钮
轮廓	布尔值	false	使芯片轮廓
onDelete	函数(e)		事件将在芯片删除按钮单击时触发
onClick	函数(e)		`click` 事件处理程序

芯片插槽

名称	描述
媒体	芯片媒体区域的内容（例如图标）

示例

Chips.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Chip,
    Block,
    BlockTitle,
  } from 'konsta/svelte';

</script>

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

  <BlockTitle>Chips With Text</BlockTitle>
  <Block strongIos outlineIos>
    <Chip class="m-0.5">Example Chip</Chip>
    <Chip class="m-0.5">Another Chip</Chip>
    <Chip class="m-0.5">One More Chip</Chip>
    <Chip class="m-0.5">Fourth Chip</Chip>
    <Chip class="m-0.5">Last One</Chip>
  </Block>

  <BlockTitle>Outline Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip outline class="m-0.5">Example Chip</Chip>
    <Chip outline class="m-0.5">Another Chip</Chip>
    <Chip outline class="m-0.5">One More Chip</Chip>
    <Chip outline class="m-0.5">Fourth Chip</Chip>
    <Chip outline class="m-0.5">Last One</Chip>
  </Block>

  <BlockTitle>Contact Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip class="m-0.5">
      <img
        slot="media"
        alt="avatar"
        class="ios:h-7 material:h-6 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
      />
      Jane Doe
    </Chip>
    <Chip class="m-0.5">
      <img
        slot="media"
        alt="avatar"
        class="ios:h-7 material:h-6 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
      />
      John Doe
    </Chip>
    <Chip class="m-0.5">
      <img
        slot="media"
        alt="avatar"
        class="ios:h-7 material:h-6 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
      />
      Adam Smith
    </Chip>
  </Block>

  <BlockTitle>Deletable Chips / Tags</BlockTitle>
  <Block strongIos outlineIos>
    <Chip
      class="m-0.5"
      deleteButton
      onDelete={() => console.log('Delete Chip')}
    >
      Example Chip
    </Chip>
    <Chip
      class="m-0.5"
      deleteButton
      onDelete={() => console.log('Delete Chip')}
    >
      <img
        slot="media"
        alt="avatar"
        class="ios:h-7 material:h-6 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
      />
      Adam Smith
    </Chip>
  </Block>
  <BlockTitle class=" bg-b bg-b">Color Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-red-500', fillText: 'text-white' }}
    >
      Red Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-green-500', fillText: 'text-white' }}
    >
      Green Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-blue-500', fillText: 'text-white' }}
    >
      Blue Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-yellow-500', fillText: 'text-white' }}
    >
      Yellow Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-pink-500', fillText: 'text-white' }}
    >
      Pink Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{ outlineBorder: 'border-red-500', outlineText: 'text-red-500' }}
    >
      Red Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-green-500',
        outlineText: 'text-green-500',
      }}
    >
      Green Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-blue-500',
        outlineText: 'text-blue-500',
      }}
    >
      Blue Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-yellow-500',
        outlineText: 'text-yellow-500',
      }}
    >
      Yellow Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-pink-500',
        outlineText: 'text-pink-500',
      }}
    >
      Pink Chip
    </Chip>
  </Block>
</Page>