EnsembleUI / ensemble

Build native apps 20x faster than Flutter, RN or any other tech
https://ensembleui.com/
BSD 3-Clause "New" or "Revised" License
125 stars 15 forks source link

updated `accordion` controller and props #1694

Closed TheNoumanDev closed 1 month ago

TheNoumanDev commented 1 month ago

New Example EDL for items

View:
  styles:
    scrollableView: true

  header:
    title: "Collapsible Widget"

  body:
    Column:
      styles:
        padding: 24
        gap: 8
      children:
        - Button:
            label: hello
            onTap: |
              console.log( hello.openSection(1) );
        - Accordion:
            id: hello
            styles:
              limitExpandedToOne: false
              # Global styles applied to all section headers
              headerStyle:
                width: 50
                backgroundColor: red          
                borderColor: green            
                borderColorOpened: red        
                backgroundColorOpened: grey   
                borderWidth: 5                
                borderRadius: 5              

              # Global styles applied to all section bodies
              bodyStyle:
                backgroundColor: white        
                borderColor: green          
                borderWidth: 3               
                horizontalPadding: 20    
              flipRightIconIfOpen: true
              openAndCloseAnimation: false
              paddingBetweenOpenSections: 10
              paddingBetweenClosedSections: 10

            # List of collapsible items (sections)
            items:
              - header:
                  Text:
                    text: "Section 1 Heading"
                body:
                  Text:
                    text: "Section 1 body"
                isOpen: true
                leftIcon:
                  Icon:
                    name: code

              - header:
                  Text:
                    text: "Section 2 Heading"
                body:
                  Text:
                    text: "Section 2 body"
                styles:
                  # Overrides global headerStyle for this section
                  headerStyle:
                    backgroundColor: green 
                  bodyStyle:
                    backgroundColor: white
                    borderColor: green
                    borderWidth: 3
                    horizontalPadding: 40
                    verticalPadding: 80
                onOpenSection:
                  executeCode:
                    body: |
                      console.log('Section 2 opened');
                onCloseSection:
                  executeCode:
                    body: |
                      console.log('Section 2 closed');