# Component style variants 現已可用 (11-19-2024)

[我們今年在 Webflow Conf 上宣布了Component style variants](https://www.youtube.com/watch?v=u7zm19YgQBA\&t=1353s)，並很高興地告訴大家，它現在可供所有客戶使用。 

元件是網站的可重複使用的構建塊，讓您可以自訂內容，同時保持網站的設計。過去，當元件針對不同上下文有不同設計時，需要您建立和管理相同元件的多個版本，或使用涉及可見性屬性或自訂類別屬性的複雜解決方法。

元件樣式變體極大地簡化了此過程，讓您可以為單個元件定義多個樣式選項 - 例如具有實心和輪廓樣式的按鈕，或具有水平和垂直佈局的卡片。除了更有效率地尋找和建置這些元件之外，變體還有助於確保設計一致性，因為它們繼承了對基礎的任何變更。

{% embed url="<https://player.vimeo.com/video/1030889813?h=67d7fc17c7>" %}

變體甚至可以組合並應用於嵌套組件 - 允許您在各種場景中混合和匹配它們。例如，您可以有一個部分，其中標題具有排版變體、具有佈局變體的卡片以及具有不同顏色變體的這些卡片內的按鈕。&#x20;

這意味著設計人員需要維護的組件更少，團隊其他成員需要篩選的組件更少，每個人都擁有更大的靈活性 - 但不要只是從我們這裡奪走它。以下是一些參與測試的合作夥伴的評價：

* *元件樣式變體對我們的團隊來說是一個遊戲規則改變者，使我們能夠設計和部署強大的設計系統，讓我們的客戶和合作夥伴可以輕鬆管理。 —Ilya Kroogman，*[*數位熊貓*](https://www.thedigitalpanda.com/)*創辦人*
* *透過元件樣式變體，我現在可以在使用元件建立頁面時為客戶提供更大的靈活性。以前，我必須為每個細微差別建立多個元件，或者在自訂元素上使用類別屬性，這對我的客戶來說太複雜了。現在，他們可以使用簡單的選擇元素輕鬆更改元件的樣式或佈局。 —Kyle Craven，*[*設計師兼 Webflow 開發人員*](https://kylecraven.design/)

請造訪[我們的幫助中心，以了解如何立即開始使用組件樣式變體進行設計](https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview#create-component-style-variants)。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/changelog/2024/component-style-variants-xian-yi-ke-yong-11192024.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.