@@ -17,10 +17,10 @@ The directives in `@angular/cdk/listbox` set the appropriate roles on their host
1717
1818` @angular/cdk/listbox ` 中的指令在其宿主元素上设置适当的角色。
1919
20- | Directive | ARIA Role |
21- | --------- | ----------- |
22- | 指令 | ARIA 角色 |
23- | cdkOption | option |
20+ | Directive | ARIA Role |
21+ | ---------- | --------- |
22+ | 指令 | ARIA 角色 |
23+ | cdkOption | option |
2424| cdkListbox | listbox |
2525
2626### CSS Styles and Classes
@@ -34,43 +34,43 @@ The available CSS classes are listed below, by directive.
3434
3535` @angular/cdk/listbox ` 旨在根据你的需要进行高度定制。因此,它不会对元素的样式进行任何假设。你应该应用任何所需的 CSS 样式,但这些指令确实应用了 CSS 类,以便你更轻松地添加自定义样式。下面按指令列出了可用的 CSS 类。
3636
37- | Directive | CSS Class | Applied... |
38- | :-------- | ------------------- | ---------- |
39- | 指令 | CSS 类 | 何时应用 |
40- | cdkOption | .cdk-option | Always |
41- | cdkOption | .cdk-option | 总是 |
42- | cdkOption | .cdk-option-active | If the option is active |
43- | cdkOption | .cdk-option-active | 如果选项处于活动状态 |
44- | cdkListbox | .cdk-listbox | Always |
45- | cdkListbox | .cdk-listbox | 总是 |
37+ | Directive | CSS Class | Applied... |
38+ | :--------- | ------------------ | ------------- ---------- |
39+ | 指令 | CSS 类 | 何时应用 |
40+ | cdkOption | .cdk-option | Always |
41+ | cdkOption | .cdk-option | 总是 |
42+ | cdkOption | .cdk-option-active | If the option is active |
43+ | cdkOption | .cdk-option-active | 如果选项处于活动状态 |
44+ | cdkListbox | .cdk-listbox | Always |
45+ | cdkListbox | .cdk-listbox | 总是 |
4646
4747In addition to CSS classes, these directives add aria attributes that can be targeted in CSS.
4848
4949除了 CSS 类之外,这些指令还添加了可以在 CSS 中定位的 aria 属性。
5050
51- | Directive | Attribute Selector | Applied... |
52- | :-------- | ---------------------------------- | ---------- |
53- | 指令 | Attribute 选择器 | 何时应用 |
54- | cdkOption | \[ aria-disabled="true"] | If the option is disabled |
55- | cdkOption | \[ aria-disabled="true"] | 如果该选项已禁用 |
56- | cdkOption | \[ aria-disabled="false"] | If the option is not disabled |
57- | cdkOption | \[ aria-disabled="false"] | 如果该选项未禁用 |
58- | cdkOption | \[ aria-selected="true"] | If the option is selected |
59- | cdkOption | \[ aria-selected="true"] | 如果选定了该选项 |
60- | cdkOption | \[ aria-selected="false"] | If the option is not selected |
61- | cdkOption | \[ aria-selected="false"] | 如果未选定该选项 |
62- | cdkListbox | \[ aria-disabled="true"] | If the listbox is disabled |
63- | cdkListbox | \[ aria-disabled="true"] | 如果列表框已禁用 |
64- | cdkListbox | \[ aria-disabled="false"] | If the listbox is not disabled |
65- | cdkListbox | \[ aria-disabled="false"] | 如果列表框没有禁用 |
66- | cdkListbox | \[ aria-multiselectable="true"] | If the listbox is multiple selection |
67- | cdkListbox | \[ aria-multiselectable="true"] | 如果列表框是多选 |
68- | cdkListbox | \[ aria-multiselectable="false"] | If the listbox is single selection |
69- | cdkListbox | \[ aria-multiselectable="false"] | 如果列表框是单选 |
51+ | Directive | Attribute Selector | Applied... |
52+ | :--------- | -------------------------------- | ----------------------------- ---------- |
53+ | 指令 | Attribute 选择器 | 何时应用 |
54+ | cdkOption | \[ aria-disabled="true"] | If the option is disabled |
55+ | cdkOption | \[ aria-disabled="true"] | 如果该选项已禁用 |
56+ | cdkOption | \[ aria-disabled="false"] | If the option is not disabled |
57+ | cdkOption | \[ aria-disabled="false"] | 如果该选项未禁用 |
58+ | cdkOption | \[ aria-selected="true"] | If the option is selected |
59+ | cdkOption | \[ aria-selected="true"] | 如果选定了该选项 |
60+ | cdkOption | \[ aria-selected="false"] | If the option is not selected |
61+ | cdkOption | \[ aria-selected="false"] | 如果未选定该选项 |
62+ | cdkListbox | \[ aria-disabled="true"] | If the listbox is disabled |
63+ | cdkListbox | \[ aria-disabled="true"] | 如果列表框已禁用 |
64+ | cdkListbox | \[ aria-disabled="false"] | If the listbox is not disabled |
65+ | cdkListbox | \[ aria-disabled="false"] | 如果列表框没有禁用 |
66+ | cdkListbox | \[ aria-multiselectable="true"] | If the listbox is multiple selection |
67+ | cdkListbox | \[ aria-multiselectable="true"] | 如果列表框是多选 |
68+ | cdkListbox | \[ aria-multiselectable="false"] | If the listbox is single selection |
69+ | cdkListbox | \[ aria-multiselectable="false"] | 如果列表框是单选 |
7070| cdkListbox | \[ aria-orientation="horizontal"] | If the listbox is oriented horizontally |
71- | cdkListbox | \[ aria-orientation="horizontal"] | 如果列表框是水平的 |
72- | cdkListbox | \[ aria-orientation="vertical"] | If the listbox is oriented vertically |
73- | cdkListbox | \[ aria-orientation="vertical"] | 如果列表框是垂直的 |
71+ | cdkListbox | \[ aria-orientation="horizontal"] | 如果列表框是水平的 |
72+ | cdkListbox | \[ aria-orientation="vertical"] | If the listbox is oriented vertically |
73+ | cdkListbox | \[ aria-orientation="vertical"] | 如果列表框是垂直的 |
7474
7575### Getting started
7676
@@ -102,7 +102,7 @@ following directives:
102102
103103Each option in a listbox is bound to the value it represents when selected, e.g.
104104` <li cdkOption="red">Red</li> ` . Within a single listbox, each option must have a unique value. If
105- an option is not explicitly given a value, its value is considered to be ` '' ` \ ( empty string\ ) , e.g.
105+ an option is not explicitly given a value, its value is considered to be ` '' ` (empty string), e.g.
106106` <li cdkOption>No color preference</li> ` .
107107
108108列表框中的每个选项都会绑定到它在被选中时代表的值,例如 ` <li cdkOption="red">Red</li> ` 。在单个列表框中,每个选项都必须具有唯一值。如果一个选项没有被明确地赋予一个值,它的值被认为是 ` '' ` (空字符串),例如 ` <li cdkOption>No color preference</li> ` 。
@@ -132,7 +132,7 @@ Listboxes only support a single selected option at a time by default, but adding
132132
133133### 列表框的值
134134
135- The listbox's value is an array containing the values of the selected option\( s \ ) . This is true even
135+ The listbox's value is an array containing the values of the selected option(s ). This is true even
136136for the single selection listbox, whose value is an array containing a single element. The listbox's
137137value can be bound using ` [cdkListboxValue] ` and ` (cdkListboxValueChange) ` .
138138
@@ -226,7 +226,7 @@ listbox element.
226226The directives defined in ` @angular/cdk/listbox ` follow accessibility best practices as defined
227227in the [ ARIA spec] [ aria ] . Keyboard interaction is supported as defined in the
228228[ ARIA listbox keyboard interaction spec] [ keyboard ] _ without_ the optional selection follows focus
229- logic \ ( TODO: should we make this an option?\ ) .
229+ logic (TODO: should we make this an option?).
230230
231231` @angular/cdk/listbox ` 中定义的指令遵循[ ARIA 规范] [ aria ] 中定义的无障碍性最佳实践。支持键盘交互,如[ ARIA 列表框键盘交互规范] [ keyboard ] 中所定义,* 没有* 可选的选择结果会遵循焦点逻辑(TODO:我们应该将其作为一个选项吗?)。
232232
@@ -277,7 +277,7 @@ will still need to adjust your CSS styles to change the visual appearance.
277277#### 预先输入选项
278278
279279The CDK listbox supports typeahead based on the option text. If the typeahead text for your options
280- needs to be different than the display text \ ( e.g. to exclude emoji\ ) , this can be accomplished by
280+ needs to be different than the display text (e.g. to exclude emoji), this can be accomplished by
281281setting the ` cdkOptionTypeaheadLabel ` on the option.
282282
283283CDK 列表框支持基于选项文本的预先输入。如果选项的预先输入文本需要与显示文本不同(例如,排除表情符号),这可以通过在选项上设置 ` cdkOptionTypeaheadLabel ` 来实现。
0 commit comments