Web Components

Web Components 是一種瀏覽器原生開發組件驅動使用者介面的方式。它們遵循 W3C 規範,以實現 HTML 元素的封裝和互操作性。

184個組件1193個 Story上次更新 2 年前
推文
新增你的組件

摺疊面板

摺疊面板
Trendyol
3
摺疊面板群組
Trendyol
2

警示

警示
Trendyol
14
警示
JSTOR
5
<cc-addon-elasticsearch-options>
Clever Cloud
3

徽章

徽章
Trendyol
5

麵包屑

麵包屑
JSTOR
1

按鈕

查看全部 (10)
按鈕
Trendyol
16
<cc-button>
Clever Cloud
15
分割按鈕
Trendyol
9
按鈕
JSTOR
8
按鈕
RocketCom
5

日曆

日曆
Trendyol
4

卡片

查看全部 (11)
圖片卡片
JSTOR
15
<cc-env-var-linked-services>
Clever Cloud
15
<cc-env-var-editor-expert>
Clever Cloud
9
<cc-env-var-editor-json>
Clever Cloud
9
<cc-env-var-editor-simple>
Clever Cloud
9

核取方塊

查看全部 (6)
核取方塊
Trendyol
13
核取方塊群組
RocketCom
6
核取方塊群組
Trendyol
6
核取方塊
JSTOR
5
核取方塊
RocketCom
5

程式碼

<cc-tile-status-codes>
Clever Cloud
6
<cc-loader>
Clever Cloud
5

下拉式方塊

下拉式方塊
JSTOR
6

詳細資訊

項目詳細資訊
JSTOR
1

對話框

對話框
Trendyol
10

分隔線

選單項目分隔線
RocketCom
1

抽屜

抽屜
Trendyol
6

彈性佈局

<cc-flex-gap>
Clever Cloud
5

頁尾

頁尾
JSTOR
1

網格

ag-Grid
RocketCom
1

頁首

<cc-header-app>
Clever Cloud
18
<cc-header-orga>
Clever Cloud
8
<cc-pricing-header>
Clever Cloud
5
頁首
JSTOR
1

標題

標題
JSTOR
3

圖示

查看全部 (12)
<cc-pricing-product-consumption>
Clever Cloud
22
<cc-tcp-redirection-form>
Clever Cloud
13
<cc-tcp-redirection>
Clever Cloud
8
分類標記
RocketCom
5
<cc-tile-consumption>
Clever Cloud
5

輸入

查看全部 (9)
輸入
Trendyol
28
<cc-pricing-product>
Clever Cloud
25
<cc-input-number>
Clever Cloud
15
<cc-input-text>
Clever Cloud
15
<cc-env-var-input>
Clever Cloud
14

版面配置

版面配置
JSTOR
5

連結

<cc-addon-linked-apps>
Clever Cloud
7
連結
JSTOR
5
ccLink()
Clever Cloud
3

列表

<cc-invoice-list>
Clever Cloud
9
<cc-tile-instances>
Clever Cloud
8
<cc-article-list>
Clever Cloud
6
<cc-doc-list>
Clever Cloud
6

選單

選擇選單
RocketCom
10
選單項目
RocketCom
2
彈出式選單
RocketCom
2

模式視窗

模式視窗
JSTOR
4
模式視窗
RocketCom
2

導覽列

下拉式選單導覽列
JSTOR
1

通知

通知
Trendyol
8

頁面

<cc-pricing-page>
Clever Cloud
4

分頁

分頁
Trendyol
4
分頁
JSTOR
2

彈出視窗

彈出視窗
Trendyol
24
彈出視窗
JSTOR
5

進度

進度指示器
Trendyol
6
進度
RocketCom
4
進度條
JSTOR
2

單選按鈕

單選按鈕群組
RocketCom
6
單選按鈕
Trendyol
6
單選按鈕群組
Trendyol
5
單選按鈕群組
JSTOR
4
單選按鈕
RocketCom
3

搜尋

<cc-elasticsearch-info>
Clever Cloud
12
搜尋
JSTOR
1

選擇

選擇
Trendyol
35
<cc-select>
Clever Cloud
8
選擇
JSTOR
6
選擇選項
Trendyol
3

滑桿

滑桿
RocketCom
6

旋轉器

旋轉器
Trendyol
6

開關

開關
Trendyol
7
開關
RocketCom
4
開關
JSTOR
1

表格

<cc-pricing-table>
Clever Cloud
19
表格
Trendyol
10
<cc-invoice-table>
Clever Cloud
6
表格
JSTOR
4
表格
RocketCom
2

頁籤

頁籤
JSTOR
5
頁籤
RocketCom
2

標籤

標籤
RocketCom
2

文字

文字區域
RocketCom
9

文字區域

文字區域
Trendyol
24
文字區域
JSTOR
6

提示訊息

提示訊息
JSTOR
5

切換

<cc-toggle>
Clever Cloud
9

工具提示

工具提示
Trendyol
15
工具提示
JSTOR
7

排版

排版
JSTOR
12