Storybook CSS Chaos 擴充功能

一個在元件周圍應用可繼承 CSS 屬性的擴充功能，以便更好地測試在上下文中會改變元件外觀的場景。透過這種方式進行測試，您可以限制元件新增到應用程式時的樣式溢出。

之前

之後

使用腳本

執行 npm install css-chaos-addon

在您的 main.js 檔案中，新增到 addons 陣列

addons: ["css-chaos-addon"]

支援的 CSS 屬性

此擴充功能設定的繼承屬性包括

• border-collapse
• border-spacing
• caption-side
• color
• cursor
• direction
• empty-cells
• font-family
• font-size
• font-style
• font-variant
• font-weight
• letter-spacing
• line-height
• list-style-position
• list-style-type
• text-align
• text-indent
• text-transform
• white-space
• word-spacing

有關這些屬性的更多資訊，請參閱此處的屬性檔案這裡。

某些屬性具有可能由使用應用程式設定的任意值（例如顏色）。如果您想用自己的一組值覆蓋這些值，請參閱有關自訂 CSS 屬性的部分。

自訂 CSS 屬性

若要自訂，您需要利用 Storybook 的參數功能，該功能可以全域或在故事級別設定。用於 CSS Chaos 擴充功能的參數稱為 cssPropertyData。

CSS 屬性鍵包括

• name：將在擴充功能下拉式選單上方設定的 CSS 屬性名稱，並將用於在全域 CSS 中設定 CSS 屬性值。
• description：將在擴充功能面板中顯示在名稱下方和下拉式選項上方的 CSS 屬性描述。
• default：下拉式選單的預設值。當擴充功能面板處於活動狀態時，此值將自動應用於全域 CSS。
• values：使用者必須選擇以操作視圖的選項清單。隨機化功能也將使用此清單來選取隨機值。

如果您想新增 CSS 屬性

parameters: {
    cssChaos: {
      propertyData:
        [
            {
                "name": "hello world",
                "description": "Lorem ipsum",
                "default": "world",
                "values": [
                    "hello",
                    "world"
                ]
            }
        ]
    }
};

如果您想變更 CSS 屬性，請更新物件中的一個或所有鍵（name、description、default、values）

parameters: {
    cssChaos: {
      propertyData:
        [
            {
                "name": "updated-name",
                "description": "An updated description goes here",
                "default": "new default",
                "values": [
                    "this",
                    "includes",
                    "updated",
                    "values",
                    "new default"
                ]
            }
        ]
    }
};

若要從擴充功能面板中移除現有的 CSS 屬性下拉式選單，請從物件中移除所有值

parameters: {
    cssChaos: {
      propertyData:
        [
            {
                "name": "color",
                "values": []
            }
        ]
    }
};

設定最大變異

如果您想限制點擊「隨機化！」按鈕時的變異量，您可以設定一個名為 maxVariance 的值。如果您設定最大變異，它只會隨機化您設定的屬性數量。如果您未設定最大變異，它將預設為隨機化所有屬性。

parameters: {
    cssChaos: {
        maxVariance: 5
    }
};

• 設定最大變異並不表示會有該數量的非預設值。每個屬性都設定為隨機值，該值可能等於預設值。

關閉歷史記錄

如果您想隱藏歷史記錄下拉式選單，請將 cssChaos 物件下的 history 屬性設定為 false。預設情況下，此屬性將設定為 true。

parameters: {
    cssChaos: {
        history: false
    }
};

開發腳本

• npm start 在監看模式下執行 babel 並啟動 Storybook
• npm run build 建置並封裝您的擴充功能程式碼