No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Button

按鈕元件,封裝自 Ant DesignButton 元件。

在 Ant Design Button 的 props 基礎上,增加了下列改動:

  1. 將原先 type 的樣式改成透過新增的 brandtype 兩個維度來設定,保持樣式的彈性
  2. 新增 iconPos 讓圖示可以顯示在右方
  3. 移除 ghost,改成透過新的 type 來實現相同樣式
  4. 移除 shape,如果日後 styleguide 有需要再實作
  5. size 移除 "small" 的選項,如果日後 styleguide 有需要再實作

設計稿 https://zpl.io/2yWdMPK

Usage

import { Button } from '@hahow/hahow-design';

const App = () => (
  <Button>繼續上課</Button>
);
NameDescriptionDefault
block
將按鈕寬度調整為其 parent 寬度的選項
bool
"false"
brand
品牌色
'primary' | 'secondary'
"'primary'"
children
按鈕內容
node
"null"
className
另外套用樣式 class
string
"null"
disabled
按鈕失效狀態
bool
"false"
href
點擊跳轉的位址,指定此屬性 `button` 的行為和 `a` 連結一致
string
"undefined"
htmlType
設置 `button` 原生的 `type` 值,可選值請參考 [HTML 標準](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
string
"'button'"
icon
設置按鈕的圖示類型
string
"null"
iconPos
圖示的顯示位置,屬性 `icon` 存在時生效
'left' | 'right'
"'left'"
loading
設置按鈕讀取狀態
Union<bool | { delay: number }>
"false"
onClick
點擊按鈕時的 callback
func
"null"
size
設置按鈕大小,可選值為 `large` 或者不設
'default' | 'large'
"'default'"
target
相當於 `a` 連結的 `target` 屬性,`href` 存在時生效
string
"null"
type
按鈕的種類
null | 'link' | 'plain' | 'transparent' | 'whiteThin'
"null"

Stories

Secondary

Plain

Transparent

White Thin

Data Attributes

All Buttons

props.typeprops.brand 兩個維度展示所有按鈕,可以透過 Knobs 一次調整所有樣式,方便檢查問題

type
brand="primary"
brand="secondary"
default
link
plain
transparent
whiteThin

Playground

切換至 Canvas tab 即可透過 Knobs 調整 props,以及 Actions 查看 callback function 的 payload