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(view): "hidden" property binding is now supported

Browse Source
This commit is contained in:
Nathan Walker
2021-03-17 13:48:30 -07:00
parent 770030e7f6
commit f00144e872
6 changed files with 84 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,7 @@
<Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
</StackLayout>
</ScrollView>
</StackLayout>

32
apps/toolbox/src/pages/visibility-vs-hidden.ts Normal file
View File

@@ -0,0 +1,32 @@
import { Observable, EventData, Page, CoreTypes } from '@nativescript/core';
let page: Page;
export function navigatingTo(args: EventData) {
page = <Page>args.object;
page.bindingContext = new VisibilityVsHiddenModel();
}
export class VisibilityVsHiddenModel extends Observable {
currentVisibility = CoreTypes.Visibility.visible;
currentVisibilityType = `Current Visibility: ${this.currentVisibility}`;
currentVisibilityIndex = 0;
visibilityOptions = [CoreTypes.Visibility.visible, CoreTypes.Visibility.collapse, CoreTypes.Visibility.hidden];
currentHidden = false;
currentHiddenType = `Current Hidden: ${this.currentHidden}`;
toggleVisibility() {
this.currentVisibilityIndex++;
if (this.currentVisibilityIndex === 3) {
this.currentVisibilityIndex = 0;
}
this.set('currentVisibility', this.visibilityOptions[this.currentVisibilityIndex]);
this.set('currentVisibilityType', `Current Visibility: ${this.visibilityOptions[this.currentVisibilityIndex]}`);
}
toggleHidden() {
this.set('currentHidden', !this.currentHidden);
this.set('currentHiddenType', `Current Hidden: ${this.currentHidden}`);
}
}

22
apps/toolbox/src/pages/visibility-vs-hidden.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page.actionBar>
<ActionBar title="Visibility vs. Hidden" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout class="p-20">
<Label text="Explore Visibility vs. hidden here. They can be used for various use cases where needed. They are very subtly different." textWrap="true" class="m-b-20 v-center text-center" />
<Label text="{{currentVisibilityType}}" class="m-b-10 text-center" />
<ContentView visibility="{{currentVisibility}}">
<Label text="I appear, hide and disappear" class="v-center text-center" />
</ContentView>
<Button class="btn btn-primary m-b-30" text="Toggle Visibility: Visible/Collapse/Hidden" tap="{{ toggleVisibility }}" />
<Label text="{{currentHiddenType}}" class="v-center text-center" />
<ContentView hidden="{{currentHidden}}">
<Label text="I appear and disappear" class="v-center text-center" />
</ContentView>
<Button class="btn btn-primary" text="Toggle Hidden" tap="{{ toggleHidden }}" />
</StackLayout>
</Page>