Node's Package Magician

    nativescript-accordion
    TypeScript icon, indicating that this package has built-in type declarations

    6.0.0-beta.2 • Public • Published

    npm npm

    NativeScript Accordion

    Buy Me A Beer

    Install

    tns plugin add nativescript-accordion

    Usage

    IMPORTANT: Make sure you include xmlns:accordion="nativescript-accordion" on the Page element

    Data

    By default the plugin will look for the items property in each item but you can set name by setting childItems="blah" on the Accordion instance

    this.items = [
          {
            title: "1", footer: "10", headerText: "First", footerText: "4",
            blah: [
              { image: "~/images/a9ff17db85f8136619feb0d5a200c0e4.png", text: "Stop" },
              { text: "Drop", image: "http://static.srcdn.com/wp-content/uploads/Superman-fighting-Goku.jpg" }
            ]
          }
        ]
    
    selectedIndexes = [0,3]
     

    Core

    <accordion:Accordion items="{{items}}" itemHeaderTap="tapped" itemContentTap="childTapped"  allowMultiple="true" id="ac" selectedIndexes="selectedIndexes">
                <accordion:Accordion.headerTemplate>
                    <GridLayout backgroundColor="green" columns="auto,*">
                        <Label text="{{title}}"/>
                        <Label col="1" text="+"/>
                    </GridLayout>
                </accordion:Accordion.headerTemplate>
     
                <accordion:Accordion.itemHeaderTemplate>
                    <StackLayout>
                        <Label text="{{text}}"/>
                    </StackLayout>
                </accordion:Accordion.itemHeaderTemplate>
                
                
                <accordion:Accordion.itemContentTemplate>
                                <StackLayout>
                                    <Image src="{{image}}"/>
                                </StackLayout>
                  </accordion:Accordion.itemContentTemplate>
     
                <accordion:Accordion.footerTemplate>
                    <GridLayout backgroundColor="yellow" columns="auto,*">
                        <Label text="{{footer}}"/>
                        <Label col="1" text="-"/>
                    </GridLayout>
                </accordion:Accordion.footerTemplate>
     
            </accordion:Accordion>

    Multi Template

    <accordion:Accordion childItems="children" id="accordion" selectedIndexesChange="onChange" height="100%"
                                 items="{{items}}" allowMultiple="true" selectedIndexes="{{selectedIndexes}}"
                                 headerTemplateSelector="$index % 2 !== 0 ? 'odd' : 'even'"
                                 itemHeaderTemplateSelector="$index % 2 !== 0  ? 'odd' : 'even'"
                                 itemContentTemplateSelector="$childIndex % 2 !== 0  ? 'odd' : 'even'"
                                 footerTemplateSelector="$index % 2 !== 0 ? 'odd' : 'even'"
            >
     
                <Accordion.headerTemplates>
                    <template key="odd">
                        <StackLayout>
                            <Label backgroundColor="green" text="{{headerText}}"/>
                        </StackLayout>
                    </template>
     
                    <template key="even">
                        <StackLayout>
                            <Label backgroundColor="orange" text="{{headerText}}"/>
                        </StackLayout>
                    </template>
                </Accordion.headerTemplates>
     
     
                <Accordion.itemHeaderTemplates>
                    <template key="odd">
                        <StackLayout backgroundColor="white">
                            <Label text="{{title}}"/>
                        </StackLayout>
                    </template>
     
                    <template key="even">
                        <StackLayout backgroundColor="white">
                            <Label text="{{title}}"/>
                            <Image decodeWidth="400" decodeHeight="400" loadMode="async" src="{{image}}"/>
                        </StackLayout>
                    </template>
                </Accordion.itemHeaderTemplates>
     
                <Accordion.itemContentTemplates>
                    <template key="odd">
                        <StackLayout>
                            <Image decodeWidth="400" decodeHeight="400" loadMode="async" src="{{image}}"/>
                            <Label text="{{text}}"/>
                        </StackLayout>
                    </template>
     
                    <template key="even">
                        <StackLayout>
                            <Image decodeWidth="400" decodeHeight="400" loadMode="async" src="{{image}}"/>
                            <Label text="{{text}}"/>
                        </StackLayout>
                    </template>
                </Accordion.itemContentTemplates>
     
                <Accordion.footerTemplates>
                    <template key="odd">
                        <StackLayout>
                            <Label backgroundColor="yellow" text="{{footerText}}"/>
                        </StackLayout>
                    </template>
     
                    <template key="even">
                        <StackLayout>
                            <Label backgroundColor="blue" text="{{footerText}}"/>
                        </StackLayout>
                    </template>
                </Accordion.footerTemplates>
     
            </accordion:Accordion>
     

    Vue

     
    import Vue from 'nativescript-vue'
    import Pager from 'nativescript-accordion/vue'
     
    Vue.use(Pager)
    <Accordion row="1" for="item of items">
     
                    <v-template name="header">
                        <StackLayout>
                            <Label backgroundColor="green" :text="item.headerText"></Label>
                        </StackLayout>
                    </v-template>
     
     
                    <v-template name="title">
                        <GridLayout backgroundColor="white">
                            <Label height="100%" :text="item.title"></Label>
                        </GridLayout>
                    </v-template>
     
                    <v-template name="content">
                        <StackLayout>
                            <Image decodeWidth="400" decodeHeight="400" loadMode="async" :src="item.image"></Image>
                            <Label :text="item.text"></Label>
                        </StackLayout>
                    </v-template>
     
     
                    <v-template name="footer">
                        <StackLayout>
                            <Label backgroundColor="yellow" :text="item.footerText"></Label>
                        </StackLayout>
                    </v-template>
                </Accordion>

    Multi Template

    <Accordion row="2" height="100%" ref="accordion" allowMultiple="true" childItems="children" for="item of items">
                    <v-template if="$odd" name="header-odd">
                        <StackLayout>
                            <Label backgroundColor="green" :text="item.headerText"></Label>
                        </StackLayout>
                    </v-template>
     
                    <v-template if="$even" name="header-even">
                        <StackLayout>
                            <Label backgroundColor="orange" :text="item.headerText"></Label>
                        </StackLayout>
                    </v-template>
     
                    <v-template if="$odd" name="title-odd">
                        <StackLayout backgroundColor="white">
                            <Label :text="item.title"></Label>
                        </StackLayout>
                    </v-template>
     
                    <v-template if="$even" name="title-even">
                        <StackLayout backgroundColor="white">
                            <Label :text="item.title"></Label>
                            <Image height="100" width="100" decodeWidth="400" decodeHeight="400" loadMode="async"
                                   :src="item.image"></Image>
                        </StackLayout>
                    </v-template>
     
     
                    <v-template if="$odd" name="content-odd">
                        <StackLayout>
                            <Image decodeWidth="400" decodeHeight="400" loadMode="async" :src="item.image"></Image>
                            <Label :text="item.text"></Label>
                        </StackLayout>
                    </v-template>
     
                    <v-template if="$even" name="content-even">
                        <StackLayout>
                            <Image decodeWidth="400" decodeHeight="400" loadMode="async" :src="item.image"></Image>
                            <Label :text="item.text"></Label>
                        </StackLayout>
                    </v-template>
     
                    <v-template if="$odd" name="footer-odd">
                        <StackLayout>
                            <Label backgroundColor="yellow" :text="item.footerText"></Label>
                        </StackLayout>
                    </v-template>
     
                    <v-template if="$even" name="footer-even">
                        <StackLayout>
                            <Label backgroundColor="blue" :text="item.footerText"></Label>
                        </StackLayout>
                    </v-template>
                </Accordion>
     

    Angular

    import { AccordionModule } from "nativescript-accordion/angular";
     
    @NgModule({
        imports: [
            AccordionModule
        ]
        })
    <Accordion height="100%" [items]="items" allowMultiple="false" [selectedIndexes]="selectedIndexes">
     
            <ng-template let-i="index" let-item="item" acTemplateKey="header">
                <StackLayout>
                    <Label backgroundColor="green" [text]="item.headerText"></Label>
                </StackLayout>
            </ng-template>
     
     
            <ng-template let-i="index" let-item="item" acTemplateKey="title">
                <GridLayout backgroundColor="white">
                    <Label height="100%" [text]="item.title"></Label>
                </GridLayout>
            </ng-template>
     
            <ng-template let-i="index" let-item="item" acTemplateKey="content">
                <StackLayout>
                    <Image width="300" height="300" decodeWidth="400" decodeHeight="400" [src]="item.image"></Image>
                    <Label [text]="item.text"></Label>
                </StackLayout>
            </ng-template>
     
     
            <ng-template let-i="index" let-item="item" acTemplateKey="footer">
                <StackLayout>
                    <Label backgroundColor="yellow" [text]="item.footerText"></Label>
                </StackLayout>
            </ng-template>
        </Accordion>

    Multi Template

    <Accordion #accordion row="2" height="100%" allowMultiple="true" childItems="children" [items]="items"
                   [headerTemplateSelector]="headerTemplateSelector"
                   [itemHeaderTemplateSelector]="itemHeaderTemplateSelector"
                   [itemContentTemplateSelector]="itemContentTemplateSelector"
                   [footerTemplateSelector]="footerTemplateSelector"
        >
            <ng-template let-i="index" let-item="item" acTemplateKey="header-odd">
                <StackLayout>
                    <Label backgroundColor="green" [text]="item.headerText"></Label>
                </StackLayout>
            </ng-template>
     
            <ng-template let-i="index" let-item="item" acTemplateKey="header-even">
                <StackLayout>
                    <Label backgroundColor="orange" [text]="item.headerText"></Label>
                </StackLayout>
            </ng-template>
     
            <ng-template let-i="index" let-item="item" acTemplateKey="title-odd">
                <StackLayout backgroundColor="white">
                    <Label [text]="item.title"></Label>
                </StackLayout>
            </ng-template>
     
            <ng-template let-i="index" let-item="item" acTemplateKey="title-even">
                <StackLayout backgroundColor="white">
                    <Label [text]="item.title"></Label>
                    <Image height="100" width="100" decodeWidth="400" decodeHeight="400" loadMode="async"
                           [src]="item.image"></Image>
                </StackLayout>
            </ng-template>
     
     
            <ng-template let-i="index" let-item="item" acTemplateKey="content-odd">
                <StackLayout>
                    <Image decodeWidth="400" decodeHeight="400" loadMode="async" [src]="item.image"></Image>
                    <Label [text]="item.text"></Label>
                </StackLayout>
            </ng-template>
     
            <ng-template let-i="index" let-item="item" acTemplateKey="content-even">
                <StackLayout>
                    <Image decodeWidth="400" decodeHeight="400" loadMode="async" [src]="item.image"></Image>
                    <Label [text]="item.text"></Label>
                </StackLayout>
            </ng-template>
     
            <ng-template let-i="index" let-item="item" acTemplateKey="footer-odd">
                <StackLayout>
                    <Label backgroundColor="yellow" [text]="item.footerText"></Label>
                </StackLayout>
            </ng-template>
     
            <ng-template let-i="index" let-item="item" acTemplateKey="footer-even">
                <StackLayout>
                    <Label backgroundColor="blue" [text]="item.footerText"></Label>
                </StackLayout>
            </ng-template>
        </Accordion>

    Config

    public selectedIndexes = [0,3]
    <Accordion allowMultiple="true" [selectedIndexes]="selectedIndexes">
    

    ScreenShots

    Android IOS
    SS SS

    Install

    npm i nativescript-accordion

    DownloadsWeekly Downloads

    5

    Version

    6.0.0-beta.2

    License

    Apache-2.0

    Unpacked Size

    208 kB

    Total Files

    23

    Last publish

    Collaborators

    • triniwiz