返回總覽
新增您的專案

樣式化元件

Styled-components 是一個樣式庫,允許您在元件層級以 JavaScript 編寫樣式。這種技術稱為 CSS-in-JS。

455個元件997個故事上次更新於 6 個月前
推文
新增您的元件

手風琴

手風琴面板
SmartHR
4
手風琴
Toptal
1
錨點
react95.io
1

警示

警示
Toptal
1

自動完成

內嵌自動完成
GitHub
3
精簡資訊面板
SmartHR
2
自動完成
Toptal
1

頭像

頭像標記
GitHub
3
頭像
Kay Pacha2
頭像
Toptal
1
AvatarStack
GitHub
1
頭像
react95.io
1

徽章

徽章
Toptal
1
使用者徽章
Toptal
1
徽章
Grommet
1

橫幅

階段橫幅
GOV.UK
2
環境橫幅
Toptal
1
分支名稱
GitHub
1

麵包屑

麵包屑導覽
Toptal
1
區段分隔
GOV.UK
1
麵包屑導覽
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
核取方塊
Toptal
1
核取方塊
SmartHR
1

程式碼

應用程式更新通知
Toptal
1

摺疊

網格欄
GOV.UK
9
全部
Grommet
1
可摺疊
Grommet
1
捲軸檢視
react95.io
1

色彩選擇器

顏色
Grommet
1

複合方塊

下拉式方塊
SmartHR
2

日期選擇器

日期時間下拉式選單
Grommet
1
日期選擇器
SmartHR
1
DatePicker__UNSTABLE
react95.io
1

詳細資訊

詳細資訊
GOV.UK
3

對話框

對話框
SmartHR
14
確認對話框
GitHub
3
對話框
GitHub
3
SmartHR 標誌
SmartHR
1

分隔線

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

頁首

頁面標題
GitHub
1
頁首
Grommet
1
在頁首上
Grommet
1
頁首
SmartHR
1
頁首
kickstartDS
1

標題

標題
GOV.UK
4
標題
SmartHR
1

Hero

Hero
kickstartDS
6
TypographyOverflow
Toptal
1

Icon

檢視全部 (12)
Icon
SmartHR
5
Icon
Kay Pacha2
設計組件 API
Toptal
1
圖示
Toptal
1
通知
Toptal
1

圖片

圖片
Kay Pacha2
圖片
Toptal
1
圖片
SmartHR
1

輸入

檢視全部 (14)
帶有 Token 的文字輸入
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)
多個頁面
頁首
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
單選按鈕
單選按鈕
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
Toptal1