javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: sticky header demo

Browse Source
This commit is contained in:
Nathan Walker
2025-09-01 16:05:37 -07:00
parent 5c143459cd
commit 0ad47a2186
6 changed files with 1518 additions and 1439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/toolbox/src/main-page.xml
View File

@@ -18,6 +18,7 @@
<Button text="image-handling" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="labels" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="list-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="list-page-sticky" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="scroll-view" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="switch" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

1429
apps/toolbox/src/pages/list-page-model-sticky.ts Normal file
View File

File diff suppressed because it is too large Load Diff

1433
apps/toolbox/src/pages/list-page-model.ts
View File

File diff suppressed because it is too large Load Diff

7
apps/toolbox/src/pages/list-page-sticky.ts Normal file
View File

@@ -0,0 +1,7 @@
import { EventData, Page } from '@nativescript/core';
import { ListPageModelSticky } from './list-page-model-sticky';
export function navigatingTo(args: EventData) {
const page = <Page>args.object;
page.bindingContext = new ListPageModelSticky();
}

23
apps/toolbox/src/pages/list-page-sticky.xml Normal file
View File

@@ -0,0 +1,23 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" actionBarHidden="false">
<Page.actionBar>
<ActionBar>
<Label text="Components" class="header"/>
</ActionBar>
</Page.actionBar>
<GridLayout backgroundColor="#efefef">
<ListView class="list-group" items="{{ countries }}" itemTap="{{ componentsItemTap }} " separatorColor="#00000000" itemTemplateSelector="{{ selectItemTemplate }}" stickyHeader="true" sectioned="true" stickyHeaderTopPadding="false" stickyHeaderTemplate="<GridLayout><Label text='{{ title }}' fontSize='18' fontWeight='bold' color='#009bff' padding='8 0 8 12' borderBottomWidth='1' borderBottomColor='#ccc' borderTopWidth='1' borderTopColor='#ccc' backgroundColor='#fff' /></GridLayout>" stickyHeaderHeight="45" itemLoading="{{ itemLoading }}" showSearch="true" searchAutoHide="true" searchChange="{{ onSearchTextChange }}">
<ListView.itemTemplates>
<template key="main">
<GridLayout columns="auto,auto,*" padding="14 12 14 12" margin="2 6 2 6" borderRadius="10" backgroundColor="#fff" boxShadow="0px 1px 2px rgba(0,0,0,0.2)">
<Label color="black" text="{{ flag }}" marginLeft="4"></Label>
<Label col="1" text="{{ name }}" marginLeft="6" color="black"></Label>
<Label col="2" text="{{ code }}" marginLeft="4" color="#999"></Label>
</GridLayout>
</template>
</ListView.itemTemplates>
</ListView>
</GridLayout>
</Page>

60
apps/toolbox/src/pages/list-page.xml
View File

@@ -5,17 +5,14 @@
</ActionBar>
</Page.actionBar>
<GridLayout backgroundColor="#efefef">
<ListView class="list-group" items="{{ countries }}" itemTap="{{ componentsItemTap }} " separatorColor="#00000000" itemTemplateSelector="{{ selectItemTemplate }}" stickyHeader="true" sectioned="true" stickyHeaderTopPadding="false" stickyHeaderTemplate="<GridLayout><Label text='{{ title }}' fontSize='18' fontWeight='bold' color='#009bff' padding='8 0 8 12' borderBottomWidth='1' borderBottomColor='#ccc' borderTopWidth='1' borderTopColor='#ccc' backgroundColor='#fff' /></GridLayout>" stickyHeaderHeight="45" itemLoading="{{ itemLoading }}"
showSearch="true"
searchAutoHide="true"
searchChange="{{ onSearchTextChange }}">
<ListView class="list-group" items="{{ components }}" itemTap="{{ componentsItemTap }} " separatorColor="#00000000"
itemTemplateSelector="{{ selectItemTemplate }}">
<ListView.itemTemplates>
<template key="main">
<!-- <StackLayout class="list-row-item"> -->
<GridLayout columns="auto,auto,*" padding="14 12 14 12" margin="2 6 2 6" borderRadius="10" backgroundColor="#fff" boxShadow="0px 1px 2px rgba(0,0,0,0.2)">
<!-- <FlexboxLayout flexDirection="row" class="list-view-row" verticalAlignment="center"> -->
<!-- <visionos>
<template key="not-last">
<StackLayout class="list-row-item">
<GridLayout>
<FlexboxLayout flexDirection="row" class="list-view-row" verticalAlignment="center">
<visionos>
<Label text="{{ iconText }}" class="icon-around icon-label"/>
</visionos>
<ios>
@@ -25,21 +22,40 @@
<StackLayout class="icon-around">
<Label text="{{ iconText }}" class="icon-label"/>
</StackLayout>
</android> -->
<!-- <StackLayout class="va-middle"> -->
<Label color="black" text="{{ flag }}" marginLeft="4"></Label>
<Label col="1" text="{{ name }}" marginLeft="6" color="black"></Label>
<Label col="2" text="{{ code }}" marginLeft="4" color="#999"></Label>
<!-- </StackLayout> -->
<!-- </FlexboxLayout> -->
</android>
<StackLayout class="va-middle">
<Label text="{{ name }}" class="component-label"></Label>
</StackLayout>
</FlexboxLayout>
<Label text="J" class="component-select component-select-fix"></Label>
</GridLayout>
<!-- <StackLayout class="listview-separator"/> -->
<!-- </StackLayout> -->
<StackLayout class="listview-separator"/>
</StackLayout>
</template>
<template key="last">
<StackLayout class="list-row-item">
<GridLayout>
<FlexboxLayout flexDirection="row" class="list-view-row" verticalAlignment="center">
<visionos>
<Label text="{{ iconText }}" class="icon-around icon-label"/>
</visionos>
<ios>
<Label text="{{ iconText }}" class="icon-around icon-label"/>
</ios>
<android>
<StackLayout class="icon-around">
<Label text="{{ iconText }}" class="icon-label"/>
</StackLayout>
</android>
<StackLayout class="va-middle">
<Label text="{{ name }}" class="component-label"></Label>
</StackLayout>
</FlexboxLayout>
<Label text="J" class="component-select component-select-fix"></Label>
</GridLayout>
</StackLayout>
</template>
</ListView.itemTemplates>
</ListView>
</GridLayout>
</Page>