Columns:
Container element to render multiple columns layout.
- Columns:
- Fields: # First Column
- <field items>
- ....
- Fields: # Second Column
- <field items>
- ....
- ....
- Fields: # First Column
- <field items>
- ....
- Fields: # Second Column
- <field items>
- ....
- ....
The Columns: translates to the following JSX code:
<row>
<col>
<Field id='item1'/>
<Field id='item2'/>
...
</col>
<col>
<Field id='item3'/>
<Field id='item3'/>
...
</col>
</row>
<col>
<Field id='item1'/>
<Field id='item2'/>
...
</col>
<col>
<Field id='item3'/>
<Field id='item3'/>
...
</col>
</row>
Example
#- Columns:
- Fields:
- Note:
tp: 'textarea'
- Fields:
- Customer: 1234567
readOnly: true
- Date: 26 July 2024
tp: datepicker
- Fields:
- Note:
tp: 'textarea'
- Fields:
- Customer: 1234567
readOnly: true
- Date: 26 July 2024
tp: datepicker
Note is a multi-line text box placed in column 1, while column 2 contains fields Customer and Date.
Visit example.u.team/yamlfield to try out the live examples.