IvyLabs Design BostonIvy 爬山虎 v0.3.0

组件

15 个组件,预览会跟着右上角的风格和明暗一起切换。组件写在 components/bundle.js(全局 window.BostonIvy),样式在 bundle.css,类型见 index.d.ts。

基础

Avatar

成员头像(首字母),以及多人叠放的 AvatarStack。

Checkbox

完成勾选框,也用作普通复选框。

Icon

一套 24px 线性图标,描边粗细和端点随风格变化,颜色跟随文字。

Input

带标签的单行输入框,可以带前置图标和快捷键提示。

Label

用户给任务打的标签,7 种颜色之一。

Priority

优先级标记,1 低、2 中、3 高、4 紧急、5 立即。

导航与反馈

EmptyState

列表、看板或搜索结果为空时显示的插画、标题、说明和一个操作。

Notification

通知列表里的一条通知,配合 NotificationList 弹出面板使用。

Sidebar

桌面端主导航:品牌位、搜索、导航、项目树、保存的过滤器、团队、计时器和用户区。

任务

KanbanCard

看板视图里的任务卡片,配合 KanbanColumn 分栏使用。

TaskRow

列表视图里的一行任务,配合 TaskList 容器使用。

Timer

计时器:卡片版用于侧栏和任务详情,胶囊版用于任务行、看板卡片和顶栏。

风格

Mascot

吉祥物小老虎,按当前风格自动换成扁平、贴纸或像素版本。

ThemeSwitcher

「设置 › 外观」里的风格与明暗选择器,三种风格卡片加「跟随系统 / 亮色 / 暗色」。