SClickableChip <s-clickable-chip>

可点击、可作为链接跳转或可移除的交互式标签，适用于筛选条件和已应用的标签。 SClickableChip 是 Shopify Polaris <s-clickable-chip> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 保持标签简短。 目标是一到三个词，例如“电子产品”或“夏季促销”。
• 按重要性选择 color。 次要的 chip 使用 color="subdued"，标准选项保留默认的 "base"。
• 让移除操作易于发现。 当 chip 为 removable 时，确保其移除按钮清晰可见，并具有明确的悬停和焦点状态。
• 将相关的 chip 分组。 将它们放在一个 inline 的 SStack 中，使其水平排列且间距均匀。

<SStack direction="inline" gap="small-200">
  <SClickableChip>Electronics</SClickableChip>
  <SClickableChip color="subdued" removable>Summer sale</SClickableChip>
</SStack>

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

示例

Visit Polaris Removable chip

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

const removed = ref(false)
</script>

<template>
  <!-- SClickableChip is a Chip that can act as a link (href) or command trigger,
       and its `graphic` slot only accepts an SIcon. -->
  <SClickableChip href="https://polaris.shopify.com" target="_blank">
    <template #graphic>
      <SIcon type="external" />
    </template>
    Visit Polaris
  </SClickableChip>

  <!-- removable chips fire `remove`; drive `hidden` from app state to actually hide it. -->
  <SClickableChip removable :hidden="removed" @remove="removed = true">
    Removable chip
  </SClickableChip>
</template>

Props

Prop	类型	说明
accessibilityLabel	string	描述 Chip 用途或内容的标签。它会被屏幕阅读器等辅助技术读给用户。
color	"subdued" | "base" | "strong"	调整颜色的强弱程度。
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	设置此可点击元素被激活时 commandFor 应执行的操作。有关各组件支持的操作，请参阅相应组件的文档。 - --auto：目标组件的默认操作。 - --show：显示目标组件。 - --hide：隐藏目标组件。 - --toggle：切换目标组件。 - --copy：复制目标 ClipboardItem。
commandFor	string	应响应此组件上激活操作（例如点击）的组件 ID。有关如何控制目标的行为，请参阅 command。
disabled	boolean	标签是否被禁用，禁用后将阻止任何用户交互。
hidden	boolean	标签是否被隐藏。在受控组件模式下使用 removable 标签时，请在 remove 事件触发时更新此属性。对于不可移除的标签，可手动切换此属性来显示或隐藏标签。
href	string	点击时要导航到的 URL。先触发 click 事件，然后进行导航。如果同时设置了 commandFor，则会执行命令而不是导航。
interestFor	string	应响应此组件上关注操作（例如悬停和聚焦）的组件 ID。
removable	boolean	标签是否显示用于移除的移除按钮。点击时会触发 remove 回调。

Events

Event	类型
afterhide	CustomEvent
click	MouseEvent
remove	CustomEvent

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

Slots

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