設計
元件
開發
深色模式 淺色模式 English 贊助
Main Content List Google Facebook Twitter Item 1 Item 2 Item 3 Item 1 Google Item 3 Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 Code //Javascript Example const sample = 'This is a block of code.'; console.log('2nd line.');

# This is a block of code.

2nd Line.

Quote This is a quote without source. This is a quote aligned to the left. Someone famous in Source Title This is a quote aligned to the center. Someone famous in Source Title This is a quote aligned to the right. Someone famous in Source Title Button Primary
Small Small Outline Normal Normal Outline Outline Large Large Outline X Large X Large Outline
Block Outline Block Large Block XLarge Block Disabled Critical
Small Small Outline Normal Normal Outline Outline Large Large Outline X Large X Large Outline
Block Outline Block Large Block Gray
Small Small Outline Normal Normal Outline Outline Large Large Outline X Large X Large Outline
Block Outline Block Large Block Icon
Icon Size
IconFont
Image
Form TextInput & TextArea Outlined Growable multiline text Disabled Textarea multiline text in 300px width Filled Growable multiline text Disabled Textarea multiline text in 300px width CheckBox Un-Checked Checked Un-Checked Disabled Checked Disabled Native Checkbox Radio Un-Checked Checked Un-Checked Disabled Checked Disabled Select 選項一 選項二 選項三 男 女 無性別 選項一 選項二 選項一 選項二 選項一 選項二
IconButton
Preset Preset Icon Custom IconFont Custom Image NONE
Link Button
Preset Preset Preset Preset Preset
Camera Start Pause Stop Take Picture Dialog Open Dialog Open Titleless Dialog Open Alert Dialog Open Alert Dialog with Critical Open Confirm Dialog
大家好，我是彭彭。
這是無標題的對話框 這是警告視窗 這是確認視窗
LONG LIVE W-COMPONENTS! LONG LIVE W-COMPONENTS! LONG LIVE W-COMPONENTS! LONG LIVE W-COMPONENTS! LONG LIVE W-COMPONENTS! LONG LIVE W-COMPONENTS! LONG LIVE W-COMPONENTS! LONG LIVE W-COMPONENTS! LONG LIVE W-COMPONENTS! LONG LIVE W-COMPONENTS! LONG LIVE W-COMPONENTS! LONG LIVE W-COMPONENTS! Calendar