文档
插件
案例展示
博客
视觉测试
企业版
84,733
搜索文档
⌃
K
返回概览
添加你的项目
Styled components
Styled-components 是一个样式库,允许你在组件级别用 JavaScript 编写样式。这项技术被称为 CSS-in-JS。
455
组件
997
故事
上次更新 6 个月前
复制链接
Tweet
React
开源
添加你的组件
组件名称 (A–Z)
手风琴
手风琴面板
SmartHR
4
手风琴
Toptal
1
锚点
react95.io
1
Alert
Alert
Toptal
1
Autocomplete
Autocomplete
GitHub
10
InlineAutocomplete
GitHub
3
CompactInformationPanel
SmartHR
2
Autocomplete
Toptal
1
Avatar
AvatarToken
GitHub
3
Avatar
Kay Pacha
2
Avatar
Toptal
1
AvatarStack
GitHub
1
Avatar
react95.io
1
徽章
徽章
Toptal
1
UserBadge
Toptal
1
徽章
Grommet
1
Banner
Phase banner
GOV.UK
2
EnvironmentBanner
Toptal
1
BranchName
GitHub
1
Breadcrumb
Breadcrumbs
Toptal
1
分隔线
GOV.UK
1
Breadcrumbs
GOV.UK
1
按钮
查看全部 (18)
按钮
GitHub
8
按钮
GOV.UK
8
按钮
kickstartDS
7
按钮
SmartHR
4
按钮
react95.io
4
日历
日历
SmartHR
1
卡片
卡片子组件
Kay Pacha
3
卡片
Kay Pacha
2
轮播图
useFocusZone (焦点区域)
GitHub
8
复选框
复选框
GOV.UK
6
复选框
GitHub
4
复选框
react95.io
2
复选框
Toptal
1
复选框
SmartHR
1
代码
ApplicationUpdateNotification (应用更新通知)
Toptal
1
折叠
栅格列
GOV.UK
9
全部
Grommet
1
可折叠的
Grommet
1
ScrollView (滚动视图)
react95.io
1
颜色选择器
颜色
Grommet
1
组合框
ComboBox (组合框)
SmartHR
2
日期选择器
日期时间下拉
Grommet
1
DatePicker (日期选择器)
SmartHR
1
DatePicker__UNSTABLE (不稳定)
react95.io
1
详情
详情
GOV.UK
3
对话框
对话框
SmartHR
14
ConfirmationDialog (确认对话框)
GitHub
3
对话框
GitHub
3
SmartHRLogo (SmartHR 标志)
SmartHR
1
分隔线
MarkdownViewer (Markdown 查看器)
GitHub
3
分隔线
Kay Pacha
2
抽屉
抽屉
Toptal
1
页脚
页脚
GOV.UK
10
文档页脚元数据
GOV.UK
3
页脚
kickstartDS
1
表单
查看全部 (12)
表单组
GOV.UK
5
如何布局表单
Toptal
1
格式化器
Toptal
1
表单
Grommet
1
格式
Grommet
1
栅格
栅格
Toptal
1
页眉
PageHeader (页面页眉)
GitHub
1
页眉
Grommet
1
在页眉上
Grommet
1
页眉
SmartHR
1
页眉
kickstartDS
1
标题
标题
GOV.UK
4
标题
SmartHR
1
突出内容
突出内容
kickstartDS
6
文本溢出
Toptal
1
图标
查看全部 (12)
图标
SmartHR
5
图标
Kay Pacha
2
设计组件 API
Toptal
1
图标
Toptal
1
通知
Toptal
1
图像
图像
Kay Pacha
2
图像
Toptal
1
图像
SmartHR
1
输入
查看全部 (14)
带令牌的文本输入
GitHub
6
文本输入
GitHub
5
输入字段
GOV.UK
4
输入
SmartHR
2
颜色输入
react95.io
2
标签
查看全部 (7)
问题标签令牌
GitHub
3
标签
GitHub
2
标签
GOV.UK
2
无标签
Grommet
1
值标签
Grommet
1
布局
页面布局
GitHub
7
布局
SmartHR
5
分页布局
GitHub
2
如何布局页面
Toptal
1
链接
查看全部 (7)
链接
GitHub
2
返回链接
GOV.UK
2
链接
GOV.UK
2
跳过链接
GOV.UK
2
链接
Kay Pacha
2
列表
查看全部 (11)
操作列表
GitHub
11
操作列表
GitHub
5
有序列表
GOV.UK
5
导航列表
GitHub
4
无序列表
GOV.UK
4
加载中
加载框
GOV.UK
5
加载中
Kay Pacha
1
菜单
菜单
Toptal
1
模态框
模态框
Toptal
1
提示模态框
Toptal
1
导航
查看全部 (7)
顶部导航
GOV.UK
9
选项卡导航
GitHub
2
内容导航
kickstartDS
2
下划线导航
GitHub
1
下划线导航项
GitHub
1
通知
通知栏
SmartHR
1
页面
查看全部 (6)
页面
kickstartDS
8
页面
GOV.UK
4
页面头部
Toptal
1
页面
Toptal
1
页面侧边栏
Toptal
1
分页
分页
GOV.UK
10
分页
SmartHR
2
分页
Toptal
1
胶囊
填充
Grommet
1
进度
进度条
react95.io
3
进度条
Toptal
1
[待定] 进度条
SmartHR
1
单选按钮
单选按钮
GOV.UK
9
单选按钮
react95.io
2
单选按钮
Toptal
1
单选按钮
GitHub
1
评分
创建示例
Toptal
1
评分
Toptal
1
细
Grommet
1
搜索
搜索框
GOV.UK
1
搜索
GOV.UK
1
选择
查看全部 (10)
选择面板
GitHub
8
选择
GOV.UK
4
选择
react95.io
3
选择
GitHub
2
月份选择
Toptal
1
分隔符
应用栏
react95.io
1
分隔符
react95.io
1
滑块
滑块
react95.io
2
滑块
Toptal
1
加载指示器
内联
Grommet
1
加载指示器
GOV.UK
1
开关
开关
Toptal
1
表格
表格
GOV.UK
5
表格
Toptal
1
数据表格
GitHub
1
表格
SmartHR
1
表格
react95.io
1
标签页
标签页
GOV.UK
8
标签页
react95.io
2
标签页
Toptal
1
带图标的标签页
Grommet
1
标签
标签
GOV.UK
5
如何使用间距
Toptal
1
标签
Toptal
1
文本
文本媒体
kickstartDS
4
富文本
Toptal
1
富文本编辑器
Toptal
1
文本字段
动态字段
Grommet
1
字段状态
Grommet
1
字段集
SmartHR
1
文本域
查看全部 (8)
文本域
GOV.UK
3
文本域
SmartHR
2
插入文本
GOV.UK
2
警告文本
GOV.UK
2
文本域
GitHub
1
工具提示
工具提示
SmartHR
2
工具提示
Toptal
1
工具提示
react95.io
1
排版
段落
GOV.UK
4
排版
Kay Pacha
2
排版
Toptal
1