Section:
A container element for grouping other layout containers or components. Each section has a header bar with title, icon button and collapsible content area for detailed UI elements.

In YAML, section elements (props, Columns, Fields) are initialized under the Section container.
  - Section:
    - props:
          title: XXX
          isCollapse: <true|false>
          isEdit: <true|false>
          isSave: <true|false>
          backgroundColor: <color name|code>
    - Fields:
      - ...
    - Columns:
      - Fields:
        - ...
      - Fields:
        - ...

props:
Refer to <Section> for details.

If there are section properties specified, it must be defined as props: <object> in the first item under Section container.

Example

#

Plain Section

#
  - Section:
      - props:
          title: Report
          isCollapse: false
          isEdit: true
          isSave: false
          backgroundColor: white   
      - Fields:
        - Note:
      - p: Note - Section without Icon, Save & Collapse
A plain section with title Report contains one field Note.

Section with Columns

#
  - Section:
    - props:
        title: Customer Details
        icon: FcCustomerSupport
    - Columns:
      - Fields:
        - Last Name: Thomson
        - First Name: John  
      - Fields:
        - Birthday:
        - Customer No:


Visit example.u.team/yamlsection to try out the live examples.