在storybook的doc中新增props的arg下拉選單

 

這邊用的是storybook 6.1.14react,我記得太舊storybook的版本還沒有這個功能,建議都先升級到6以上的版本,但是輸出stories的寫法會不同,升級前須再確認一下喔。

原本我們寫component的時候會先制定他可以傳入哪些props,通常會這樣宣告:

export interface ButtonProps {
  block?: boolean;
  type?: "primary | green | disabled | light";
}

 

這樣的話,storybook 會幫你把型態設定為字串,所以會出現 input,但是我只能輸入"primary | green | disabled | light"這幾種,我不想再 doc 那邊隨便讓人輸入,這時候就可以加入 control 屬性。

export default {
  title: "Component/Button",
  component: Button,
  argTypes: {
    block: {
      control: {
        type: "boolean",
      },
    },
    color: {
      control: {
        type: "select",
        options: ["primary", "green", "disabled", "light"],
      },
    },
  },
} as Meta;

 

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。