openSUSE:WebYaST 样式指南/对话框元素

WebYaST

对话框元素

表单中对话框元素的呈现方式

表单中的对话框元素通过 CSS 对齐。
属于同一组的对话框元素被 <fieldset> 包围。您需要为 fieldset 提供一个唯一的 ID。可以可选地提供类。
如果您想在表单中使用标题，请使用 <fieldset>。
表单元素通过将每个表单元素放入单个段落来分隔。
稍后在左侧显示的表单元素的描述被 <label> 包围。
为了允许用户通过单击表单元素描述来激活输入字段，"label for" 和文本字段标签/表单 ID 必须相同。

代码示例：设置 DNS 的表单对齐方式

<fieldset id="dns" class=""> <legend><%=_("DNS")%></legend> <p> <label for="<%= :name %>"><%=_("Hostname")%></label> <%=text_field_tag :name, @name, :disabled => write_disabled %> </p> </fieldset>

启用/禁用配置值

WebYaST 中的 (布尔) 配置值显示为
值的当前状态（文本形式）+ 按钮，其标签为当前状态的相反状态。

或者，您也可以使用复选框。

示例

 This repository is enabled. [Disable]

按钮

按钮表示修改操作。

修改操作例如保存、重启、重新启动。
(与非修改操作（如取消、返回、添加、编辑、删除、详细信息）相反。非修改操作是超链接)

（“编辑”是非修改操作，因为它打开一个编辑对话框。单击“保存”会在那里执行修改操作
“删除”是非修改操作，因为它必须在确认弹出窗口后才能执行）

示例：“保存”是一个按钮，因为它会更改设置，但“取消”不是因为设置不会应用。

对话框元素简述

对话框元素	描述/用途
复选框	复选框是一个可点击的真/假操作切换按钮，用于两种状态都具有明显含义（例如，设置和取消设置、启用/禁用）指南复选框可以启动操作，例如启用/禁用或隐藏/显示设置或服务。如果您希望用户选择多个选项，请使用复选框。为了向用户显示这些复选框属于同一组，请围绕选项绘制一个框架。如果选项超过 4 个，请使用组合框。如果复选框启用其他控件，请将其放置在受其影响的控件上方或左侧，以帮助用户指示受影响的控件。复选框标签使用句子风格的大小写如果难以找到有意义的标签来解释复选框的效果，请考虑使用单选按钮。通过使用单选按钮，您可以为两种状态提供不同的标签。复选框组用描述性标题标记在复选框组的上方或左侧。尽量避免围绕复选框使用框架，而是使用空白进行分组。垂直对齐多个复选框以方便视觉扫描。
组合框	组合框用于从多个选项中选择一个选项。可能可编辑以定义自己的值。指南如果设置包含超过 4 个单选按钮或复选框，请使用组合框从组合框中选择的条目可以启动操作，例如启用/禁用或隐藏/显示设置或服务。组合框标签和条目使用句子风格的大小写。将组合框标签放置在组合框上方或左侧
输入字段	单行或多行文本输入。指南预填充有关输入字段详细描述和/或预期值的文本。对预填充文本使用句子风格。使用句子大小写标记当用户激活输入字段时，文本光标放置在现有文本的末尾，并且其内容被突出显示。这使得覆盖或追加新文本更容易。根据输入估计大小调整输入字段的大小。当用户退出输入字段时，将验证输入。为了让用户了解适当的输入格式，请使用静态文本提示。另一种方法是分隔输入字段。
按钮	按钮用于启动操作（例如，保存内容、打开弹出窗口）。指南按钮使用句子大小写标记。不要在同一个窗口中使用超过一种或两种不同宽度的按钮，并使所有按钮的高度相同。
单选按钮	单选按钮用于从两个或多个互斥选项中选择一个选项。指南如果只有两种明显的状态，请使用复选框。如果选项超过 4 个，请使用组合框。单选按钮用于分组。单个设置要么由复选框显示，要么由两个单选按钮显示（每个状态一个）。在单选按钮组中只能设置一个单选按钮。单选按钮可以启动操作，例如启用/禁用或隐藏/显示设置或服务。如果单选按钮启用其他控件，请将其放置在受其影响的控件上方或左侧，以帮助用户指示受影响的控件。单选按钮标签使用句子风格的大小写单选按钮组用描述性标题标记在单选按钮组的上方或左侧。尽量避免围绕单选按钮使用框架，而是使用空白进行分组。垂直对齐多个单选按钮以方便视觉扫描。
滑块	为了从固定的、有序的范围内选择一个值，请使用滑块。当用户相对调整值比绝对调整值更重要时，请使用滑块（例如，调大或调小声音）。指南使用句子大小写标记滑块用文本或刻度标记重要值
微调框	微调框是一个文本框，允许用户使用两个箭头从一系列数字值中增加或减少它们。指南使用句子风格对标签进行大小写由于微调框仅用于数字输入，因此当用户需要选择固定条目时，请使用组合框。对于音量控制，请使用滑块控件。
表格/列表	列表一次显示多个条目和多个信息，以提供概览。指南列表标签和列表条目使用句子风格，并放置在列表上方或左侧。使用合理大小的表格如果您希望使列表可排序或表格包含多列，请使用标记的列标题。列标题以标题样式显示。如果您使用排序，请使排序选项和排序方法对用户明显可见
选项卡	如果设置需要多个页面，则使用选项卡来组织模块内容。选项卡是一种用于水平切换各种设置的导航小部件。使用选项卡来象征独立或分层相等的章节。指南选项卡使用标题大小写标记在切换不同的分支时，已更改的值将被保留。如果您认为此行为会导致潜在的破坏性后果，您可以使用一个弹出窗口，该弹出窗口需要用户确认。不要使用超过五个选项卡或多行选项卡，因为这会使用户难以找到他们正在寻找的部分，并使您的对话框看起来复杂且难看。如果您需要超过五个选项卡，请使用树形图。
树形图	使用树形图来显示层次结构或如果带有选项卡的对话框看起来过于拥挤和复杂。在切换不同的分支时，已更改的值将被保留。如果您认为此行为会导致潜在的破坏性后果，您可以使用一个弹出窗口，该弹出窗口需要用户确认。指南树形图使用句子风格，并放置在列表上方或左侧。使用合理大小的树形图。如果您希望使树形图可排序或表格包含多列，请使用标记的列标题。列标题以标题样式显示

粗体文本