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

Form component container #6871

Merged
merged 15 commits into from
Mar 19, 2020
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Resolving Fenced code blocks issue
  • Loading branch information
Jehangir-Wahid committed Mar 16, 2020
commit 1ae556de8319e65f16d92991a204d31ccbcd27c9
18 changes: 17 additions & 1 deletion src/guides/v2.3/ui_comp_guide/components/ui-container.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@
group: ui-components-guide
title: Container component
---
The Container [UI component](https://glossary.magento.com/ui-component) can be used for wrapping particular fields or other ui-components in it with some description text. It can also be used without any field but just to display a notice or description of a fieldset.

The Container [UI component](https://glossary.magento.com/ui-component) can be used for wrapping particular fields or other ui-components in it with some description text. It can also be used without any field but just to display a notice or description of a fieldset.

## Configuration options

Component's options are set in the UI-component's configuration `.xml` file as follows:

```xml
Jehangir-Wahid marked this conversation as resolved.
Show resolved Hide resolved
<container name="%name%">
<argument name="data" xsi:type="array">
Expand All @@ -19,16 +23,21 @@ Component's options are set in the UI-component's configuration `.xml` file as f
</argument>
</container>
```

| Option | Description | Type | Default |
| --- | --- | --- | --- |
| `template` | Path to the component's `.html` template. | String | `ui/form/components/complex` |
| `sortOrder` | Description for the Container. | Number | `0` |
Jehangir-Wahid marked this conversation as resolved.
Show resolved Hide resolved
| `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 | `''` |

## Examples

### Container with a component

The following sample is an example of the Container component contain a `Select` component.

```xml
<container name="container_name">
<argument name="data" xsi:type="array">
Expand Down Expand Up @@ -64,9 +73,13 @@ The following sample is an example of the Container component contain a `Select`
</container>
```
#### 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
<container name="container_name">
<argument name="data" xsi:type="array">
Expand All @@ -84,6 +97,9 @@ The following sample is an example of the Container component only.
</argument>
</container>
```

#### 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)