返回概览
添加你的项目

Styled components

Styled-components 是一个样式库,允许你在组件级别用 JavaScript 编写样式。这项技术被称为 CSS-in-JS。

455组件997故事上次更新 6 个月前
Tweet
添加你的组件

手风琴

手风琴面板
SmartHR
4
手风琴
Toptal
1
锚点
react95.io
1

Alert

Alert
Toptal
1

Autocomplete

InlineAutocomplete
GitHub
3
CompactInformationPanel
SmartHR
2
Autocomplete
Toptal
1

Avatar

AvatarToken
GitHub
3
Avatar
Kay Pacha2
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 Pacha3
卡片
Kay Pacha2

轮播图

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 Pacha2

抽屉

抽屉
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 Pacha2
设计组件 API
Toptal
1
图标
Toptal
1
通知
Toptal
1

图像

图像
Kay Pacha2
图像
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 Pacha2

列表

查看全部 (11)
操作列表
GitHub
11
操作列表
GitHub
5
有序列表
GOV.UK
5
导航列表
GitHub
4
无序列表
GOV.UK
4

加载中

加载框
GOV.UK
5
加载中
Kay Pacha1

菜单

菜单
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 Pacha2
排版
Toptal
1