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="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="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" 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="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="scroll-view" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="switch" 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>

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

@@ -1,21 +1,18 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" actionBarHidden="false"> <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" actionBarHidden="false">
<Page.actionBar> <Page.actionBar>
<ActionBar> <ActionBar>
<Label text="Components" class="header"/> <Label text="Components" class="header"/>
</ActionBar> </ActionBar>
</Page.actionBar> </Page.actionBar>
<GridLayout backgroundColor="#efefef"> <ListView class="list-group" items="{{ components }}" itemTap="{{ componentsItemTap }} " separatorColor="#00000000"
<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 }}" itemTemplateSelector="{{ selectItemTemplate }}">
showSearch="true"
searchAutoHide="true"
searchChange="{{ onSearchTextChange }}">
<ListView.itemTemplates> <ListView.itemTemplates>
<template key="main"> <template key="not-last">
<!-- <StackLayout class="list-row-item"> --> <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)"> <GridLayout>
<!-- <FlexboxLayout flexDirection="row" class="list-view-row" verticalAlignment="center"> --> <FlexboxLayout flexDirection="row" class="list-view-row" verticalAlignment="center">
<!-- <visionos> <visionos>
<Label text="{{ iconText }}" class="icon-around icon-label"/> <Label text="{{ iconText }}" class="icon-around icon-label"/>
</visionos> </visionos>
<ios> <ios>
@@ -25,21 +22,40 @@
<StackLayout class="icon-around"> <StackLayout class="icon-around">
<Label text="{{ iconText }}" class="icon-label"/> <Label text="{{ iconText }}" class="icon-label"/>
</StackLayout> </StackLayout>
</android> --> </android>
<!-- <StackLayout class="va-middle"> --> <StackLayout class="va-middle">
<Label color="black" text="{{ flag }}" marginLeft="4"></Label> <Label text="{{ name }}" class="component-label"></Label>
<Label col="1" text="{{ name }}" marginLeft="6" color="black"></Label> </StackLayout>
<Label col="2" text="{{ code }}" marginLeft="4" color="#999"></Label> </FlexboxLayout>
<!-- </StackLayout> --> <Label text="J" class="component-select component-select-fix"></Label>
<!-- </FlexboxLayout> -->
</GridLayout> </GridLayout>
<!-- <StackLayout class="listview-separator"/> --> <StackLayout class="listview-separator"/>
<!-- </StackLayout> --> </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> </template>
</ListView.itemTemplates> </ListView.itemTemplates>
</ListView> </ListView>
</GridLayout>
</Page> </Page>