返回總覽
新增你的專案

Styled components

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
頭像堆疊
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
2
核取方塊
Toptal
1
核取方塊
SmartHR
1

程式碼

應用程式更新通知
Toptal
1

摺疊

網格欄
GOV.UK
9
全部
Grommet
1
可摺疊的
Grommet
1
滾動視窗
react95.io
1

顏色選擇器

顏色
Grommet
1

複合方塊

ComboBox
SmartHR
2

日期選擇器

日期時間下拉
Grommet
1
DatePicker
SmartHR
1
DatePicker__UNSTABLE
react95.io
1

詳細資訊

詳細資訊
GOV.UK
3

對話框

對話框
SmartHR
14
確認對話框
GitHub
3
對話框
GitHub
3
SmartHRLogo
SmartHR
1

分隔線

MarkdownViewer
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

主視覺

主視覺
kickstartDS
6
文字溢位
Toptal
1

圖示

檢視全部 (12)
圖示
SmartHR
5
圖示
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)
議題標籤 Token
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
TabNav
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