Skip to content

Commit 561cd50

Browse files
omairqazi29omairqazi29
committed
docs(toolbox): add sliders demo page for linear-gradient feature
Add sample page to toolbox demonstrating gradient slider backgrounds: - Default slider for comparison - Various gradient styles (rainbow, sunset, ocean, purple) - Gradient with explicit color stops - Disabled gradient slider example
1 parent c3326e5 commit 561cd50

File tree

4 files changed

+92
-0
lines changed

4 files changed

+92
-0
lines changed

‎apps/toolbox/src/app.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -339,3 +339,32 @@ Button {
339339
.text-center {
340340
text-align: center;
341341
}
342+
343+
/* Sliders Demo Page Styles */
344+
.sliders-demo-page Slider.gradient-slider {
345+
background: linear-gradient(to right, orangered, green, lightblue);
346+
}
347+
348+
.sliders-demo-page Slider.rainbow-slider {
349+
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
350+
}
351+
352+
.sliders-demo-page Slider.two-color-slider {
353+
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
354+
}
355+
356+
.sliders-demo-page Slider.sunset-slider {
357+
background: linear-gradient(to right, #f12711, #f5af19);
358+
}
359+
360+
.sliders-demo-page Slider.ocean-slider {
361+
background: linear-gradient(to right, #2193b0, #6dd5ed);
362+
}
363+
364+
.sliders-demo-page Slider.purple-slider {
365+
background: linear-gradient(to right, #8e2de2, #4a00e0);
366+
}
367+
368+
.sliders-demo-page Slider.stops-slider {
369+
background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
370+
}

‎apps/toolbox/src/main-page.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<Button text="multiple-scenes" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
2323
<Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
2424
<Button text="scroll-view" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
25+
<Button text="sliders" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
2526
<Button text="status-bar" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
2627
<Button text="switch" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
2728
<Button text="tabview" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

‎apps/toolbox/src/pages/sliders.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Observable, EventData, Page } from '@nativescript/core';
2+
3+
let page: Page;
4+
5+
export function navigatingTo(args: EventData) {
6+
page = <Page>args.object;
7+
page.bindingContext = new SlidersModel();
8+
}
9+
10+
export class SlidersModel extends Observable {
11+
constructor() {
12+
super();
13+
}
14+
}

‎apps/toolbox/src/pages/sliders.xml‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
2+
<Page.actionBar>
3+
<ActionBar title="Sliders" icon="" class="action-bar">
4+
</ActionBar>
5+
</Page.actionBar>
6+
7+
<GridLayout class="sliders-demo-page">
8+
<ScrollView>
9+
<StackLayout ios:padding="20" visionos:padding="40">
10+
11+
<Label text="Default Slider" class="h3" marginTop="24" />
12+
<Slider minValue="0" maxValue="100" value="50" marginTop="12" />
13+
14+
<Label text="Gradient Slider (CSS)" class="h3" marginTop="24" />
15+
<Label text="background: linear-gradient(to right, orangered, green, lightblue)" class="caption" />
16+
<Slider class="gradient-slider" minValue="0" maxValue="100" value="50" marginTop="12" />
17+
18+
<Label text="Rainbow Gradient" class="h3" marginTop="24" />
19+
<Label text="background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)" class="caption" />
20+
<Slider class="rainbow-slider" minValue="0" maxValue="100" value="70" marginTop="12" />
21+
22+
<Label text="Two-Color Gradient" class="h3" marginTop="24" />
23+
<Label text="background: linear-gradient(to right, #ff6b6b, #4ecdc4)" class="caption" />
24+
<Slider class="two-color-slider" minValue="0" maxValue="100" value="30" marginTop="12" />
25+
26+
<Label text="Sunset Gradient" class="h3" marginTop="24" />
27+
<Label text="background: linear-gradient(to right, #f12711, #f5af19)" class="caption" />
28+
<Slider class="sunset-slider" minValue="0" maxValue="100" value="60" marginTop="12" />
29+
30+
<Label text="Ocean Gradient" class="h3" marginTop="24" />
31+
<Label text="background: linear-gradient(to right, #2193b0, #6dd5ed)" class="caption" />
32+
<Slider class="ocean-slider" minValue="0" maxValue="100" value="40" marginTop="12" />
33+
34+
<Label text="Purple Gradient" class="h3" marginTop="24" />
35+
<Label text="background: linear-gradient(to right, #8e2de2, #4a00e0)" class="caption" />
36+
<Slider class="purple-slider" minValue="0" maxValue="100" value="80" marginTop="12" />
37+
38+
<Label text="Gradient with Color Stops" class="h3" marginTop="24" />
39+
<Label text="background: linear-gradient(to right, red 0%, yellow 50%, green 100%)" class="caption" />
40+
<Slider class="stops-slider" minValue="0" maxValue="100" value="50" marginTop="12" />
41+
42+
<Label text="Disabled Gradient Slider" class="h3" marginTop="24" />
43+
<Slider class="gradient-slider" minValue="0" maxValue="100" value="50" isEnabled="false" marginTop="12" />
44+
45+
</StackLayout>
46+
</ScrollView>
47+
</GridLayout>
48+
</Page>

0 commit comments

Comments
 (0)