Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

nativescript-accordion

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

nativescript-accordion

A layout which supports expanding and collapsing child views

6.0.0-beta.2
latest
npm

Version published: 6 years ago

Weekly downloads: 274; increased by153.7%

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

NativeScript Accordion

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

Keywords

FAQs

What is nativescript-accordion?

Is nativescript-accordion popular?

Is nativescript-accordion well maintained?

Package last updated on 19 Nov 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install