返回概览
添加你的项目

Emotion 组件

Emotion 是一个样式库,允许你使用 JavaScript 编写样式。这种技术被称为 CSS-in-JS。当你在 JavaScript 组件文件中编写 CSS 时,你会自然而然地被鼓励在组件级别限定样式的作用域。

975组件3907故事上次更新于 5 个月前
推文
添加你的组件

折叠面板

查看全部 (9)
折叠面板
@gilbarbara
13
折叠面板
D2iQ
9
折叠面板
Chakra
5
折叠面板
kiwicom
5

警告

查看全部 (9)
警告
kiwicom
11
警告
Scaleway
7
日历月份
AppNexus
6
可拖拽折线图
AppNexus
5
表格排序标签
Natura Cosmeticos
4

自动完成

自动完成
AppNexus
4
自动完成字段
iq
4

头像

查看全部 (15)
头像状态气泡
Phork
21
彩色头像
Phork
16
头像
Natura Cosmeticos
12
头像
Scaleway
8
头像
@gilbarbara
8

徽章

查看全部 (19)
彩色徽章
Phork
16
徽章
kiwicom
16
徽章
Natura Cosmeticos
14
通知徽章
kiwicom
13
徽章
Phork
11

横幅

查看全部 (10)
横幅
Phork
10
促销横幅
D2iQ
5
横幅
AppNexus
4
横幅容器
Phork
3
强调横幅
kiwicom
3

面包屑

查看全部 (7)
面包屑
Natura Cosmeticos
6
面包屑
Scaleway
5
面包屑
Workday
4
面包屑
kiwicom
4
面包屑
Chakra
3

按钮

查看全部 (63)
按钮组
Phork
35
图标按钮
Phork
31
图标文本按钮
Phork
29
按钮
Phork
26
图标 按钮
Natura Cosmeticos
21

日历

日历
SumUp
4
日历图标
AppNexus
1

卡片

查看全部 (16)
环形进度指示器
Natura Cosmeticos
13
卡片
kiwicom
13
卡片
Grafana
8
图片卡片
kiwicom
7
卡片
D2iQ
6

轮播图

轮播图
SumUp
2
useClickOutside
SumUp
1
useEscapeKey
SumUp
1
useMedia
SumUp
1
useSwipe
SumUp
1

图表

甜甜圈图表
D2iQ
3

聊天

查看全部 (9)
聊天图标
AppNexus
1
聊天消息
Agora
1
聊天消息列表
Agora
1
聊天消息
Agora
1
聊天面板
Agora
1

复选框

查看全部 (17)
复选框
Phork
16
复选框 (选择控件)
Natura Cosmeticos
10
带标签的复选框
AppNexus
9
复选框
kiwicom
7
复选框
Scaleway
7

芯片

查看全部 (7)
芯片
Natura Cosmeticos
16
芯片
Phork
7
选项组
kiwicom
6
芯片
@gilbarbara
5
样式化的芯片
Phork
1

代码

查看全部 (15)
占位符
Scaleway
8
验证码
Scaleway
8
云存储上传项
Agora
7
云存储文件标题
Agora
5
云存储文件列表
Agora
4

折叠

查看全部 (7)
折叠
@gilbarbara
8
折叠
kiwicom
7
可折叠的
AppNexus
5
折叠
Natura Cosmeticos
3
折叠
Chakra
2

颜色选择器

颜色
Phork
14
颜色选择器
Workday
1

组合框

组合框
Workday
1

日期选择器

日期选择器
@gilbarbara
3

详情

扩展面板详情
Natura Cosmeticos
4

对话框

查看全部 (9)
对话框
AppNexus
9
对话框
Natura Cosmeticos
4
对话框内容
Natura Cosmeticos
2
对话框
kiwicom
2
对话框
@gilbarbara
2

分隔线

时间线分隔线项
Phork
14
分隔线
Natura Cosmeticos
7
分隔线
@gilbarbara
3
分隔线
Chakra
2

抽屉

查看全部 (8)
抽屉
kiwicom
8
抽屉
Grafana
4
抽屉菜单
Natura Cosmeticos
3
抽屉
Natura Cosmeticos
1
抽屉主体
Natura Cosmeticos
1

可展开的

可展开的
Scaleway
3
可展开的
Workday
2
可展开的
D2iQ
1

弹性布局

查看全部 (8)
弹性布局
D2iQ
6
弹性项目
D2iQ
6
弹性盒子
Scaleway
3
弹性布局
@gilbarbara
3
弹性网格
iq
3

页脚

页脚
Phork
6
样式化页脚
Phork
2
表格页脚
Natura Cosmeticos
1
房间详情页脚
Agora
1
经典页脚
iq
1

表单

查看全部 (7)
表单结构
D2iQ
7
错误表单大杂烩
kiwicom
6
表单字段
Workday
2
格式化值显示
Grafana
1

网格

查看全部 (7)
线性进度指示器
Natura Cosmeticos
9
网格项目
Natura Cosmeticos
5
网格
AppNexus
5
简单网格
Chakra
4
网格
Scaleway
4

头部

查看全部 (8)
头部
Phork
6
页面头部
D2iQ
5
样式化头部
Phork
2
主页面头部
Agora
1
房间详情头部
Agora
1

标题

查看全部 (6)
标题
kiwicom
12
标题
@gilbarbara
7
标题文本
D2iQ
4
大标题
SumUp
2
标题
Chakra
1

英雄区

查看全部 (7)
开关 (选择控件)
Natura Cosmeticos
7
主题提供器
kiwicom
3
输入状态帮助文本提供器
Natura Cosmeticos
1
Chevron 图标
AppNexus
1
双箭头图标
AppNexus
1

图标

查看全部 (91)
图标状态气泡
Phork
18
底部导航操作
Natura Cosmeticos
9
图标Toast提示
Phork
9
图标计数
Phork
7
图标组
Phork
7

图像

查看全部 (10)
图像输入
SumUp
7
图像
@gilbarbara
5
时间范围输入
Grafana
2
时间范围选择器
Grafana
2
图像
Natura Cosmeticos
1

输入框

查看全部 (42)
输入字段
kiwicom
18
弃用的输入字段
kiwicom
18
日期输入
Scaleway
9
输入组
kiwicom
8
输入字段
iq
8

标签

查看全部 (10)
标签
Phork
9
标签容器
Phork
7
行内标签
Grafana
2
标签
Grafana
2
表单控件标签
Natura Cosmeticos
1

布局

布局
kiwicom
5
可视化布局
Grafana
2

链接

查看全部 (11)
链接
Natura Cosmeticos
10
文本链接
kiwicom
8
链接
Phork
5
链接
Scaleway
5
链接容器
Phork
3

列表

查看全部 (28)
列表
Phork
15
列表
Scaleway
15
列表项
Natura Cosmeticos
9
列表项
SumUp
9
列表
kiwicom
6

加载中

加载中
kiwicom
6
行内加载指示器
D2iQ
2
加载页面
Agora
1
区块加载指示器
D2iQ
1

菜单

查看全部 (7)
下拉菜单
AppNexus
9
菜单
Scaleway
6
菜单
Chakra
5
上下文菜单
AppNexus
5
上下文菜单
Grafana
2

模态框

查看全部 (20)
模态框
Scaleway
17
模态框
D2iQ
13
模态框
Chakra
10
模态框
Phork
9
模态框
kiwicom
8

导航

查看全部 (6)
导航步骤条
Scaleway
5
底部导航
Natura Cosmeticos
3
跳过导航
kiwicom
2
导航栏
@gilbarbara
2
主页导航
Agora
1

通知

通知
Phork
7
行内通知
SumUp
4
Toast 通知
SumUp
4
全屏通知
SumUp
2

页面

查看全部 (6)
密码强度指示器
Scaleway
2
页面工具栏
Grafana
1
错误页面
Agora
1
主页顶部栏
Agora
1
房间详情面板
Agora
1

分页

查看全部 (9)
分页
Phork
20
分页
D2iQ
10
分页
Scaleway
7
分页
kiwicom
4
分页
Workday
3

标签

标签
Workday
5
筛选药丸
Grafana
2
机场插画
kiwicom
2
智能通行证插画
kiwicom
2

弹出框

查看全部 (8)
弹出框
Natura Cosmeticos
15
弹出框
kiwicom
14
弹出框
Chakra
9
PortalDropover
Phork
5
弹出框
D2iQ
4

进度

查看全部 (12)
进度
Phork
18
进度条
@gilbarbara
8
进度圈
@gilbarbara
8
创建进度
Scaleway
6
进度
Chakra
5

单选按钮

查看全部 (12)
单选按钮
Phork
15
单选按钮
kiwicom
8
带边框的单选框
Scaleway
6
单选按钮组
Phork
5
单选按钮
Workday
4

评分

星级评分
kiwicom
2

搜索

搜索
@gilbarbara
3
搜索字段
iq
2
空搜索结果
Grafana
1

选择

查看全部 (13)
高级选择
Scaleway
18
选择
Phork
16
选择
Grafana
11
选择
kiwicom
9
已弃用的选择
kiwicom
9

分隔符

分隔符
Scaleway
5
分隔符
kiwicom
3
步骤
SumUp
3

滑块

查看全部 (8)
滑块
Phork
12
滑块
kiwicom
12
滑块
Grafana
2
幻灯片
SumUp
2
多彩滑块
Phork
1

旋转器

查看全部 (6)
内联促销
D2iQ
3
内联元素
SumUp
2
旋转器
SumUp
2
旋转器
Chakra
1
旋转器
Grafana
1

堆叠

查看全部 (7)
堆叠
kiwicom
11
堆叠
Chakra
6
条形堆叠
Scaleway
2
堆叠
D2iQ
2
堆叠面板
Phork
1

开关

开关
kiwicom
4
开关
Workday
2
开关
Grafana
2
开关
Scaleway
2
开关
Chakra
1

表格

查看全部 (20)
数据表格
AppNexus
15
表格
D2iQ
14
表格单元格
Natura Cosmeticos
6
价格表
kiwicom
6
表格
kiwicom
6

标签页

查看全部 (7)
标签页
Workday
4
标签页
SumUp
3
标签页
Chakra
2
标签页
Grafana
2
标签页
D2iQ
2

标签

查看全部 (16)
彩色标签
Phork
16
标签
Phork
15
标签
iq
10
标签组
Phork
8
标签
Scaleway
6

文本

查看全部 (9)
排版 (文本)
Natura Cosmeticos
20
文本框
Scaleway
17
文本字段
Natura Cosmeticos
15
文本
kiwicom
7
文本区域
kiwicom
7

文本字段

字段
@gilbarbara
11
字段组
D2iQ
2

文本区域

查看全部 (10)
文本区域
Phork
15
文本
D2iQ
8
文本区域
SumUp
7
文本
Workday
6
文本块
D2iQ
4

标题

登录标题
Agora
1
UIKit主题提供器
D2iQ
1
UIKit提供器
D2iQ
1

Toast

查看全部 (13)
带标题的Toast
Phork
9
Toast
Phork
9
Toaster
D2iQ
8
Toast
kiwicom
3
Snackbar (Toast)
Natura Cosmeticos
2

切换

查看全部 (8)
切换
@gilbarbara
11
切换
Phork
7
切换框组
D2iQ
3
切换
SumUp
3
切换内容
D2iQ
2

工具提示

查看全部 (11)
工具提示
iq
9
工具提示
kiwicom
8
基础工具提示
kiwicom
8
工具提示
Scaleway
5
工具提示
D2iQ
5

排版

排版
Scaleway
6
排版
Grafana
1
段落
@gilbarbara
1