froq/ui

文档

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-modelstring当前值,必填
options{ value, label }[]选项。value 是字符串
labelstring可选。这组选择的名字,读屏用

Toggle

Prop类型说明
v-modelboolean默认 false
labelstring必填。开关的名字,读屏用,不显示
on-labelstring打开时的词,默认 on
off-labelstring关闭时的词,默认 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