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

Skip to content

Commit 548c67d

Browse files
doboothdobooth
authored
Merge pull request magento#6172 from serhiyzhovnir/update-File-UI-component-documentation
Update documentation for the File UI component
2 parents 0d3c142 + b1f6d74 commit 548c67d

File tree

2 files changed

+46
-101
lines changed

2 files changed

+46
-101
lines changed

‎src/common/images/ui_comps/ui-file-result.png

3.07 KB
Loading

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

Lines changed: 46 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -7,104 +7,49 @@ The File component implements the [HTML](https://glossary.magento.com/html) `<in
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>component</code>
28-
</td>
29-
<td>
30-
The path to the component’s JS constructor in terms of
31-
RequireJS.
32-
</td>
33-
<td>
34-
String
35-
</td>
36-
<td>
37-
<code>Magento_Ui/js/form/element/text</code>
38-
</td>
39-
</tr>
40-
<tr>
41-
<td>
42-
<code>label</code>
43-
</td>
44-
<td>
45-
Field label
46-
</td>
47-
<td>
48-
String
49-
</td>
50-
<td>
51-
<code>''</code>
52-
</td>
53-
</tr>
54-
<tr>
55-
<td>
56-
<code>links</code>
57-
<ul>
58-
<li><code>value</code>
59-
</li>
60-
</ul>
61-
</td>
62-
<td>
63-
<a href="{{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_linking_concept.html">
64-
Links</a> the component's <code>value</code> property with
65-
provider using the declared in the <code>dataScope</code>
66-
property of the parent component.
67-
</td>
68-
<td>
69-
Object
70-
<ul>
71-
<li>Boolean
72-
</li>
73-
</ul>
74-
</td>
75-
<td>
76-
<code>false</code>
77-
</td>
78-
</tr>
79-
<tr>
80-
<td>
81-
<code>disabled</code>
82-
</td>
83-
<td>
84-
Initial component's state. When set to <code>true</code>, users can't
85-
take action on the element.
86-
</td>
87-
<td>
88-
Boolean
89-
</td>
90-
<td>
91-
<code>false</code>
92-
</td>
93-
</tr>
94-
<tr>
95-
<td>
96-
<code>visible</code>
97-
</td>
98-
<td>
99-
Initial component's visibility. When set to <code>false</code>, the
100-
<code>display: none</code> CSS style is added to the
101-
component's DOM block.
102-
</td>
103-
<td>
104-
Boolean
105-
</td>
106-
<td>
107-
<code>true</code>
108-
</td>
109-
</tr>
110-
</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/element/media` |
13+
| `label` | Label to be displayed in the field. | String | `''` |
14+
| `links`.`value` | [Links]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_linking_concept.html) the component's `value` property with provider using the declared in the `dataScope` property of the parent component. | Boolean | `''` |
15+
| `disabled` | Initial component's state. When set to `true`, users cannot take action on the element. | Boolean | `false` |
16+
| `visible` | Initial component's visibility. When set to `false`, the `display: none` CSS style is added to the component's DOM block. | Boolean | `true` |
17+
18+
## Source files
19+
20+
Extends [`Abstract`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/form/element/abstract.js):
21+
22+
- [`app/code/Magento/Ui/view/base/web/js/form/element/media.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/form/element/media.js)
23+
- [`app/code/Magento/Ui/view/base/web/templates/form/element/media.html`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/templates/form/element/media.html)
24+
- [`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)
25+
26+
## Examples
27+
28+
### Integrate File component with Form component
29+
30+
This is an example of how the File component integrates with the [Form]({{ page.baseurl }}/ui_comp_guide/components/ui-form.html) component:
31+
32+
```xml
33+
<form>
34+
...
35+
<fieldset>
36+
...
37+
<file name="file_example">
38+
<argument name="data" xsi:type="array">
39+
<item name="config" xsi:type="array">
40+
<item name="label" xsi:type="string">File Field</item>
41+
<item name="visible" xsi:type="boolean">true</item>
42+
<item name="formElement" xsi:type="string">fileUploader</item>
43+
<item name="uploaderConfig" xsi:type="array">
44+
<item name="url" xsi:type="url" path="path/to/controller"/>
45+
</item>
46+
</item>
47+
</argument>
48+
</file>
49+
</fieldset>
50+
</form>
51+
```
52+
53+
#### Result
54+
55+
![File Component example]({{ site.baseurl }}/common/images/ui_comps/ui-file-result.png)

0 commit comments

Comments
 (0)