
Research
/Security News
Contagious Interview Campaign Escalates With 67 Malicious npm Packages and New Malware Loader
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
nativescript-collapsing-header
Advanced tools
#NativeScript Collapsing Header Plugin for Android & iOS.
###Install
$ tns plugin add nativescript-collapsing-header
###Example xml useage
<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>
###Example 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;
}
To use the collapsing header plugin you need to first import it into your xml layout with xmlns:collapsingHeader="nativescript-collapsing-header"
when using the collapsing header plugin you need at least two layout views inside of the <collapsingHeader:CollapsingHeader>
element. <collapsingHeader:Header>
and <collapsingHeader:Content>
.
The <collapsingHeader:Header>
has a property called dropShadow
if set to true it will create a small drop shadow effect on the bottom of the header.
##{N} ListView support.
As of version 2.0.0 list view support has been added. Instead of a <collapsingHeader:Content>
elment, add a <ListView>
like you would normally, see below for and example.
<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>
to change the status bar color you there is a property for the <collapsingHeader:CollapsingHeader>
element called statusIosBarBackgroundColor
if not it defaults to white.
###Plugin Development Work Flow.
npm install
npm run setup
to prepare the demo projectnpm run build
npm run demo.android
or npm run demo.ios
###Special thanks to: Nathan Walker for setting up the {N} plugin seed that I used to get this plugin up and running. More info can be found about it here: https://github.com/NathanWalker/nativescript-plugin-seed
##License
for {N} version 1.7.0+
FAQs
NativeScript Collapsing Header Plugin.
The npm package nativescript-collapsing-header receives a total of 0 weekly downloads. As such, nativescript-collapsing-header popularity was classified as not popular.
We found that nativescript-collapsing-header demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.