Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit 0e75257

Browse files
serhiyzhovnirjeff-matthews
serhiyzhovnir
authored and
jeff-matthews
committed
Added information about missed options of the UI button and added the Source files section (#5050)
* Added information about missed UI button options and added the Source files section and adjusted the tables markdown * Added information about missed UI Columns options and added the Source files section (cherry picked from commit 2a44d45) * Added information about missed option of UI LinkColumn component and added the Source files section (cherry picked from commit d308c51)
1 parent 9e29ee2 commit 0e75257

File tree

3 files changed

+56
-288
lines changed

3 files changed

+56
-288
lines changed

‎guides/v2.2/ui_comp_guide/components/ui-button.md

Lines changed: 24 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -7,94 +7,30 @@ The Button component allows user to perform a list of predefined actions by clic
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>component</code></td>
19-
<td>The path to the component’s JS constructor in terms of RequireJS.</td>
20-
<td>String</td>
21-
<td><code>Magento_Ui/js/form/components/button</code></td>
22-
</tr>
23-
<tr>
24-
<td><code>additionalClasses</code></td>
25-
<td>Sets custom classes to the component's DOM block.</td>
26-
<td>Object</td>
27-
<td><code>{}</code></td>
28-
</tr>
29-
<tr>
30-
<td><code>disabled</code></td>
31-
<td>Initial component's state. When set to <code>true</code>, users can't take action on the element.</td>
32-
<td>Boolean</td>
33-
<td><code>false</code></td>
34-
</tr>
35-
<tr>
36-
<td><code>displayAsLink</code></td>
37-
<td>Show the button as a link.</td>
38-
<td>Boolean</td>
39-
<td><code>false</code></td>
40-
</tr>
41-
<tr>
42-
<td><code>elementTmpl</code></td>
43-
<td>The path to the child component’s <code>.html</code> template.</td>
44-
<td>String</td>
45-
<td><code>''</code></td>
46-
</tr>
47-
<tr>
48-
<td><code>template</code></td>
49-
<td>Path to the general <code>.html</code> template for a button.</td>
50-
<td>String</td>
51-
<td><code>''</code></td>
52-
</tr>
53-
<tr>
54-
<td><code>title</code></td>
55-
<td>Button title.</td>
56-
<td>String</td>
57-
<td><code>''</code></td>
58-
</tr>
59-
<tr>
60-
<td><code>visible</code></td>
61-
<td>Initial component's visibility. When set to <code>false</code>, the <code>"display: none</code> CSS style is added to the component's DOM block.</td>
62-
<td>Boolean</td>
63-
<td><code>true</code></td>
64-
</tr>
65-
<tr>
66-
<td><code>actions</code></td>
67-
<td>A list of actions that are performed when user clicks on the element.</td>
68-
<td><code>ButtonAction[]</code></td>
69-
<td>-</td>
70-
</tr>
71-
</table>
10+
| Option | Description | Type | Default |
11+
| --- | --- | --- | --- |
12+
| `component` | The path to the component’s JS constructor in terms of RequireJS. | String | `Magento_Ui/js/form/components/button` |
13+
| `additionalClasses` | Sets custom classes to the component's DOM block. | Object | `{}` |
14+
| `buttonClasses` | Sets custom classes to the [HTML](https://glossary.magento.com/html) `<button>` element. | Object | `{}` |
15+
| `disabled` | Initial component's state. When set to `true`, users can't take action on the element. | Boolean | `false` |
16+
| `displayAsLink` | Show the button as a link. | Boolean | `false` |
17+
| `elementTmpl` | The path to the child component’s `.html` template. | String | `ui/form/element/button` |
18+
| `template` | Path to the general `.html` template for a button. | String | `ui/form/components/button/simple` |
19+
| `title` | Button title. | String | `''` |
20+
| `displayArea` | Display area of the component. | String | `outsideGroup` |
21+
| `visible` | Initial component's visibility. When set to `false`, the `"display: none"` CSS style is added to the component's DOM block. | Boolean | `true` |
22+
| `actions` | A list of actions that are performed when user clicks on the element. | `ButtonAction[]` | - |
7223

7324
### ButtonAction interface
7425

75-
<table>
76-
<tr>
77-
<th>Option</th>
78-
<th>Description</th>
79-
<th>Type</th>
80-
<th>Required</th>
81-
</tr>
82-
<tr>
83-
<td><code>targetName</code></td>
84-
<td>Reference to component.</td>
85-
<td>String</td>
86-
<td>Required</td>
87-
</tr>
88-
<tr>
89-
<td><code>actionName</code></td>
90-
<td>Name of the component's method to be invoked.</td>
91-
<td>String</td>
92-
<td>Required</td>
93-
</tr>
94-
<tr>
95-
<td><code>params</code></td>
96-
<td>A list of arguments that will be passed to the method.</td>
97-
<td>Array</td>
98-
<td>Optional</td>
99-
</tr>
100-
</table>
26+
Option | Description | Type | Required |
27+
--- | --- | --- | --- |
28+
`targetName` | Reference to component. | String | Required |
29+
`actionName` | Name of the component's method to be invoked. | String | Required |
30+
`params` | A list of arguments that will be passed to the method. | Array | Optional |
31+
32+
## Source files
33+
34+
Extends [`UiElement`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uielement_concept.html):
35+
36+
- [`Magento/Ui/view/base/web/js/form/components/button.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/form/components/button.js)

‎guides/v2.2/ui_comp_guide/components/ui-columns.md

Lines changed: 23 additions & 186 deletions
Original file line numberDiff line numberDiff line change
@@ -7,192 +7,29 @@ The Columns component is a collection of columns. It renders the `<table>` eleme
77

88
## Configuration options
99

10-
<table>
11-
<tr>
12-
<th>
13-
Option
14-
</th>
15-
<th>
16-
Description
17-
</th>
18-
<th>
19-
Type
20-
</th>
21-
<th>
22-
Default
23-
</th>
24-
</tr>
25-
<tr>
26-
<td>
27-
<code>displayMode</code>
28-
</td>
29-
<td>
30-
Initial display mode.
31-
</td>
32-
<td>
33-
String
34-
</td>
35-
<td>
36-
<code>'grid'</code>
37-
</td>
38-
</tr>
39-
<tr>
40-
<td>
41-
<code>displayModes</code>
42-
</td>
43-
<td>
44-
List of available display modes.
45-
</td>
46-
<td>
47-
{<br />
48-
[name: string]: <a href="#displaymode">DisplayMode</a><br />
49-
}
50-
</td>
51-
<td>
52-
<code>{<br />
53-
value: 'grid',<br />
54-
label: 'Grid',<br />
55-
template: 'ui/grid/listing'<br />
56-
}</code>
57-
</td>
58-
</tr>
59-
<tr>
60-
<td>
61-
<code>dndConfig</code>
62-
</td>
63-
<td>
64-
Configuration of the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html">DragAndDrop
65-
component</a>.
66-
</td>
67-
<td>
68-
Object
69-
</td>
70-
<td>
71-
Specified in the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html">
72-
DragAndDrop component configuration</a>.
73-
</td>
74-
</tr>
75-
<tr>
76-
<td>
77-
<code>stickyTmpl</code>
78-
</td>
79-
<td>
80-
Path to the <code>.html</code> template used for the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-toolbar.html">
81-
Toolbar component</a> when it receives a fixed position.
82-
</td>
83-
<td>
84-
String
85-
</td>
86-
<td>
87-
<code>ui/grid/sticky/listing</code>
88-
</td>
89-
</tr>
90-
<tr>
91-
<td>
92-
<code>template</code>
93-
</td>
94-
<td>
95-
Path to the component’s <code>.html</code> template.
96-
</td>
97-
<td>
98-
String
99-
</td>
100-
<td>
101-
<code>ui/grid/listing</code>
102-
</td>
103-
</tr>
104-
<tr>
105-
<td>
106-
<code>editorConfig</code>
107-
</td>
108-
<td>
109-
Configuration of the InlineEditing
110-
component.
111-
</td>
112-
<td>
113-
Object
114-
</td>
115-
<td>
116-
Specified in the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-insertlisting.html">
117-
InlineEditing component configuration</a>.
118-
</td>
119-
</tr>
120-
<tr>
121-
<td>
122-
<code>viewSwitcherTmpl</code>
123-
</td>
124-
<td>
125-
Path to the .html template for rendering the list of
126-
available display modes. By default this list is not
127-
displayed.
128-
</td>
129-
<td>
130-
String
131-
</td>
132-
<td>
133-
<code>ui/grid/view-switcher</code>
134-
</td>
135-
</tr>
136-
</table>
10+
| Option | Description | Type | Default |
11+
| --- | --- | --- | --- |
12+
| `component` | The path to the component’s `.js` file. | String | `Magento_Ui/js/grid/listing` |
13+
| `displayMode` | Initial display mode. | String | `'grid'` |
14+
| `displayModes` | List of available display modes. | {<br />[name: string]: [DisplayMode](#displaymode)<br />} | `{grid: {value: 'grid',label: 'Grid',template: '${ $.template }'},list: {value: 'list',label: 'List',template: '${ $.listTemplate }'}}` |
15+
| `dndConfig` | Configuration of the [DragAndDrop component]({{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html). | Object | Specified in the [DragAndDrop component configuration]({{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html). |
16+
| `stickyTmpl` | Path to the `.html` template used for the [Toolbar component]({{ page.baseurl }}/ui_comp_guide/components/ui-toolbar.html) when it receives a fixed position. | String | `ui/grid/sticky/listing` |
17+
| `template` | Path to the component’s `.html` template. | String | `ui/grid/listing` |
18+
| `editorConfig` | Configuration of the InlineEditing component. | Object | Specified in the [InlineEditing component configuration]({{ page.baseurl }}/ui_comp_guide/components/ui-insertlisting.html). |
19+
| `viewSwitcherTmpl` | Path to the .html template for rendering the list of available display modes. By default this list is not displayed. | String | `ui/grid/view-switcher` |
20+
| `componentType` | The type of component. | String | `columns` |
21+
| `resizeConfig` | Configurations of [`Resize`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/resize.js) component. | Object | `{name: '${ $.name }_resize',columnsProvider: '${ $.name }',component: 'Magento_Ui/js/grid/resize',enabled: false}` |
13722

13823
### DisplayMode interface {#displaymode}
13924

140-
<table>
141-
<tr>
142-
<th>
143-
Option
144-
</th>
145-
<th>
146-
Description
147-
</th>
148-
<th>
149-
Type
150-
</th>
151-
<th>
152-
Required
153-
</th>
154-
</tr>
155-
<tr>
156-
<td>
157-
<code>label</code>
158-
</td>
159-
<td>
160-
Label for the list of available modes.
161-
</td>
162-
<td>
163-
String
164-
</td>
165-
<td>
166-
Optional
167-
</td>
168-
</tr>
169-
<tr>
170-
<td>
171-
<code>template</code>
172-
</td>
173-
<td>
174-
Path to the <code>.html</code> template used to render
175-
listing in the selected mode.
176-
</td>
177-
<td>
178-
String
179-
</td>
180-
<td>
181-
Optional
182-
</td>
183-
</tr>
184-
<tr>
185-
<td>
186-
<code>value</code>
187-
</td>
188-
<td>
189-
Mode's identifier.
190-
</td>
191-
<td>
192-
String
193-
</td>
194-
<td>
195-
Optional
196-
</td>
197-
</tr>
198-
</table>
25+
| Option | Description | Type | Required |
26+
| --- | --- | --- | --- |
27+
| `label` | Label for the list of available modes. | String | Optional |
28+
| `template` | Path to the `.html` template used to render listing in the selected mode. | String | Optional |
29+
| `value` | Mode's identifier. | String | Optional |
30+
31+
## Source files
32+
33+
Extends [`uiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicollection_concept.html):
34+
35+
- [`Magento/Ui/view/base/web/js/grid/listing.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/listing.js)

‎guides/v2.2/ui_comp_guide/components/ui-linkcolumn.md

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,12 @@ Constructor: [app/code/Magento/Ui/view/base/web/js/grid/columns/link.js]({{ site
1111

1212
## LinkColumn configuration
1313

14-
<table>
15-
<tr>
16-
<th>Option</th>
17-
<th>Description</th>
18-
<th>Type</th>
19-
<th>Default</th>
20-
</tr>
21-
<tr>
22-
<td><code>link</code></td>
23-
<td>The key in a field's record object that contains the link value.</td>
24-
<td>String</td>
25-
<td><code>link</code></td>
26-
</tr>
27-
</table>
14+
| Option | Description | Type | Default |
15+
| --- | --- | --- | --- |
16+
| `link` | The key in a field's record object that contains the link value. | String | `link` |
17+
| `bodyTmpl` | Path to the template that is used to render a column's field in the table's body. | String | `ui/grid/cells/link` |
18+
19+
## Source files
20+
21+
Extends [Column component]({{ page.baseurl }}/ui_comp_guide/components/ui-column.html)
22+
- [`app/code/Magento/Ui/view/base/web/js/grid/columns/link.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/columns/link.js)

0 commit comments

Comments
 (0)