mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 18:54:11 +08:00
test(segment-view): split out disabled segment view / content test
This commit is contained in:
Brandy Carney
@ -96,32 +96,9 @@
|
|||||||
<ion-segment-content id="top">Top</ion-segment-content>
|
<ion-segment-content id="top">Top</ion-segment-content>
|
||||||
</ion-segment-view>
|
</ion-segment-view>
|
||||||
|
|
||||||
<ion-toolbar>
|
<button class="expand" onClick="changeSegmentContent()">Change Segment Content</button>
|
||||||
<ion-segment disabled value="reading-list">
|
|
||||||
<ion-segment-button content-id="bookmarks" value="bookmarks">
|
|
||||||
<ion-label>Bookmarks</ion-label>
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button content-id="reading-list" value="reading-list">
|
|
||||||
<ion-label>Reading List</ion-label>
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button content-id="shared-links" value="shared-links">
|
|
||||||
<ion-label>Shared Links</ion-label>
|
|
||||||
</ion-segment-button>
|
|
||||||
</ion-segment>
|
|
||||||
</ion-toolbar>
|
|
||||||
<ion-segment-view disabled>
|
|
||||||
<ion-segment-content id="bookmarks">Bookmarks</ion-segment-content>
|
|
||||||
<ion-segment-content id="reading-list">Reading List</ion-segment-content>
|
|
||||||
<ion-segment-content id="shared-links">Shared Links</ion-segment-content>
|
|
||||||
</ion-segment-view>
|
|
||||||
|
|
||||||
<button class="expand" onClick="changeSegmentContent()">
|
<button class="expand" onClick="clearSegmentValue()">Clear Segment Value</button>
|
||||||
Change Segment Content
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="expand" onClick="clearSegmentValue()">
|
|
||||||
Clear Segment Value
|
|
||||||
</button>
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|
||||||
<ion-footer>
|
<ion-footer>
|
||||||
|
|||||||
94
core/src/components/segment-view/test/disabled/index.html
Normal file
94
core/src/components/segment-view/test/disabled/index.html
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Segment View - Disabled</title>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||||
|
/>
|
||||||
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||||
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||||
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
ion-segment-view {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO the :not is required otherwise it
|
||||||
|
* overrides the disabled styles
|
||||||
|
*/
|
||||||
|
ion-segment-content:not([disabled]) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-segment-content:nth-of-type(1) {
|
||||||
|
background: lightpink;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-segment-content:nth-of-type(2) {
|
||||||
|
background: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-segment-content:nth-of-type(3) {
|
||||||
|
background: lightgreen;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ion-app>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Segment View - Disabled</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-segment value="paid">
|
||||||
|
<ion-segment-button content-id="paid" value="paid">
|
||||||
|
<ion-label>Paid</ion-label>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button disabled content-id="free" value="free">
|
||||||
|
<ion-label>Free</ion-label>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button content-id="top" value="top">
|
||||||
|
<ion-label>Top</ion-label>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
<ion-segment-view>
|
||||||
|
<ion-segment-content id="paid">Paid</ion-segment-content>
|
||||||
|
<ion-segment-content disabled id="free">Free</ion-segment-content>
|
||||||
|
<ion-segment-content id="top">Top</ion-segment-content>
|
||||||
|
</ion-segment-view>
|
||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-segment disabled value="reading-list">
|
||||||
|
<ion-segment-button content-id="bookmarks" value="bookmarks">
|
||||||
|
<ion-label>Bookmarks</ion-label>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button content-id="reading-list" value="reading-list">
|
||||||
|
<ion-label>Reading List</ion-label>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button content-id="shared-links" value="shared-links">
|
||||||
|
<ion-label>Shared Links</ion-label>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
<ion-segment-view disabled>
|
||||||
|
<ion-segment-content id="bookmarks">Bookmarks</ion-segment-content>
|
||||||
|
<ion-segment-content id="reading-list">Reading List</ion-segment-content>
|
||||||
|
<ion-segment-content id="shared-links">Shared Links</ion-segment-content>
|
||||||
|
</ion-segment-view>
|
||||||
|
</ion-content>
|
||||||
|
</ion-app>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user