252 lines
8.6 KiB
HTML
252 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Segment - Basic</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>
|
|
</head>
|
|
|
|
<body onload="listenForEvent()">
|
|
<ion-app>
|
|
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>Segment - Basic</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar>
|
|
<ion-segment class="event-tester" value="Free">
|
|
<ion-segment-button value="Paid">
|
|
PaidPaidPaid
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Free">
|
|
Free
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Top">
|
|
Top
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar>
|
|
<ion-segment name="dynamicPropDisable" disabled color="danger">
|
|
<ion-segment-button value="Bookmarks">
|
|
Bookmarks
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Reading List">
|
|
Reading List
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Shared Links">
|
|
Shared Links
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar>
|
|
<ion-segment name="dynamicAttrElem" color="secondary" value="active">
|
|
<ion-segment-button value="active">
|
|
Active
|
|
</ion-segment-button>
|
|
<ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
|
|
Disabled
|
|
</ion-segment-button>
|
|
<ion-segment-button value="inactive" disabled="false">
|
|
Inactive
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar>
|
|
<ion-segment value="all">
|
|
<ion-segment-button value="all">
|
|
All
|
|
</ion-segment-button>
|
|
<ion-segment-button value="missed">
|
|
Missed
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content>
|
|
<div class="ion-padding">
|
|
<ion-segment>
|
|
<ion-segment-button>
|
|
<ion-label>Seg 1</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button>
|
|
<ion-label>Seg 2</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button>
|
|
<ion-label>Seg 3</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment class="segment-no-animate" value="is">
|
|
<ion-segment-button value="animate">
|
|
<ion-label>Animate</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="is">
|
|
<ion-label>Is</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="false">
|
|
<ion-label>False</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment color="dark" value="Reading List">
|
|
<ion-segment-button value="Bookmarks">
|
|
<ion-icon name="book"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Reading List">
|
|
<ion-icon name="search"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Shared Links">
|
|
<ion-icon name="time"></ion-icon>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment>
|
|
<ion-segment-button value="330">
|
|
<ion-label>330ml</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="440">
|
|
<ion-label>440ml</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button disabled value="500">
|
|
<ion-label>500ml</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="custom">
|
|
<ion-icon name="create"></ion-icon>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment name="dynamicPropDisable" disabled color="danger">
|
|
<ion-segment-button value="Bookmarks">
|
|
<ion-label>Bookmarks</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Reading List">
|
|
<ion-label>Reading List</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Shared Links">
|
|
<ion-label>Shared Links</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment id="finalSegment" name="dynamicAttrElem" color="secondary" value="active">
|
|
<ion-segment-button value="active">
|
|
<ion-label>Active</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
|
|
<ion-label>Disabled</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="inactive" disabled="false">
|
|
<ion-label>Inactive</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment name="dynamicAttrElem">
|
|
<ion-segment-button value="active">
|
|
<ion-label>Active</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
|
|
<ion-label>Disabled</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="inactive" disabled="false">
|
|
<ion-label>Inactive</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<!-- Dynamic Buttons -->
|
|
<ion-segment id="dynamicButtons"></ion-segment>
|
|
</div>
|
|
|
|
<div class="ion-padding-horizontal">
|
|
<ion-button expand="block" onClick="toggleDisabled()">Toggle Disabled</ion-button>
|
|
</div>
|
|
<div class="ion-padding">
|
|
<ion-button expand="block" color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
|
|
</div>
|
|
|
|
<script>
|
|
var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
|
|
var dynamicPropDisable = document.getElementsByName('dynamicPropDisable');
|
|
|
|
function toggleDisabled() {
|
|
for (var i = 0; i < dynamicAttrDisable.length; i++) {
|
|
const attrIsDisabled = dynamicAttrDisable[i].getAttribute('disabled') === 'true' ? false : true;
|
|
dynamicAttrDisable[i].setAttribute('disabled', attrIsDisabled);
|
|
}
|
|
for (var i = 0; i < dynamicPropDisable.length; i++) {
|
|
const propIsDisabled = dynamicPropDisable[i].disabled === true ? false : true;
|
|
dynamicPropDisable[i].disabled = propIsDisabled;
|
|
}
|
|
}
|
|
|
|
function toggleValue() {
|
|
var dynamicAttrElem = document.getElementsByName('dynamicAttrElem');
|
|
for (var i = 0; i < dynamicAttrElem.length; i++) {
|
|
var dynamicAttrValue = dynamicAttrElem[i].getAttribute('value');
|
|
|
|
if (dynamicAttrValue === 'active') {
|
|
dynamicAttrElem[i].setAttribute('value', 'inactive');
|
|
} else if (dynamicAttrValue === 'inactive') {
|
|
dynamicAttrElem[i].setAttribute('value', 'disabled');
|
|
} else {
|
|
dynamicAttrElem[i].setAttribute('value', 'active');
|
|
}
|
|
}
|
|
}
|
|
|
|
async function listenForEvent() {
|
|
const ionSegmentElement = document.querySelector('ion-segment.event-tester');
|
|
ionSegmentElement.addEventListener('ionChange', (event) => {
|
|
console.log('event.target: ', event.target.value);
|
|
});
|
|
}
|
|
|
|
var dynamicButtons = document.getElementById('dynamicButtons');
|
|
updateSegmentButtons(2);
|
|
|
|
setTimeout(function () {
|
|
updateSegmentButtons(4);
|
|
}, 4000);
|
|
|
|
function updateSegmentButtons(length) {
|
|
const buttonsLength = dynamicButtons.children.length;
|
|
const begin = buttonsLength === 0 ? 0 : buttonsLength;
|
|
|
|
for (var i = begin; i < length; i++) {
|
|
const button = document.createElement('ion-segment-button');
|
|
button.value = `segment-${i}`;
|
|
button.innerHTML = `<ion-label>Btn ${i}</ion-label>`;
|
|
|
|
dynamicButtons.appendChild(button);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</ion-content>
|
|
|
|
<style>
|
|
ion-content ion-segment {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.segment-no-animate ion-segment-button {
|
|
--indicator-transition: none;
|
|
--indicator-transform: none;
|
|
}
|
|
</style>
|
|
</ion-app>
|
|
</body>
|
|
|
|
</html>
|