芯片 Svelte 组件

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

芯片组件

包含以下组件：

Chip

芯片属性

属性	类型	默认	描述
<Chip> 属性
text	字符串		芯片标签文本
media	字符串		芯片媒体文本内容
mediaBgColor	字符串		芯片媒体元素背景颜色。其中之一默认颜色之一
mediaTextColor	字符串		芯片媒体元素文本颜色。其中之一默认颜色之一
deleteable	布尔值	false	定义芯片是否有附加的“删除”按钮
outline	布尔值	false	使芯片轮廓
提示	字符串		提示鼠标悬停/点击时显示的文本
提示触发器	字符串	悬停	定义如何触发（打开）提示。可以是`hover`, `click`或`manual`
<Chip> 图标相关属性
iconSize	字符串数字		图标大小（像素）
iconColor	字符串		图标颜色。可以是默认颜色之一
icon	字符串		自定义图标类
iconF7	字符串		F7 图标字体图标的名称
iconMaterial	字符串		Material 图标字体图标的名称
iconIos	字符串		在使用 iOS 主题时使用的图标。由图标系列和图标名称组成，例如`f7:house`
iconMd	字符串		在使用 MD 主题时使用的图标。由图标系列和图标名称组成，例如`material:home`

芯片事件

事件	描述
<Chip> 事件
click	点击芯片时将触发事件
删除	点击芯片删除按钮时将触发事件

芯片插槽

芯片 Svelte 组件有额外的插槽用于自定义元素：

text- 元素将替换芯片文本标签插入
default- 与text)
media- 元素将插入到芯片的媒体元素中

示例

chips.svelte

<script>
  import { f7, Navbar, Page, BlockTitle, Chip, Block } from 'framework7-svelte';

  function deleteChip(e) {
    const target = e.target;
    f7.dialog.confirm('Do you want to delete this tiny demo Chip?', () => {
      f7.$(target).parents('.chip').remove();
    });
  }
</script>

<!-- svelte-ignore a11y-missing-attribute -->
<Page>
  <Navbar title="Chips" />
  <BlockTitle>Chips With Text</BlockTitle>
  <Block strongIos outlineIos>
    <Chip text="Example Chip" />
    <Chip text="Another Chip" />
    <Chip text="One More Chip" />
    <Chip text="Fourth Chip" />
    <Chip text="Last One" />
  </Block>
  <BlockTitle>Outline Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip outline text="Example Chip" />
    <Chip outline text="Another Chip" />
    <Chip outline text="One More Chip" />
    <Chip outline text="Fourth Chip" />
    <Chip outline text="Last One" />
  </Block>
  <BlockTitle>Icon Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip
      text="Add Contact"
      mediaBgColor="blue"
      iconIos="f7:plus_circle"
      iconMd="material:add_circle"
    />
    <Chip text="London" mediaBgColor="green" iconIos="f7:compass" iconMd="material:location_on" />
    <Chip text="John Doe" mediaBgColor="red" iconIos="f7:person" iconMd="material:person" />
  </Block>
  <BlockTitle>Contact Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip text="Jane Doe">
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
    </Chip>
    <Chip text="John Doe">
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg" />
    </Chip>
    <Chip text="Adam Smith">
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
    </Chip>
    <Chip text="Jennifer" mediaBgColor="pink" media="J" />
    <Chip text="Chris" mediaBgColor="yellow" media="C" />
    <Chip text="Kate" mediaBgColor="red" media="K" />
  </Block>
  <BlockTitle>Deletable Chips / Tags</BlockTitle>
  <Block strongIos outlineIos>
    <Chip text="Example Chip" deleteable onDelete={deleteChip} />
    <Chip
      text="Chris"
      media="C"
      mediaBgColor="orange"
      textColor="black"
      deleteable
      onDelete={deleteChip}
    />
    <Chip text="Jane Doe" deleteable onDelete={deleteChip}>
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
    </Chip>
    <Chip text="One More Chip" deleteable onDelete={deleteChip} />
    <Chip text="Jennifer" mediaBgColor="pink" media="J" deleteable onDelete={deleteChip} />
    <Chip text="Adam Smith" deleteable onDelete={deleteChip}>
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
    </Chip>
  </Block>
  <BlockTitle>Color Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip text="Red Chip" color="red" />
    <Chip text="Green Chip" color="green" />
    <Chip text="Blue Chip" color="blue" />
    <Chip text="Orange Chip" color="orange" />
    <Chip text="Pink Chip" color="pink" />
    <Chip outline text="Red Chip" color="red" />
    <Chip outline text="Green Chip" color="green" />
    <Chip outline text="Blue Chip" color="blue" />
    <Chip outline text="Orange Chip" color="orange" />
    <Chip outline text="Pink Chip" color="pink" />
  </Block>
</Page>

改进此文档

在本页上

芯片组件
芯片属性
芯片事件
芯片插槽
示例