SChip <s-chip>

用于标签或属性的静态标记，可选择是否可移除。 SChip 是 Shopify Polaris <s-chip> web component 的带类型 Vue 3 wrapper。

import { SChip } from 'polaris-vue-elements'

最佳实践

• 用 chip 来描述，而不是执行操作。 chip 适合用作标签、状态和分类，向商家说明内容的相关信息。它们不是按钮，因此当 chip 需要被点击或移除时，请改用 SClickableChip。
• 保持标签简短。 “精选”或“促销中”这样的简短文字一眼就能看懂，而较长的标签会拖慢浏览速度，还可能被截断。
• 让视觉权重与内容相匹配。 次要的元数据使用 color="subdued"，普通标签和分类使用默认颜色。
• 将 chip 放在它所描述的内容旁边。 让 chip 紧挨它所标注的项目；在列表中，每一行都将其放在相同位置，便于商家快速浏览。
• 在有帮助时添加图标。 在 graphic slot 中放入 SIcon，可以让状态或常见分类更容易识别。

<SChip>
  <SIcon slot="graphic" type="star" />
  Featured
</SChip>
<SChip color="subdued">Imported</SChip>

参阅 Shopify 关于 <s-chip> 的最佳实践（英文）以获取完整指南。

示例

Snowboard Removable chip

<script setup>
import { ref } from 'vue'
import { SChip, SIcon } from 'polaris-vue-elements'

const removed = ref(false)
</script>

<template>
  <!-- SChip's `graphic` slot only accepts an SIcon. -->
  <SChip>
    <template #graphic>
      <SIcon type="product" />
    </template>
    Snowboard
  </SChip>

  <!-- SChip has no `hidden` prop (unlike SClickableChip) — use v-if to remove it
       from the DOM when `remove` fires. -->
  <SChip v-if="!removed" color="strong" removable @remove="removed = true">
    Removable chip
  </SChip>
</template>

Props

Prop	类型	说明
accessibilityLabel	string	为屏幕阅读器等辅助技术描述组件用途或内容的标签。当仅凭可见内容无法清楚传达组件用途时，可用它提供额外的上下文。
color	"subdued" | "base" | "strong"	控制视觉强度的颜色强调级别。
removable	boolean	标签是否可移除。

Events

Event	类型
remove	CustomEvent

在 <SChip> 上使用 @remove 形式的监听器来监听这些事件。

Slots

Slot	说明
default	标签组件中显示的文本标签，通常表示已选的筛选条件、标签或可移除项。
graphic	显示在标签开头的可选图标。仅接受图标组件。