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(core): statusBarStyle ease of use and more control (#10859)

Browse Source
This commit is contained in:
Nathan Walker
2025-10-31 23:02:19 -07:00
committed by GitHub
parent cd1ae8c708
commit e90e6d969c
17 changed files with 276 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" statusBarStyle="dark">
<Page.actionBar>
<ActionBar title="Dev Toolbox" icon="" class="action-bar" iosLargeTitle="true" iosShadow="false">
</ActionBar>
@ -20,6 +20,7 @@
<Button text="list-page" 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="status-bar" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="switch" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="touch-animations" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="transitions" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

22
apps/toolbox/src/pages/status-bar.ts Normal file
View File

@ -0,0 +1,22 @@
import { Page, Observable, EventData, Dialogs, ShowModalOptions } from '@nativescript/core';
let page: Page;
export function navigatingTo(args: EventData) {
page = <Page>args.object;
page.bindingContext = new StatusBarModel();
}
export class StatusBarModel extends Observable {
onOpenModal() {
page.showModal('pages/status-bar/status-bar-modal', {
fullscreen: true,
ios: {
statusBarStyle: 'dark',
},
closeCallback(args) {
// console.log('close modal callback', args);
},
} as ShowModalOptions);
}
}

11
apps/toolbox/src/pages/status-bar.xml Normal file
View File

@ -0,0 +1,11 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" backgroundColor="black" statusBarStyle="light">
<!-- Note we set statusBarStyle="light" to explicitly contrast it against our black background -->
<Page.actionBar>
<ActionBar title="Status Bar" color="white">
</ActionBar>
</Page.actionBar>
<GridLayout rows="*,auto,auto,*">
<Label row="1" text="Note status bar color, then Open Modal" fontSize="12" class="text-center c-white" />
<Button row="2" text="Open Modal" tap="{{ onOpenModal }}" class="btn btn-primary btn-view-demo" marginTop="20" />
</GridLayout>
</Page>

22
apps/toolbox/src/pages/status-bar/status-bar-modal.ts Normal file
View File

@ -0,0 +1,22 @@
import { Observable, ShownModallyData, LoadEventData, Page, ShowModalOptions } from '@nativescript/core';
let page: Page;
let closeCallback: Function;
export function onShownModally(args: ShownModallyData) {
closeCallback = args.closeCallback;
if (args.context) {
args.context.shownModally = true;
}
}
export function onLoaded(args: LoadEventData) {
page = args.object as Page;
page.bindingContext = new StatusBarModalPage();
}
export class StatusBarModalPage extends Observable {
close() {
closeCallback();
}
}

9
apps/toolbox/src/pages/status-bar/status-bar-modal.xml Normal file
View File

@ -0,0 +1,9 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded" shownModally="onShownModally" statusBarStyle="dark">
<GridLayout rows="auto,auto,auto,*" verticalAlignment="top" padding="20">
<Button text="Close" tap="{{close}}" horizontalAlignment="right" marginRight="20" />
<Label row="1" text="Status bar color changed to 'dark'." verticalAlignment="top" marginTop="20" class="text-center" fontSize="12" color="black" />
<Label row="2" text="Close and watch it change back." verticalAlignment="top" marginTop="20" class="text-center" fontSize="12" color="black" marginTop="10" />
</GridLayout>
</Page>