#NativeScript Collapsing Header Plugin for Android & iOS.

###安装 $ tns plugin add nativescript-collapsing-header

###xml使用示例

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
	 xmlns:collapsingHeader="nativescript-collapsing-header"
	loaded="pageLoaded">
  	<collapsingHeader:CollapsingHeader>
		<collapsingHeader:Header class="header-template">
			<Label id="headerLabel" text="Collapsing Header"></Label>
		</collapsingHeader:Header>
		<collapsingHeader:Content class="body-template">
			<TextView editable="false" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.

			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.

			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.
			">
			</TextView>
		</collapsingHeader:Content>
	</collapsingHeader:CollapsingHeader>
</Page>

###CSS示例

#headerLabel{
	font-size: 25;
	horizontal-align: center;
	color:#B2EBF2;
	margin-top: 20;
}
.header-template{
	background-color:#212121;
	height: 65;
	width: 100%;
}
.body-template TextView{
	font-size:20;
	padding:5 15;
	border:none;
}

要使用折叠头部插件，首先需要将其导入到您的xml布局中，使用xmlns:collapsingHeader="nativescript-collapsing-header"

在使用折叠头部插件时，您需要在<collapsingHeader:CollapsingHeader>元素内部至少包含两个布局视图。 <collapsingHeader:Header> 和 <collapsingHeader:Content>。

<collapsingHeader:Header>有一个名为dropShadow的属性，如果设置为true，则会在头部底部创建一个小的阴影效果。

##{N} ListView 支持。从版本 2.0.0 开始添加了 ListView 支持。不再需要<collapsingHeader:Content>元素，而是添加一个<ListView>，如下所示。

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
	 xmlns:collapsingHeader="nativescript-collapsing-header"
	loaded="pageLoaded">
  	<collapsingHeader:CollapsingHeader>
		<collapsingHeader:Header class="header-template">
			<Label id="headerLabel" text="Collapsing Header"></Label>
		</collapsingHeader:Header>
		<ListView id="songList" items="{{items}}"  separatorColor="#333">
			<ListView.itemTemplate>
			<GridLayout columns="auto, *, auto" rows="auto"  class="list-item">
				<StackLayout row="0" col="1">
				<Label text="{{title}}" textWrap="true" class="title"></Label>
				<Label text="{{artist}}" textWrap="true" class="title-sub"></Label>
				</StackLayout>
			</GridLayout>
			</ListView.itemTemplate>
		</ListView>
	</collapsingHeader:CollapsingHeader>
</Page>

仅限 iOS

要更改状态栏颜色，<collapsingHeader:CollapsingHeader>元素有一个名为statusIosBarBackgroundColor的属性，如果不设置，则默认为白色。

###插件开发工作流程。

• 将仓库克隆到您的计算机上。
• 首先运行npm install
• 然后运行npm run setup以准备示例项目
• 使用npm run build构建
• 使用npm run demo.android或npm run demo.ios运行并部署到您的设备或模拟器

###特别感谢：Nathan Walker 为我设置了 {N} 插件种子，使我能够启动并运行此插件。更多信息可以在此处找到：https://github.com/NathanWalker/nativescript-plugin-seed

##许可证

MIT

适用于 {N} 版本 1.7.0+