User: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。