用戶:Shizhao/codex
{截至2026年9月，可直接在wiki頁面上使用的Codex組件。參考Codex說明文檔{
Message
[編輯]- aria-live屬性不支持
- span圖標行需要與div的cdx-message__content行在同一行
說明
[編輯]消息（Message）組件用於向用戶提供系統反饋。消息既可以作為包含詳細說明的醒目橫幅展示，也可以作為行內驗證反饋呈現。
使用消息組件來顯示系統反饋、響應用戶操作或提供信息。使用行內消息來針對表單輸入的驗證情況提供反饋。
根據向用戶傳達的反饋類型，「消息」可用於表示以下四種狀態之一：
- 通知 (Notice)：用於提供一般性、非緊急的信息或建議。可將其視為「警告」、「錯誤」或「成功」狀態的中性版本。
- 警告 (Warning)：用於提供有關需要謹慎對待的情況的重要信息。
- 錯誤 (Error)：僅在需要用戶立即關注的情況下用於提醒用戶。在所有系統消息中，錯誤消息具有最高的視覺優先級。
- 成功 (Success)：用於傳達用戶交互成功的反饋，例如發布頁面。
消息組件包含以下元素：
- 圖標：圖標有助於用戶快速識別，並能縮短消息文本的長度。每種消息類型（例如「成功」）都配有特定的圖標，以確保易於識別。 對於「通知」類消息，可以根據需要將其隱藏。對於「警告」、「錯誤」和「成功」類消息，應避免移除或替換圖標，因為圖標強化了這些狀態各自的含義。
- 消息文本：消息文本應儘可能清晰簡潔，向用戶提供反饋。在適用的情況下，也可以提示後續操作。 保持消息簡短明了，僅提供一兩個解決方案，以降低認知負荷。力求簡潔且易於理解。根據需要在消息文本中加入各種文本格式和連結。避免將所有消息文本都設為粗體。
Markup structure
[編輯]Message layout
[編輯]消息有兩種布局樣式：塊級和行內。請使用以下類名來應用這些布局：
- 塊級：
cdx-message--block（這是默認樣式，因此可省略該類名） - 行內：
cdx-message--inline
Message types
[編輯]共有四種消息類型，其顏色和圖標會根據消息的用途而變化。請使用以下類名來應用相應的消息類型樣式：
- 提示 (Notice)：
cdx-message--notice（這是默認樣式，因此可省略該類名） - 警告 (Warning)：
cdx-message--warning - 錯誤 (Error)：
cdx-message--error - 成功 (Success)：
cdx-message--success
Multiline message
[編輯]消息內容可以包含加粗文本和連結等標記。
ProgressBar
[編輯]不要使用自封閉標籤<div class="cdx-progress-bar__bar" />。
說明
[編輯]ProgressBar是一種用於指示操作或流程進度的可視化元素。
當您需要針對正在進行的操作（如文件上傳或表單提交）提供實時進度反饋，或者希望展示向既定目標推進的進度時，請使用ProgressBar。根據具體用途，ProgressBar分為不同類型：
- 不確定進度條（默認類型）：當無法量化進度（例如加載或處理時長未知）但需要表明操作正在進行時，請使用此類型。該類型表明正在進行的系統進程將影響整個視圖或區域。 支持行內（Inline）模式，以便在其他組件（如菜單或對話框）內部顯示進度。
- 確定進度條：當進度可量化並能基於已知總量進行展示時（例如完成百分比或目標達成進度），請使用此類型。
如果任務進度對用戶理解無關緊要，或者任務預計能快速完成，則應避免使用ProgressBar。
ProgressBar包含以下元素：
- 進度元素：進度的可視化呈現，顯示為填充條。
- 進度條容器：容納進度條並展示進度範圍的容器。
Markup structure
[編輯]Inline
[編輯]對於行內進度條，請將cdx-progress-bar--online類添加到根<div>元素上。
Disabled
[編輯]對於禁用的ProgressBar，請將cdx-progress-bar--disabled類添加到根<div>元素上。
Determinate
[編輯]對於確定型進度條，請將cdx-progress-bar--determinate類添加到根<div>元素，並在style標籤中設置CSS變量--cdx-progress-value和--cdx-progress-max。