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(switch): :checked pseudo and color fixes (#9790)

Browse Source
This commit is contained in:
Igor Randjelovic
2022-02-21 23:22:26 +01:00
committed by Nathan Walker
parent 716b831523
commit 6437352fed
7 changed files with 188 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/toolbox/src/app.css
View File

@@ -201,4 +201,24 @@ Button {
.a11y-demo-page .a11y-state-checked {
a11y-state: checked;
}
.switch-demo-page Switch.custom-switch {
color: #ddd;
background-color: #65adf1;
}
.switch-demo-page Switch.custom-switch:checked {
color: #111;
background-color: #65adf1;
}
.switch-demo-page Switch.custom-switch:disabled {
color: #777;
background-color: #ddd;
}
.switch-demo-page Switch.custom-switch:disabled:checked {
color: #ddd;
background-color: #777;
}

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

@@ -6,15 +6,16 @@
<StackLayout class="p-20">
<ScrollView class="h-full">
<StackLayout>
<Button text="list-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<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="box-shadow" 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" />
<Button text="image-async" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="vector-image" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<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="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="vector-image" 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>

14
apps/toolbox/src/pages/switch.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Observable, EventData, Page } from '@nativescript/core';
let page: Page;
export function navigatingTo(args: EventData) {
page = <Page>args.object;
page.bindingContext = new SwitchModel();
}
export class SwitchModel extends Observable {
constructor() {
super();
}
}

75
apps/toolbox/src/pages/switch.xml Normal file
View File

@@ -0,0 +1,75 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page.actionBar>
<ActionBar title="Switch" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<GridLayout padding="20" class="switch-demo-page">
<ScrollView>
<StackLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Default + Checked + Enabled" />
<Switch checked="true" col="1" />
</GridLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Default + UnChecked + Enabled" />
<Switch checked="false" col="1" />
</GridLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Default + Checked + Disabled" />
<Switch checked="true" isEnabled="false" col="1" />
</GridLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Default + UnChecked + Disabled" />
<Switch checked="false" isEnabled="false" col="1" />
</GridLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Custom + Checked + Enabled" />
<Switch class="custom-switch" checked="true" col="1" />
</GridLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Custom + UnChecked + Enabled" />
<Switch class="custom-switch" checked="false" col="1" />
</GridLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Custom + Checked + Disabled" />
<Switch class="custom-switch" checked="true" isEnabled="false" col="1" />
</GridLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Custom + UnChecked + Disabled" />
<Switch class="custom-switch" checked="false" isEnabled="false" col="1" />
</GridLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Custom + Checked + Enabled + offBgColor" />
<Switch class="custom-switch" checked="true" backgroundColor="blue" offBackgroundColor="red" col="1" />
</GridLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Custom + UnChecked + Enabled + offBgColor" />
<Switch class="custom-switch" checked="false" offBackgroundColor="red" col="1" />
</GridLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Custom + Checked + Disabled + offBgColor" />
<Switch class="custom-switch" checked="true" isEnabled="false" offBackgroundColor="red" col="1" />
</GridLayout>
<GridLayout columns="*, auto" marginTop="24">
<Label text="Custom + UnChecked + Disabled + offBgColor" />
<Switch class="custom-switch" checked="false" isEnabled="false" offBackgroundColor="red" col="1" />
</GridLayout>
</StackLayout>
</ScrollView>
</GridLayout>
</Page>