NativeScript Accordion

Install

ns plugin add nativescript-accordion

Usage

IMPORTANT: Make sure you include xmlns:accordion="@triniwiz/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">