froq/ui

文档

flat

没有比喻。中性色、系统字体、蓝色强调。项目还没有自己的声音时用它。

分段按钮上有一块滑块。开关是轨道加旋钮,旁边放当前状态的词。

import '@froq/ui/flat/style.css'
import { Choice, Toggle } from '@froq/ui/flat'

页面或区块加上 class="ui-flat"。

Choice

Tone

plain

Toggle

没写 on-label / off-label 时,旁边的词就是 label。

false

Props

Choice

Prop类型说明
v-modelstring当前值,必填
options{ value, label }[]选项
labelstring可选。这组选择的名字,读屏用

Toggle

Prop类型说明
v-modelboolean默认 false
labelstring必填。读屏名称。没写 on/off 文案时也当作可见文字
on-labelstring可选。打开时旁边的词
off-labelstring可选。关闭时旁边的词

Token

flat

--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