paper
纸面。衬线做声音,一个强调色,笔画会动。
来自 paper-landing。选中项旁边有一颗点;换选项时,点拉成线,再收回成点。减弱动效时不播放这段。
import '@froq/ui/paper/style.css'
import { Choice, ChoiceCircle, Toggle } from '@froq/ui/paper'
页面或区块加上 class="ui-paper"。
Choice
Tone
plain
ChoiceCircle
圈住选中的词。只有 paper 有这个组件。
plain
Toggle
两个词叠在同一个位置,宽度跟当前那个词走。适合嵌进句子。
用 读。
false
Props
Choice 和 ChoiceCircle 的 props 相同。
Choice
| Prop | 类型 | 说明 |
|---|---|---|
v-model | string | 当前值,必填 |
options | { value, label }[] | 选项。value 是字符串 |
label | string | 可选。这组选择的名字,读屏用 |
Toggle
| Prop | 类型 | 说明 |
|---|---|---|
v-model | boolean | 默认 false |
label | string | 必填。开关的名字,读屏用,不显示 |
on-label | string | 打开时的词,默认 on |
off-label | string | 关闭时的词,默认 off |
Token
paper
--ui-bg
--ui-fg
--ui-muted
--ui-faint
--ui-line
--ui-accent
--ui-font-display
--ui-font-text
--ui-font-meta
--ui-ease
--ui-dur
--ui-radius