mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 17:42:15 +08:00
docs(datetime): improve example tests with sizing (#23456)
This commit is contained in:
Liam DeBeasi
@ -6,6 +6,8 @@
|
||||
--background: var(--ion-color-light, #ffffff);
|
||||
--background-rgb: var(--ion-color-light-rgb);
|
||||
--title-color: #{$text-color-step-400};
|
||||
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
// Header
|
||||
|
||||
@ -31,6 +31,179 @@
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.options-popover {
|
||||
--width: 300px;
|
||||
}
|
||||
|
||||
ion-modal.ios,
|
||||
ion-popover.datetime-popover.ios {
|
||||
--width: 350px;
|
||||
--height: 420px;
|
||||
}
|
||||
|
||||
ion-modal.md,
|
||||
ion-popover.datetime-popover.md {
|
||||
--width: 350px;
|
||||
}
|
||||
|
||||
ion-datetime {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66,140,255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80,200,255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
|
||||
--ion-color-tertiary: #6a64ff;
|
||||
--ion-color-tertiary-rgb: 106,100,255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||
--ion-color-tertiary-shade: #5d58e0;
|
||||
--ion-color-tertiary-tint: #7974ff;
|
||||
|
||||
--ion-color-success: #2fdf75;
|
||||
--ion-color-success-rgb: 47,223,117;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0,0,0;
|
||||
--ion-color-success-shade: #29c467;
|
||||
--ion-color-success-tint: #44e283;
|
||||
|
||||
--ion-color-warning: #ffd534;
|
||||
--ion-color-warning-rgb: 255,213,52;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0,0,0;
|
||||
--ion-color-warning-shade: #e0bb2e;
|
||||
--ion-color-warning-tint: #ffd948;
|
||||
|
||||
--ion-color-danger: #ff4961;
|
||||
--ion-color-danger-rgb: 255,73,97;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255,255,255;
|
||||
--ion-color-danger-shade: #e04055;
|
||||
--ion-color-danger-tint: #ff5b71;
|
||||
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244,245,248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0,0,0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152,154,162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0,0,0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #222428;
|
||||
--ion-color-light-rgb: 34,36,40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255,255,255;
|
||||
--ion-color-light-shade: #1e2023;
|
||||
--ion-color-light-tint: #383a3e;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.ios body.dark {
|
||||
--ion-background-color: #000000;
|
||||
--ion-background-color-rgb: 0,0,0;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255,255,255;
|
||||
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-item-background: #000000;
|
||||
|
||||
--ion-card-background: #1c1c1d;
|
||||
}
|
||||
|
||||
.ios body.dark ion-modal {
|
||||
--ion-background-color: var(--ion-color-step-100);
|
||||
--ion-toolbar-background: var(--ion-color-step-150);
|
||||
--ion-toolbar-border-color: var(--ion-color-step-250);
|
||||
--ion-item-background: var(--ion-color-step-150);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Material Design Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.md body.dark {
|
||||
--ion-background-color: #121212;
|
||||
--ion-background-color-rgb: 18,18,18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255,255,255;
|
||||
|
||||
--ion-border-color: #222222;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
|
||||
--ion-toolbar-background: #1f1f1f;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-card-background: #1e1e1e;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -39,11 +212,49 @@
|
||||
<ion-toolbar>
|
||||
<ion-title>Datetime - Basic</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-item lines="none">
|
||||
<ion-label>Dark Mode</ion-label>
|
||||
<ion-checkbox slot="end"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-button id="popover-trigger">Options</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-popover class="options-popover" trigger="popover-trigger">
|
||||
<ion-list lines="none">
|
||||
<ion-item>
|
||||
<ion-label>Dark Mode</ion-label>
|
||||
<ion-checkbox slot="end"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item detail="true" href="?ionic:mode=ios">
|
||||
<ion-label>iOS Mode</ion-label>
|
||||
</ion-item>
|
||||
<ion-item detail="true" href="?ionic:mode=md">
|
||||
<ion-label>MD Mode</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Show Default Title</ion-label>
|
||||
<ion-toggle id="titleToggle"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Show Default Buttons</ion-label>
|
||||
<ion-toggle id="buttonsToggle"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Locale</ion-label>
|
||||
<ion-input placeholder="default" id="locale"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Color</ion-label>
|
||||
<ion-select id="color" value="primary">
|
||||
<ion-select-option value="primary">Primary</ion-select-option>
|
||||
<ion-select-option value="secondary">Secondary</ion-select-option>
|
||||
<ion-select-option value="tertiary">Tertiary</ion-select-option>
|
||||
<ion-select-option value="success">Success</ion-select-option>
|
||||
<ion-select-option value="warning">Warning</ion-select-option>
|
||||
<ion-select-option value="danger">Danger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-popover>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
@ -56,7 +267,7 @@
|
||||
<div class="grid-item">
|
||||
<h2>Popover</h2>
|
||||
<ion-button onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
|
||||
<ion-popover id="default-popover">
|
||||
<ion-popover class="datetime-popover" id="default-popover">
|
||||
<ion-datetime></ion-datetime>
|
||||
</ion-popover>
|
||||
</div>
|
||||
@ -71,17 +282,12 @@
|
||||
<ion-datetime show-default-buttons="true" color="danger" id="custom-datetime">
|
||||
<span slot="title">Select Date</span>
|
||||
</ion-datetime>
|
||||
|
||||
<form>
|
||||
<label for="party">Enter a date and time for your party booking sdf sdf sdf sdf sdfsdf:</label>
|
||||
<input id="party" type="datetime-local" name="partydate">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Popover - Custom</h2>
|
||||
<ion-button id="open-popover">Present Popover</ion-button>
|
||||
<ion-popover trigger="open-popover" id="custom-popover">
|
||||
<ion-popover class="datetime-popover" trigger="open-popover" id="custom-popover">
|
||||
<ion-datetime>
|
||||
<span slot="title">My Custom Title</span>
|
||||
<ion-buttons slot="buttons">
|
||||
@ -108,15 +314,21 @@
|
||||
</div>
|
||||
</ion-content>
|
||||
<script>
|
||||
const inlineDatetime = document.querySelector('#inline-datetime');
|
||||
inlineDatetime.addEventListener('ionChange', (ev) => {
|
||||
console.log('did change', ev);
|
||||
const datetimes = document.querySelectorAll('ion-datetime');
|
||||
const color = document.querySelector('#color');
|
||||
const locale = document.querySelector('#locale');
|
||||
const datetime = document.querySelector('ion-datetime');
|
||||
const buttons = document.querySelectorAll('ion-button');
|
||||
const titleToggle = document.querySelector('#titleToggle');
|
||||
const buttonsToggle = document.querySelector('#buttonsToggle');
|
||||
|
||||
locale.addEventListener('ionBlur', (ev) => {
|
||||
const value = ev.target.value;
|
||||
datetimes.forEach(datetime => {
|
||||
datetime.locale = (!!value) ? value : 'default';
|
||||
});
|
||||
})
|
||||
|
||||
const customDatetime = document.querySelector('#custom-datetime');
|
||||
customDatetime.addEventListener('ionChange', (ev) => {
|
||||
console.log('did change', ev);
|
||||
})
|
||||
const darkModeCheckbox = document.querySelector('ion-checkbox');
|
||||
darkModeCheckbox.addEventListener('ionChange', (ev) => {
|
||||
if (ev.detail.checked) {
|
||||
@ -125,6 +337,24 @@
|
||||
document.body.classList.remove('dark');
|
||||
}
|
||||
});
|
||||
color.addEventListener('ionChange', (ev) => {
|
||||
datetime.color = ev.target.value;
|
||||
buttons.forEach(button => {
|
||||
button.color = ev.target.value;
|
||||
})
|
||||
})
|
||||
|
||||
titleToggle.addEventListener('ionChange', (ev) => {
|
||||
datetimes.forEach(datetime => {
|
||||
datetime.showDefaultTitle = ev.detail.checked;
|
||||
});
|
||||
})
|
||||
buttonsToggle.addEventListener('ionChange', (ev) => {
|
||||
datetimes.forEach(datetime => {
|
||||
datetime.showDefaultButtons = ev.detail.checked;
|
||||
});
|
||||
})
|
||||
|
||||
const defaultPopover = document.querySelector('ion-popover#default-popover');
|
||||
const customPopover = document.querySelector('ion-popover#custom-popover');
|
||||
const presentPopover = (popover, ev) => {
|
||||
|
||||
@ -1,294 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Datetime - Basic</title>
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="viewport-fit=cover, 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 type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-title" content="Ionic App" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
ion-datetime {
|
||||
|
||||
}
|
||||
|
||||
ion-datetime.md {
|
||||
border-radius: 4px;
|
||||
|
||||
box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
ion-content.ios {
|
||||
--background: linear-gradient(45deg, rgba(241,87,122,1) 0%, rgba(241,165,128,1) 50%, rgba(5,131,238,1) 100%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
ion-datetime.ios {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Dark Colors
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
body.dark {
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66,140,255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80,200,255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
|
||||
--ion-color-tertiary: #6a64ff;
|
||||
--ion-color-tertiary-rgb: 106,100,255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||
--ion-color-tertiary-shade: #5d58e0;
|
||||
--ion-color-tertiary-tint: #7974ff;
|
||||
|
||||
--ion-color-success: #2fdf75;
|
||||
--ion-color-success-rgb: 47,223,117;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0,0,0;
|
||||
--ion-color-success-shade: #29c467;
|
||||
--ion-color-success-tint: #44e283;
|
||||
|
||||
--ion-color-warning: #ffd534;
|
||||
--ion-color-warning-rgb: 255,213,52;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0,0,0;
|
||||
--ion-color-warning-shade: #e0bb2e;
|
||||
--ion-color-warning-tint: #ffd948;
|
||||
|
||||
--ion-color-danger: #ff4961;
|
||||
--ion-color-danger-rgb: 255,73,97;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255,255,255;
|
||||
--ion-color-danger-shade: #e04055;
|
||||
--ion-color-danger-tint: #ff5b71;
|
||||
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244,245,248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0,0,0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152,154,162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0,0,0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #222428;
|
||||
--ion-color-light-rgb: 34,36,40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255,255,255;
|
||||
--ion-color-light-shade: #1e2023;
|
||||
--ion-color-light-tint: #383a3e;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.ios body.dark {
|
||||
--ion-background-color: #000000;
|
||||
--ion-background-color-rgb: 0,0,0;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255,255,255;
|
||||
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-item-background: #000000;
|
||||
|
||||
--ion-card-background: #1c1c1d;
|
||||
}
|
||||
|
||||
.ios body.dark ion-modal {
|
||||
--ion-background-color: var(--ion-color-step-100);
|
||||
--ion-toolbar-background: var(--ion-color-step-150);
|
||||
--ion-toolbar-border-color: var(--ion-color-step-250);
|
||||
--ion-item-background: var(--ion-color-step-150);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Material Design Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.md body.dark {
|
||||
--ion-background-color: #121212;
|
||||
--ion-background-color-rgb: 18,18,18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255,255,255;
|
||||
|
||||
--ion-border-color: #222222;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
|
||||
--ion-toolbar-background: #1f1f1f;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-card-background: #1e1e1e;
|
||||
}
|
||||
|
||||
ion-content::part(scroll) {
|
||||
touch-action: auto;
|
||||
}
|
||||
|
||||
#invisible {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-content scroll-y="false">
|
||||
<ion-button id="popover-trigger">Options</ion-button>
|
||||
<ion-popover trigger="popover-trigger">
|
||||
<ion-list lines="none">
|
||||
<ion-item>
|
||||
<ion-label>Dark Mode</ion-label>
|
||||
<ion-checkbox slot="end"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item detail="true" href="?ionic:mode=ios">
|
||||
<ion-label>iOS Mode</ion-label>
|
||||
</ion-item>
|
||||
<ion-item detail="true" href="?ionic:mode=md">
|
||||
<ion-label>MD Mode</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Show Default Title</ion-label>
|
||||
<ion-toggle id="titleToggle"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Show Default Buttons</ion-label>
|
||||
<ion-toggle id="buttonsToggle"></ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Locale</ion-label>
|
||||
<ion-input placeholder="default" id="locale"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Color</ion-label>
|
||||
<ion-select id="color" value="primary">
|
||||
<ion-select-option value="primary">Primary</ion-select-option>
|
||||
<ion-select-option value="secondary">Secondary</ion-select-option>
|
||||
<ion-select-option value="tertiary">Tertiary</ion-select-option>
|
||||
<ion-select-option value="success">Success</ion-select-option>
|
||||
<ion-select-option value="warning">Warning</ion-select-option>
|
||||
<ion-select-option value="danger">Danger</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-popover>
|
||||
|
||||
<ion-datetime></ion-datetime>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
<script>
|
||||
const color = document.querySelector('#color');
|
||||
const locale = document.querySelector('#locale');
|
||||
const datetime = document.querySelector('ion-datetime');
|
||||
const buttons = document.querySelectorAll('ion-button');
|
||||
const titleToggle = document.querySelector('#titleToggle');
|
||||
const buttonsToggle = document.querySelector('#buttonsToggle');
|
||||
locale.addEventListener('ionBlur', (ev) => {
|
||||
const value = ev.target.value;
|
||||
datetime.locale = (!!value) ? value : 'default';
|
||||
})
|
||||
const darkModeCheckbox = document.querySelector('ion-checkbox');
|
||||
darkModeCheckbox.addEventListener('ionChange', (ev) => {
|
||||
if (ev.detail.checked) {
|
||||
document.body.classList.add('dark');
|
||||
} else {
|
||||
document.body.classList.remove('dark');
|
||||
}
|
||||
});
|
||||
color.addEventListener('ionChange', (ev) => {
|
||||
datetime.color = ev.target.value;
|
||||
buttons.forEach(button => {
|
||||
button.color = ev.target.value;
|
||||
})
|
||||
})
|
||||
|
||||
titleToggle.addEventListener('ionChange', (ev) => {
|
||||
datetime.showDefaultTitle = ev.detail.checked;
|
||||
})
|
||||
buttonsToggle.addEventListener('ionChange', (ev) => {
|
||||
datetime.showDefaultButtons = ev.detail.checked;
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user