@@ -0,0 +1,147 @@
1+<!DOCTYPE html>
2+<html lang="en" dir="ltr">
3+<head>
4+<meta charset="UTF-8" />
5+<title>Segment View - Swipe Gesture</title>
6+<meta
7+name="viewport"
8+content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+/>
10+<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+<script src="../../../../../scripts/testing/scripts.js"></script>
13+<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+16+<style>
17+h2 {
18+font-size: 12px;
19+font-weight: normal;
20+21+color: #6f7378;
22+23+margin: 24px 16px 8px;
24+ }
25+26+ion-segment-view {
27+height: 100px;
28+29+margin-bottom: 20px;
30+ }
31+32+ion-segment-content {
33+display: flex;
34+justify-content: center;
35+align-items: center;
36+ }
37+38+ion-segment-content:nth-of-type(3n + 1) {
39+background: lightpink;
40+ }
41+42+ion-segment-content:nth-of-type(3n + 2) {
43+background: lightblue;
44+ }
45+46+ion-segment-content:nth-of-type(3n + 3) {
47+background: lightgreen;
48+ }
49+</style>
50+</head>
51+52+<body>
53+<ion-app>
54+<ion-header>
55+<ion-toolbar>
56+<ion-title>Segment View - Swipe Gesture</ion-title>
57+</ion-toolbar>
58+</ion-header>
59+60+<ion-content>
61+<h2>
62+ Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment View
63+<ion-text color="success">Enabled</ion-text>
64+</h2>
65+<ion-segment value="free">
66+<ion-segment-button content-id="paid" value="paid">
67+<ion-label>Paid</ion-label>
68+</ion-segment-button>
69+<ion-segment-button content-id="free" value="free">
70+<ion-label>Free</ion-label>
71+</ion-segment-button>
72+<ion-segment-button content-id="top" value="top">
73+<ion-label>Top</ion-label>
74+</ion-segment-button>
75+</ion-segment>
76+<ion-segment-view>
77+<ion-segment-content id="paid">Paid</ion-segment-content>
78+<ion-segment-content id="free">Free</ion-segment-content>
79+<ion-segment-content id="top">Top</ion-segment-content>
80+</ion-segment-view>
81+82+<h2>
83+ Swipe Gesture: Segment <ion-text color="danger">Disabled</ion-text>; Segment View
84+<ion-text color="success">Enabled</ion-text>
85+</h2>
86+<ion-segment swipe-gesture="false" value="free2">
87+<ion-segment-button content-id="paid2" value="paid2">
88+<ion-label>Paid</ion-label>
89+</ion-segment-button>
90+<ion-segment-button content-id="free2" value="free2">
91+<ion-label>Free</ion-label>
92+</ion-segment-button>
93+<ion-segment-button content-id="top2" value="top2">
94+<ion-label>Top</ion-label>
95+</ion-segment-button>
96+</ion-segment>
97+<ion-segment-view>
98+<ion-segment-content id="paid2">Paid</ion-segment-content>
99+<ion-segment-content id="free2">Free</ion-segment-content>
100+<ion-segment-content id="top2">Top</ion-segment-content>
101+</ion-segment-view>
102+103+<h2>
104+ Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment View
105+<ion-text color="danger">Disabled</ion-text>
106+</h2>
107+<ion-segment value="free3">
108+<ion-segment-button content-id="paid3" value="paid3">
109+<ion-label>Paid</ion-label>
110+</ion-segment-button>
111+<ion-segment-button content-id="free3" value="free3">
112+<ion-label>Free</ion-label>
113+</ion-segment-button>
114+<ion-segment-button content-id="top3" value="top3">
115+<ion-label>Top</ion-label>
116+</ion-segment-button>
117+</ion-segment>
118+<ion-segment-view swipe-gesture="false">
119+<ion-segment-content id="paid3">Paid</ion-segment-content>
120+<ion-segment-content id="free3">Free</ion-segment-content>
121+<ion-segment-content id="top3">Top</ion-segment-content>
122+</ion-segment-view>
123+124+<h2>
125+ Swipe Gesture: Segment <ion-text color="danger">Disabled</ion-text>; Segment View
126+<ion-text color="danger">Disabled</ion-text>
127+</h2>
128+<ion-segment swipe-gesture="false" value="free4">
129+<ion-segment-button content-id="paid4" value="paid4">
130+<ion-label>Paid</ion-label>
131+</ion-segment-button>
132+<ion-segment-button content-id="free4" value="free4">
133+<ion-label>Free</ion-label>
134+</ion-segment-button>
135+<ion-segment-button content-id="top4" value="top4">
136+<ion-label>Top</ion-label>
137+</ion-segment-button>
138+</ion-segment>
139+<ion-segment-view swipe-gesture="false">
140+<ion-segment-content id="paid4">Paid</ion-segment-content>
141+<ion-segment-content id="free4">Free</ion-segment-content>
142+<ion-segment-content id="top4">Top</ion-segment-content>
143+</ion-segment-view>
144+</ion-content>
145+</ion-app>
146+</body>
147+</html>