No description, website, or topics provided.
Clone or download
Latest commit 82732f2 Nov 7, 2018
Permalink
Failed to load latest commit information.
.github Refactor Oct 19, 2018
demo-ng fix(): image height Oct 23, 2018
demo-vue fix(): image height Oct 23, 2018
demo fix(): image height Oct 23, 2018
publish (fix) publishing Oct 21, 2018
src fix(): angular build Nov 7, 2018
ss 2.0 Dec 7, 2016
.gitignore Alpha 0 Oct 20, 2018
.travis.yml Refactor Oct 19, 2018
LICENSE Refactor Oct 19, 2018
README.md Clear separator color Oct 20, 2018
tslint.json Refactor Oct 19, 2018

README.md

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