nativescript-accordion
by triniwiz | v6.0.0-beta.2
A layout which supports expanding and collapsing child views
npm i --save nativescript-accordion
  • Version: 6.0.0-beta.2
  • GitHub:
  • Downloads:
    • Last Day:   5
    • Last Week:  32
    • Last Month: 173

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