赞助商成为赞助商

筹码 Svelte 组件

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

筹码组件

以下包含组件

筹码属性

属性类型默认值描述
<Chip> 属性
文本字符串筹码标签文本
媒体字符串筹码媒体文本内容
mediaBgColor字符串筹码媒体元素背景颜色。 默认颜色之一
mediaTextColor字符串筹码媒体元素文本颜色。 默认颜色之一
可删除布尔值false定义筹码是否具有额外的“删除”按钮
轮廓布尔值false使筹码轮廓
工具提示字符串工具提示 文本，悬停/按下时显示
tooltipTrigger字符串悬停定义如何触发 (打开) 工具提示。 可以是 hover、click 或 manual
<Chip> 图标相关属性
iconSize字符串
数字		图标大小（以像素为单位）
iconColor字符串图标颜色。 默认颜色之一
图标字符串自定义图标类
iconF7字符串F7 图标字体图标名称
iconMaterial字符串Material Icons 字体图标名称
iconIos字符串在使用 iOS 主题的情况下使用的图标。 由冒号分隔的图标系列和图标名称组成，例如 f7:house
iconMd字符串在使用 MD 主题的情况下使用的图标。 由冒号分隔的图标系列和图标名称组成，例如 material:home

筹码事件

事件描述
<Chip> 事件
点击事件将在筹码点击时触发
删除事件将在筹码删除按钮点击时触发

筹码插槽

筹码 Svelte 组件为自定义元素提供了额外的插槽

示例

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>
改进此文档
在此页面上