SClickable <s-clickable>

让任意内容可作为按钮或链接点击，而不强加按钮样式。 SClickable 是 Shopify Polaris <s-clickable> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 为没有可见文字的元素添加标签。 如果可点击区域内没有可读的文字，请设置 accessibilityLabel，让屏幕阅读器用户知道它的用途。
• 选择合适的模式。 将其用作按钮来触发操作，设置 href 用于导航，提交表单时则设置 type="submit"。
• 解释禁用状态。 设置 disabled 时，要让该状态在视觉上清晰可辨，并添加文字告诉商家为什么该元素无法使用。

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

示例

Clicked 0 times

<script setup>
import { ref } from 'vue'
import { SClickable, SText } from 'polaris-vue-elements'

const clicks = ref(0)
</script>

<template>
  <!-- SClickable is a generic, unstyled-by-default interactive container: box
       styling props (background, padding, borderRadius, ...) plus a click event. -->
  <SClickable
    background="subdued"
    borderRadius="200"
    padding="base"
    @click="clicks++"
  >
    <SText>Clicked {{ clicks }} times</SText>
  </SClickable>
</template>

Props

Prop	类型	说明
accessibilityLabel	string	描述元素用途或内容的标签。设置后，会向使用辅助技术的用户朗读，为其提供更多上下文。仅当元素内容不足以为使用辅助技术的用户提供上下文时才使用此项。
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	设置组件内容的语义。设置后，辅助技术会使用该角色帮助用户浏览页面。
accessibilityVisibility	"visible" | "hidden" | "exclusive"	更改元素的可见性。 - visible：元素对所有用户可见。 - hidden：元素从无障碍树中移除，但仍然可见。 - exclusive：元素在视觉上隐藏，但仍保留在无障碍树中。
background	"subdued" | "base" | "strong" | "transparent"	组件的背景色。
blockSize	"auto" | "0"	元素在标准布局中的垂直尺寸（在从左到右或从右到左的书写模式中为高度）。block 尺寸会根据书写方向调整：在水平布局中控制高度；在垂直布局中控制宽度。这确保了在不同文本方向下行为一致。详细了解 block-size。
border	BorderShorthand	使用简写语法在单个属性中同时指定宽度、颜色和样式的边框。
borderColor	"subdued" | "base" | "strong"	使用设计系统色阶的边框颜色。设置后，会覆盖 border 属性中指定的颜色值。可从 subdued、base 或 strong 中选择，以匹配所需的视觉强调程度。
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	使用设计系统圆角刻度设置元素各角的圆角程度。支持1 到 4 值语法，可为每个角指定不同的圆角半径。用于创建圆角或完全圆形的元素。
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	所有边的边框样式，例如实线、虚线或点线。设置后，会覆盖 border 属性中指定的样式值。支持1 到 4 值语法，可为每条边指定不同的样式。
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	所有边的边框粗细。设置后，会覆盖 border 属性中指定的宽度值。支持1 到 4 值语法，可为每条边指定不同的宽度。
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	设置此可点击元素被激活时 commandFor 应执行的操作。有关各组件支持的操作，请参阅相应组件的文档。 - --auto：目标组件的默认操作。 - --show：显示目标组件。 - --hide：隐藏目标组件。 - --toggle：切换目标组件。 - --copy：复制目标 ClipboardItem。
commandFor	string	应响应此组件上激活操作（例如点击）的组件 ID。有关如何控制目标的行为，请参阅 command。
disabled	boolean	组件是否被禁用，禁用后将阻止点击和获取焦点。禁用时不会触发 click 事件，来自子元素的点击事件会立即停止传播。可交互的子元素仍然可以获得焦点并进行交互。默认情况下不会应用视觉样式，需要根据需要自行应用禁用样式。
display	"auto" | "none"	组件的外部 display 类型。外部类型决定组件如何参与流式布局。 - auto 组件的初始值。实际值取决于组件和上下文。 - none 隐藏组件并将其从无障碍树中移除，使屏幕阅读器无法感知。
download	string	使浏览器将链接的 URL 视为下载，并以该字符串作为文件名。下载仅适用于同源 URL 或 blob: 和 data: 协议。
href	string	要链接到的 URL。 - 如果设置，在执行 click 事件后会导航到 href 指定的位置。 - 如果设置了 commandFor，则会执行 command 而不是导航。
inlineSize	"auto" | "0"	在水平书写模式中为宽度，在垂直书写模式中为高度。用于随文本方向自适应的流相对尺寸设置。详细了解 inline-size。
interestFor	string	应响应此组件上关注操作（例如悬停和聚焦）的组件 ID。
lang	string	文本内容的语言。当文本所用语言与页面其余部分不同时使用，以便屏幕阅读器等辅助技术采用正确的发音。该值应为 IANA 语言子标签注册表中的有效语言子标签。
loading	boolean	组件是否处于加载状态。加载状态会向辅助技术表明某个操作正在进行中，并阻止交互。
maxBlockSize	"none" | "0"	在水平书写模式中为最大高度，在垂直书写模式中为最大宽度。防止元素增长超过此尺寸。详细了解 max-block-size。
maxInlineSize	"none" | "0"	在水平书写模式中为最大宽度，在垂直书写模式中为最大高度。防止元素增长超过此尺寸。详细了解 max-inline-size。
minBlockSize	"0"	在水平书写模式中为最小高度，在垂直书写模式中为最小宽度。防止元素缩小到此尺寸以下。详细了解 min-block-size。
minInlineSize	"0"	在水平书写模式中为最小宽度，在垂直书写模式中为最小高度。防止元素缩小到此尺寸以下。详细了解 min-inline-size。
overflow	"visible" | "hidden"	设置元素的溢出行为。 - hidden：当内容大于元素的容器时裁剪内容。元素将不可滚动，用户无法通过拖动或使用鼠标滚轮访问被裁剪的内容。 - visible：超出元素容器的内容可见。
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	应用于组件所有边的内边距。支持使用流相对值的1 到 4 值语法： - 1 个值应用于所有边 - 2 个值分别应用于 block（上/下）和 inline（左/右） - 3 个值分别应用于 block-start（上）、inline（左/右）和 block-end（下） - 4 个值分别应用于 block-start（上）、inline-end（右）、block-end（下）和 inline-start（左） 示例：* base、large none、base large-100 base small 使用 auto 可从最近的已移除内边距的容器继承内边距。也接受以支持的 PaddingKeyword 作为查询值的响应式值字符串。
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	块方向的内边距（在水平书写模式下为上和下）。接受用于两侧的单个值，或以空格分隔的两个值，分别对应 block-start 和 block-end。 示例：* large none 将 large 应用于顶部，将 none 应用于底部。覆盖 padding 中的块方向值。也接受以受支持的 PaddingKeyword 作为查询值的响应式值字符串。
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	block-end 内边距（在水平书写模式下为底部）。覆盖 paddingBlock 中的 block-end 值。也接受以受支持的 PaddingKeyword 作为查询值的响应式值字符串。
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	block-start 内边距（在水平书写模式下为顶部）。覆盖 paddingBlock 中的 block-start 值。也接受以受支持的 PaddingKeyword 作为查询值的响应式值字符串。
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	内联方向的内边距（在水平书写模式中为左右）。接受一个值同时用于两侧，或用空格分隔的两个值分别用于 inline-start 和 inline-end。示例：* large none 将 large 应用于左侧，将 none 应用于右侧。会覆盖 padding 中的内联值。也接受以支持的 PaddingKeyword 作为查询值的响应式值字符串。
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	inline-end 内边距（在 LTR 书写模式中为右侧，在 RTL 中为左侧）。会覆盖 paddingInline 中的 inline-end 值。也接受以支持的 PaddingKeyword 作为查询值的响应式值字符串。
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	inline-start 内边距（在 LTR 书写模式中为左侧，在 RTL 中为右侧）。会覆盖 paddingInline 中的 inline-start 值。也接受以支持的 PaddingKeyword 作为查询值的响应式值字符串。
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	指定在何处显示链接的 URL。
type	"button" | "reset" | "submit"	Button 的行为。 - submit：表示组件充当提交按钮，即会提交最近的表单。 - button：表示组件充当普通按钮，即没有默认操作。 - reset：表示组件充当重置按钮，即会重置最近的表单（将字段恢复为默认值）。如果组件支持 href 或 commandFor/command 并且设置了其中之一，则此属性会被忽略。

为便于阅读，上面部分类型列已被截断；完整的联合类型见库中生成的 TypeScript 类型（src/lib/generated/types.ts）。

Events

Event	类型
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

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

Slots

Slot	说明
default	显示在可点击组件中的内容，该组件可使任意内容变为可交互、可点击，而不带按钮或链接的语义。