diff --git a/src/_data/toc/ui-components-guide.yml b/src/_data/toc/ui-components-guide.yml index a7820994f0a..95ca77e049b 100644 --- a/src/_data/toc/ui-components-guide.yml +++ b/src/_data/toc/ui-components-guide.yml @@ -58,6 +58,9 @@ pages: - label: ColumnsControls component url: /ui_comp_guide/components/ui-columnscontrols.html + - label: Container component + url: /ui_comp_guide/components/ui-container.html + - label: Date component url: /ui_comp_guide/components/ui-date.html diff --git a/src/common/images/ui_comps/container-result.png b/src/common/images/ui_comps/container-result.png new file mode 100644 index 00000000000..b0fd4e1734c Binary files /dev/null and b/src/common/images/ui_comps/container-result.png differ diff --git a/src/common/images/ui_comps/container-with-field-result.png b/src/common/images/ui_comps/container-with-field-result.png new file mode 100644 index 00000000000..71f267c3316 Binary files /dev/null and b/src/common/images/ui_comps/container-with-field-result.png differ diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-container.md b/src/guides/v2.3/ui_comp_guide/components/ui-container.md new file mode 100644 index 00000000000..c3e7d052f95 --- /dev/null +++ b/src/guides/v2.3/ui_comp_guide/components/ui-container.md @@ -0,0 +1,97 @@ +--- +group: ui-components-guide +title: Container component +contributor_name: Jehangir Wahid +contributor_link: https://github.com/Jehangir-Wahid +--- + +The Container [UI component](https://glossary.magento.com/ui-component) is used for wrapping fields or other ui-components with descriptive text. It may be used without any field to display a notice or description of a fieldset. + +## Configuration options + +Component options are set in the UI-component's configuration `.xml` file as follows: + +| Option | Description | Type | Default | +| --- | --- | --- | --- | +| `component` | Path to the component's `.js` file. | String | `''` | +| `template` | Path to the component's `.html` template. | String | `ui/form/components/complex` | +| `sortOrder` | Sort order of the Container. | Number | `0` | +| `label` | Label displayed for the Container. | String | `''` | +| `additionalClasses` | CSS class(es) applied to the root node of the component's `.html` template. | String | `''` | +| `text` | Description for the Container. | String | `''` | + +## Source files + +- [`Magento/Ui/view/base/web/templates/form/components/complex.html`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/templates/form/components/complex.html) + +## Examples + +### Container with a component + +The following sample is an example of the Container component contain a `Select` component. + +```xml + + + + ui/form/components/complex + 10 + Container Label + sample-additional-class + + Container Text. +

+ ]]>
+
+
+ + + text + + data.sort_direction + + + + + +
+``` +#### Result + +![Container with a field]({{ site.baseurl }}/common/images/ui_comps/container-with-field-result.png) + +### Container without any fields + +The following sample is an example of the Container component only. + +```xml + + + + ui/form/components/complex + 10 + Container Label + sample-additional-class + + Change these settings if you do not want to apply the global display configurations. +

+ ]]>
+
+
+
+``` + +#### Result + +The `text` of this container is styled using the `additionalClasses` value, i.e. `sample-additional-class`. + +![Container with out any fields]({{ site.baseurl }}/common/images/ui_comps/container-result.png)