Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 10fac98

Browse files
doboothdobooth
authored
Merge pull request magento#6176 from serhiyzhovnir/update-Checkbox-UI-component-documentation
Update documentation for the Checkbox UI component
2 parents fce7b2a + 83f879a commit 10fac98

File tree

1 file changed

+22
-58
lines changed

1 file changed

+22
-58
lines changed

‎src/guides/v2.2/ui_comp_guide/components/ui-checkbox.md

Lines changed: 22 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -7,68 +7,32 @@ The Checkbox component implements a form field that is an [HTML](https://glossar
77

88
## Configuration options
99

10-
<table>
11-
<tr>
12-
<th>Option </th>
13-
<th>Description</th>
14-
<th>Type</th>
15-
<th>Default</th>
16-
</tr>
17-
<tr>
18-
<td><code>checked</code></td>
19-
<td>Initial checkbox state (selected or cleared). If <code>false</code>, the checkbox is cleared. If <code>true</code>, the checkbox is selected.</td>
20-
<td>Boolean</td>
21-
<td><code>false</code></td>
22-
</tr>
23-
<tr>
24-
<td><code>multiple</code></td>
25-
<td>Renders multiple elements.</td>
26-
<td>Boolean</td>
27-
<td><code>false</code></td>
28-
</tr>
29-
<tr>
30-
<td><code>prefer</code></td>
31-
<td>The input type of the element to be rendered. Can be either radio button, checkbox, or toggle key. Changing this value also changes the <code>elementTmpl</code>, originally defined in the parent (<code>abstract</code>) component.</td>
32-
<td>String</td>
33-
<td><code>checkbox</code></td>
34-
</tr>
35-
<tr>
36-
<td><code>valueMap</code></td>
37-
<td>Convert the component's value to the expected type. For example, you can set to convert '0' to 'false', this would look like following:<code><br />{<br />'0': false<br />}</code></td>
38-
<td>Object</td>
39-
<td><code>{}</code></td>
40-
</tr>
41-
<tr>
42-
<td><code>templates</code>
43-
<ul>
44-
<li><code>radio</code></li>
45-
<li><code>checkbox</code></li>
46-
<li><code>toggle</code></li>
47-
</ul>
48-
</td>
49-
<td>Paths to templates for all possible types of input elements. The exact template to be used for rendering is defined by the <code>prefer</code> property.</td>
50-
<td>Object<ul><li>String</li><li>String</li><li>String</li></ul></td>
51-
<td><code>ui/form/components/single/radio<br />ui/form/components/single/checkbox<br />ui/form/components/single/switcher</code></td>
52-
</tr>
53-
<tr>
54-
<td><code>component</code></td>
55-
<td>The path to the component’s <code>.js</code> file in terms of RequireJS.</td>
56-
<td>String</td>
57-
<td><code>Magento_Ui/js/form/element/single-checkbox</code></td>
58-
</tr>
59-
<tr>
60-
<td><code>template</code></td>
61-
<td>The path to the component’s <code>.html</code> template.</td>
62-
<td>String</td>
63-
<td><code>ui/form/field</code></td>
64-
</tr>
65-
</table>
10+
| Option | Description | Type | Default |
11+
| --- | --- | --- | --- |
12+
| `checked` | Initial checkbox state (selected or cleared). If `false`, the checkbox is cleared. If `true`, the checkbox is selected. | Boolean | `false` |
13+
| `component` | The path to the component’s `.js` file in terms of RequireJS. | String | `Magento_Ui/js/form/element/single-checkbox` |
14+
| `label` | Label to be displayed in the field. | String | `''` |
15+
| `multiple` | Renders multiple elements. | Boolean | `false` |
16+
| `prefer` | The input type of the element to be rendered. Can be either radio button, checkbox, or toggle key. Changing this value also changes the `elementTmpl`, originally defined in the parent (`abstract`) component. | String (`radio` \| `checkbox` \| `toggle`) | `checkbox` |
17+
| `template` | The path to the component’s `.html` template. | String | `ui/form/field` |
18+
| `templates` | Paths to templates for all possible types of input elements. The exact template to be used for rendering is defined by the `prefer` property. | Object | `{radio: 'ui/form/components/single/radio', checkbox: 'ui/form/components/single/checkbox', toggle: 'ui/form/components/single/switcher'}` |
19+
| `valueMap` | Convert the component's value to the expected type. For example, you can set to convert '0' to 'false', this would look like following: <br />`{'0': false}` | Object | `{}` |
20+
21+
## Source files
22+
23+
Extends [`Abstract`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/form/element/abstract.js):
24+
25+
- [app/code/Magento/Ui/view/base/web/js/form/element/single-checkbox.js]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/form/element/single-checkbox.js)
26+
- [app/code/Magento/Ui/view/base/web/templates/form/components/single/checkbox.html]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/templates/form/components/single/checkbox.html)
27+
- [app/code/Magento/Ui/view/base/web/templates/form/components/single/radio.html]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/templates/form/components/single/radio.html)
28+
- [app/code/Magento/Ui/view/base/web/templates/form/components/single/switcher.html]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/templates/form/components/single/switcher.html)
29+
- [app/code/Magento/Ui/view/base/web/templates/form/field.html]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/templates/form/field.html)
6630

6731
## Examples
6832

69-
### Checkbox configuration
33+
### Integrate the Checkbox component with the Form component
7034

71-
The following example adds a new configured checkbox input.
35+
This example integrates the Checkbox component with the [Form]({{ page.baseurl }}/ui_comp_guide/components/ui-form.html) component:
7236

7337
```xml
7438
<form>

0 commit comments

Comments
 (0)