/
githubmirror
/
ionic
Обзор
Документация
Войти
/
githubmirror
/
ionic
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
core/src/themes/test/css-variables/index.html
1 189 строк
49 KB
Sean Perkins
feat: rename dark/high-contrast themes to palettes (#29149)
18 мар 2024, 21:45
Не верифицирован
18 мар 2024, 21:45
761e1b4
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8" /> <title>CSS Variable - 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> <link id="palette" href="/src/themes/test/default.css" rel="stylesheet" /> <style> .wrapper { display: flex; flex-direction: row; } section { width: 25%; padding: 0 8px; } .right-container { display: flex; height: 100%; align-items: center; } .right-container ion-select { padding-top: 0; padding-bottom: 0; } ion-fab-button { display: inline-block; } ion-segment { margin-bottom: 8px; } ion-toolbar ion-segment { margin-bottom: 0; } .icon-section ion-icon { font-size: 48px; } ion-breadcrumbs, ion-progress-bar { margin-bottom: 10px; } </style> </head> <body> <ion-app> <ion-tabs> <ion-tab-bar slot="bottom"> <ion-tab-button tab="list"> <ion-label>Lists</ion-label> <ion-icon name="list"></ion-icon> </ion-tab-button> <ion-tab-button tab="colors"> <ion-label>Colors</ion-label> <ion-icon name="brush"></ion-icon> </ion-tab-button> <ion-tab-button tab="overlays"> <ion-label>Overlays</ion-label> <ion-icon ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-tab-button> </ion-tab-bar> <ion-tab tab="list"> <ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button default-href="/"></ion-back-button> <ion-menu-button auto-hide="false"></ion-menu-button> <ion-button>Default</ion-button> <ion-button fill="solid">Solid</ion-button> <ion-button fill="clear">Clear</ion-button> <ion-button fill="outline">Outline</ion-button> </ion-buttons> <ion-title>Default Buttons</ion-title> <ion-buttons slot="primary"> <ion-back-button color="secondary" default-href="/"></ion-back-button> <ion-menu-button color="secondary" auto-hide="false"></ion-menu-button> <ion-button color="secondary">Default</ion-button> <ion-button color="secondary" fill="solid">Solid</ion-button> <ion-button color="secondary" fill="clear">Clear</ion-button> <ion-button color="secondary" fill="outline">Outline</ion-button> </ion-buttons> </ion-toolbar> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button class="ion-focused" default-href="/"></ion-back-button> <ion-menu-button class="ion-focused" auto-hide="false"></ion-menu-button> <ion-button class="ion-focused">Default</ion-button> <ion-button class="ion-focused" fill="solid">Solid</ion-button> <ion-button class="ion-focused" fill="clear">Clear</ion-button> <ion-button class="ion-focused" fill="outline">Outline</ion-button> </ion-buttons> <ion-title>Focused Buttons</ion-title> <ion-buttons slot="primary"> <ion-back-button color="secondary" class="ion-focused" default-href="/"></ion-back-button> <ion-menu-button color="secondary" class="ion-focused" auto-hide="false"></ion-menu-button> <ion-button color="secondary" class="ion-focused">Default</ion-button> <ion-button color="secondary" class="ion-focused" fill="solid">Solid</ion-button> <ion-button color="secondary" class="ion-focused" fill="clear">Clear</ion-button> <ion-button color="secondary" class="ion-focused" fill="outline">Outline</ion-button> </ion-buttons> </ion-toolbar> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button class="ion-activated" default-href="/"></ion-back-button> <ion-menu-button class="ion-activated" auto-hide="false"></ion-menu-button> <ion-button class="ion-activated">Default</ion-button> <ion-button class="ion-activated" fill="solid">Solid</ion-button> <ion-button class="ion-activated" fill="clear">Clear</ion-button> <ion-button class="ion-activated" fill="outline">Outline</ion-button> </ion-buttons> <ion-title>Activated Buttons</ion-title> <ion-buttons slot="primary"> <ion-back-button color="secondary" class="ion-activated" default-href="/"></ion-back-button> <ion-menu-button color="secondary" class="ion-activated" auto-hide="false"></ion-menu-button> <ion-button color="secondary" class="ion-activated">Default</ion-button> <ion-button color="secondary" class="ion-activated" fill="solid">Solid</ion-button> <ion-button color="secondary" class="ion-activated" fill="clear">Clear</ion-button> <ion-button color="secondary" class="ion-activated" fill="outline">Outline</ion-button> </ion-buttons> </ion-toolbar> <ion-toolbar> <ion-segment value="default" class="palette-picker"> <ion-segment-button value="default"> <ion-label>Default</ion-label> </ion-segment-button> <ion-segment-button value="dark"> <ion-label>Dark</ion-label> </ion-segment-button> <ion-segment-button value="high-contrast"> <ion-label>High Contrast</ion-label> </ion-segment-button> <ion-segment-button value="high-contrast-dark"> <ion-label>High Contrast (Dark)</ion-label> </ion-segment-button> <ion-segment-button value="oceanic"> <ion-label>Oceanic</ion-label> </ion-segment-button> <ion-segment-button value="vibrant"> <ion-label>Vibrant</ion-label> </ion-segment-button> <ion-segment-button value="toolbar"> <ion-label>Toolbar</ion-label> </ion-segment-button> <ion-segment-button disabled> <ion-label>Disabled</ion-label> </ion-segment-button> </ion-segment> </ion-toolbar> </ion-header> <ion-content class="ion-padding"> <ion-breadcrumbs max-items="6" items-before-collapse="3" items-after-collapse="3"> <ion-breadcrumb href="#"> <ion-icon slot="start" name="home"></ion-icon> Home </ion-breadcrumb> <ion-breadcrumb href="#documents" class="ion-focused"> <ion-icon slot="start" name="folder"></ion-icon> Documents </ion-breadcrumb> <ion-breadcrumb href="#folders"> <ion-icon slot="start" name="folder"></ion-icon> Folders </ion-breadcrumb> <ion-breadcrumb href="#files"> <ion-icon slot="start" name="folder"></ion-icon> Files </ion-breadcrumb> <ion-breadcrumb href="#projects"> <ion-icon slot="start" name="folder"></ion-icon> Projects </ion-breadcrumb> <ion-breadcrumb href="#user-research"> <ion-icon slot="start" name="folder"></ion-icon> User Research </ion-breadcrumb> <ion-breadcrumb> <ion-icon slot="start" name="document"></ion-icon> Survey.txt </ion-breadcrumb> </ion-breadcrumbs> <div class="wrapper"> <section> <ion-card> <ion-card-header> <ion-card-title>Card Header</ion-card-title> </ion-card-header> <ion-card-content> Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean. </ion-card-content> </ion-card> <ion-card> <ion-item> <ion-icon name="pin" slot="start"></ion-icon> ion-item in a card, icon left, button right <ion-button fill="outline" slot="end">View</ion-button> </ion-item> <ion-card-content> This is content, without any paragraph or header tags, within an ion-card-content element. </ion-card-content> </ion-card> <ion-card> <ion-item href="#" class="ion-activated"> <ion-icon name="wifi" slot="start"></ion-icon> Card Link Item 1 activated </ion-item> <ion-item href="#"> <ion-icon name="wine" slot="start"></ion-icon> Card Link Item 2 </ion-item> <ion-item button class="ion-activated"> <ion-icon name="warning" slot="start"></ion-icon> Card Button Item 1 activated </ion-item> <ion-item button class="ion-focused"> <ion-icon name="walk" slot="start"></ion-icon> Card Button Item 2 focused </ion-item> </ion-card> <ion-card> <ion-card-content> <ion-input fill="solid" label="Standard" label-placement="floating" value="Has Initial Value"> <ion-icon slot="start" name="calendar-clear-outline"></ion-icon> <ion-note slot="error">Error Text</ion-note> </ion-input> <br /> <ion-input fill="outline" helper-text="Helper text" label="Standard" label-placement="floating"> <ion-icon slot="end" name="trash"></ion-icon> </ion-input> </ion-card-content> </ion-card> </section> <section> <ion-list> <ion-item button> <ion-label>Pokémon Yellow</ion-label> <ion-note slot="end">Note</ion-note> </ion-item> <ion-item button> <ion-label>Super Metroid</ion-label> <ion-note slot="end">Note</ion-note> </ion-item> <ion-item href="#"> <ion-label>Mega Man X</ion-label> <ion-note slot="end">Note</ion-note> </ion-item> <ion-item href="#" class="ion-activated"> <ion-label>The Legend of Zelda</ion-label> <ion-note slot="end">Note</ion-note> </ion-item> <ion-item> <ion-label>Pac-Man</ion-label> <ion-note slot="end">Note</ion-note> </ion-item> <ion-item> <ion-label> <h2>Super Mario World</h2> <p>Featuring Luigi</p> </ion-label> <ion-note slot="end">Note</ion-note> </ion-item> <ion-item> <ion-label> <h2>Street Fighter II</h2> <p>The Sequel</p> </ion-label> <ion-note slot="end">Note</ion-note> </ion-item> <ion-item> <ion-label> <h2>Battle Royale Open World Pac-Man</h2> <p>More buzzwords</p> </ion-label> <ion-note slot="end">Note</ion-note> </ion-item> <ion-item-divider>Sliding Items</ion-item-divider> <ion-item-sliding> <ion-item> <ion-label>Half Life</ion-label> </ion-item> <ion-item-options> <ion-item-option>More</ion-item-option> </ion-item-options> </ion-item-sliding> <ion-item-sliding> <ion-item color="secondary"> <ion-label>Final Fantasy VII</ion-label> </ion-item> <ion-item-options> <ion-item-option>More</ion-item-option> </ion-item-options> </ion-item-sliding> <ion-item-sliding> <ion-item> <ion-label>Tetris</ion-label> </ion-item> <ion-item-options> <ion-item-option>More</ion-item-option> </ion-item-options> </ion-item-sliding> <ion-item-sliding> <ion-item> <ion-label>Donkey Kong III</ion-label> </ion-item> <ion-item-options> <ion-item-option>More</ion-item-option> </ion-item-options> </ion-item-sliding> <ion-item-sliding> <ion-item> <ion-label>Goldeneye 007</ion-label> </ion-item> <ion-item-options> <ion-item-option disabled="true">More</ion-item-option> </ion-item-options> </ion-item-sliding> </ion-list> <ion-datetime></ion-datetime> </section> <section> <ion-list> <ion-radio-group id="fruitRadio" value="grape"> <ion-item-divider> <ion-label>Fruits</ion-label> </ion-item-divider> <ion-item> <ion-radio value="apple">Apple</ion-radio> </ion-item> <ion-item> <ion-radio id="grapeChecked" value="grape" disabled>Grape, checked, disabled</ion-radio> </ion-item> <ion-item> <ion-radio color="danger" value="cherry">Cherry</ion-radio> </ion-item> </ion-radio-group> </ion-list> <ion-list> <ion-radio-group id="fruitRadio" value="lettuce"> <ion-item-divider> <ion-label>Veggies</ion-label> </ion-item-divider> <ion-item> <ion-radio color="tertiary" value="celery">Celery</ion-radio> </ion-item> <ion-item> <ion-radio color="tertiary" value="lettuce" disabled>Lettuce, checked, disabled</ion-radio> </ion-item> <ion-item> <ion-radio color="tertiary" value="onion">Onion</ion-radio> </ion-item> </ion-radio-group> </ion-list> <ion-list> <ion-item> <ion-range aria-label="Range" value="20"></ion-range> </ion-item> <ion-item> <ion-range aria-label="Range" color="success" value="20"></ion-range> </ion-item> <ion-item> <ion-range aria-label="Range" color="warning" value="20"></ion-range> </ion-item> <ion-item> <ion-range aria-label="Range" color="danger" value="20"></ion-range> </ion-item> </ion-list> </section> <section> <ion-list> <ion-item> <ion-checkbox checked>Default</ion-checkbox> </ion-item> <ion-item> <ion-checkbox color="primary" checked>Primary</ion-checkbox> </ion-item> <ion-item> <ion-checkbox color="secondary" checked>Secondary</ion-checkbox> </ion-item> <ion-item> <ion-checkbox color="warning" checked>Warning</ion-checkbox> </ion-item> <ion-item> <ion-checkbox color="danger" checked>Danger</ion-checkbox> </ion-item> <ion-item> <ion-checkbox color="light" checked>Light</ion-checkbox> </ion-item> <ion-item> <ion-checkbox color="dark" checked>Dark</ion-checkbox> </ion-item> <ion-item> <ion-checkbox>Unchecked by Default</ion-checkbox> </ion-item> <ion-item> <ion-checkbox disabled>Disabled</ion-checkbox> </ion-item> <ion-item> <ion-toggle>Blueberry</ion-toggle> </ion-item> <ion-item> <ion-toggle color="success" checked>Lettuce</ion-toggle> </ion-item> <ion-item> <ion-toggle color="danger" checked>Apple</ion-toggle> </ion-item> <ion-item> <ion-toggle color="tertiary" checked>Radish</ion-toggle> </ion-item> <ion-item> <ion-toggle color="dark" checked>Blackberry</ion-toggle> </ion-item> </ion-list> </section> </div> </ion-content> </ion-tab> <ion-tab tab="colors"> <ion-header> <ion-toolbar> <ion-title>Colors</ion-title> <div slot="end" class="right-container"> <ion-select label="Select a Theme:" interface="popover" class="theme-picker"> <ion-select-option value="default" selected>Default</ion-select-option> <ion-select-option value="dark">Dark</ion-select-option> <ion-select-option value="high-contrast">High Contrast</ion-select-option> <ion-select-option value="high-contrast-dark">High Contrast (Dark)</ion-select-option> <ion-select-option value="default" selected>Default</ion-select-option> <ion-select-option value="oceanic">Oceanic</ion-select-option> <ion-select-option value="vibrant">Vibrant</ion-select-option> </ion-select> </div> </ion-toolbar> </ion-header> <ion-content class="ion-padding"> <div class="wrapper"> <section> <p> <ion-button color="primary">Primary</ion-button> <ion-button color="secondary">Secondary</ion-button> <ion-button color="tertiary">Tertiary</ion-button> <ion-button fill="outline" color="success">Success Outline</ion-button> <ion-button fill="clear" color="warning">Warning Clear</ion-button> <ion-button color="danger">Danger</ion-button> <ion-button color="light">Light</ion-button> <ion-button color="dark">Dark</ion-button> <ion-button expand="block" fill="outline" color="medium">Medium Outline</ion-button> <ion-button expand="full" fill="clear" color="dark">Dark Clear</ion-button> </p> <p> <ion-button class="ion-focused" color="primary">Primary</ion-button> <ion-button class="ion-focused" color="secondary">Secondary</ion-button> <ion-button class="ion-focused" color="tertiary">Tertiary</ion-button> <ion-button class="ion-focused" fill="outline" color="success">Success Outline</ion-button> <ion-button class="ion-focused" fill="clear" color="warning">Warning Clear</ion-button> <ion-button class="ion-focused" color="danger">Danger</ion-button> <ion-button class="ion-focused" color="light">Light</ion-button> <ion-button class="ion-focused" color="dark">Dark</ion-button> <ion-button class="ion-focused" expand="block" fill="outline" color="medium" >Medium Outline</ion-button > <ion-button class="ion-focused" expand="full" fill="clear" color="dark">Dark Clear</ion-button> </p> <p> <ion-button class="ion-activated" color="primary">Primary</ion-button> <ion-button class="ion-activated" color="secondary">Secondary</ion-button> <ion-button class="ion-activated" color="tertiary">Tertiary</ion-button> <ion-button class="ion-activated" fill="outline" color="success">Success Outline</ion-button> <ion-button class="ion-activated" fill="clear" color="warning">Warning Clear</ion-button> <ion-button class="ion-activated" color="danger">Danger</ion-button> <ion-button class="ion-activated" color="light">Light</ion-button> <ion-button class="ion-activated" expand="block" fill="outline" color="medium" >Medium Outline</ion-button > <ion-button class="ion-activated" expand="full" fill="clear" color="dark">Dark Clear</ion-button> </p> </section> <section> <p> <ion-button>Default</ion-button> <ion-button> <ion-icon slot="icon-only" name="star"></ion-icon> </ion-button> <ion-button> <ion-icon slot="start" name="pin"></ion-icon>Map </ion-button> <ion-button shape="round">Round</ion-button> <ion-button fill="outline">Outline</ion-button> <ion-button fill="clear">Clear</ion-button> <ion-button fill="outline" expand="full">Full Outline</ion-button> <ion-button fill="clear" expand="block">Block Clear</ion-button> </p> <p> <ion-fab-button> <ion-icon name="logo-facebook"></ion-icon> </ion-fab-button> <ion-fab-button size="small"> <ion-icon name="logo-twitter"></ion-icon> </ion-fab-button> <ion-fab-button color="secondary"> <ion-icon name="logo-vimeo"></ion-icon> </ion-fab-button> <ion-fab-button color="tertiary"> <ion-icon name="logo-instagram"></ion-icon> </ion-fab-button> </p> <p> <ion-chip> <ion-label>Default</ion-label> </ion-chip> <ion-chip color="primary"> <ion-label>Primary</ion-label> </ion-chip> <ion-chip color="secondary"> <ion-label>Secondary</ion-label> </ion-chip> <ion-chip color="tertiary"> <ion-label>Tertiary</ion-label> </ion-chip> <ion-chip color="success"> <ion-label>Success</ion-label> </ion-chip> <ion-chip color="warning"> <ion-label>Warning</ion-label> </ion-chip> <ion-chip color="danger"> <ion-label>Danger</ion-label> </ion-chip> <ion-chip color="light"> <ion-label>Light</ion-label> </ion-chip> <ion-chip color="medium"> <ion-label>Medium</ion-label> </ion-chip> <ion-chip color="dark"> <ion-label>Dark</ion-label> </ion-chip> </p> <p> <ion-badge></ion-badge> <ion-badge color="primary">11</ion-badge> <ion-badge color="secondary">22</ion-badge> <ion-badge color="tertiary">33</ion-badge> <ion-badge color="success">44</ion-badge> <ion-badge color="warning">55</ion-badge> <ion-badge color="danger">66</ion-badge> <ion-badge color="light">77</ion-badge> <ion-badge color="medium">88</ion-badge> <ion-badge color="dark">99</ion-badge> </p> <p class="icon-section"> <ion-icon name="logo-ionic" color="primary"></ion-icon> <ion-icon name="logo-angular"></ion-icon> <ion-icon name="heart" color="danger"></ion-icon> <ion-icon name="logo-ionitron" color="primary"></ion-icon> <ion-icon name="happy" color="warning"></ion-icon> <ion-icon name="people"></ion-icon> <ion-icon name="person" color="tertiary"></ion-icon> <ion-icon name="person-circle"></ion-icon> <ion-icon name="apps"></ion-icon> <ion-icon name="lock-closed"></ion-icon> <ion-icon name="key" color="success"></ion-icon> <ion-icon name="lock-open"></ion-icon> <ion-icon name="map" color="secondary"></ion-icon> <ion-icon name="navigate"></ion-icon> <ion-icon name="pin"></ion-icon> <ion-icon name="locate"></ion-icon> <ion-icon name="mic"></ion-icon> <ion-icon name="musical-notes" color="warning"></ion-icon> <ion-icon name="volume-high"></ion-icon> <ion-icon name="mic" color="tertiary"></ion-icon> <ion-icon name="cafe" color="success"></ion-icon> <ion-icon name="calculator"></ion-icon> <ion-icon name="bus"></ion-icon> <ion-icon name="wine" color="danger"></ion-icon> </p> <p> <ion-breadcrumbs color="primary" max-items="4"> <ion-breadcrumb href="#" class="ion-focused"> Home </ion-breadcrumb> <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb> <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb> <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb> <ion-breadcrumb href="#film"> Film </ion-breadcrumb> <ion-breadcrumb> 35 mm </ion-breadcrumb> </ion-breadcrumbs> <ion-breadcrumbs color="secondary" max-items="4"> <ion-breadcrumb href="#" class="ion-focused"> Home </ion-breadcrumb> <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb> <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb> <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb> <ion-breadcrumb href="#film"> Film </ion-breadcrumb> <ion-breadcrumb> 35 mm </ion-breadcrumb> </ion-breadcrumbs> <ion-breadcrumbs color="danger" max-items="4"> <ion-breadcrumb href="#" class="ion-focused"> Home </ion-breadcrumb> <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb> <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb> <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb> <ion-breadcrumb href="#film"> Film </ion-breadcrumb> <ion-breadcrumb> 35 mm </ion-breadcrumb> </ion-breadcrumbs> <ion-breadcrumbs color="warning" max-items="4"> <ion-breadcrumb href="#" class="ion-focused"> Home </ion-breadcrumb> <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb> <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb> <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb> <ion-breadcrumb href="#film"> Film </ion-breadcrumb> <ion-breadcrumb> 35 mm </ion-breadcrumb> </ion-breadcrumbs> </p> </section> <section> <p> <ion-searchbar></ion-searchbar> <ion-searchbar color="primary"></ion-searchbar> <ion-searchbar color="tertiary"></ion-searchbar> <ion-searchbar color="warning"></ion-searchbar> <ion-searchbar color="light"></ion-searchbar> <ion-searchbar color="dark"></ion-searchbar> </p> <p> <ion-segment value="all"> <ion-segment-button value="all"> <ion-label>All</ion-label> </ion-segment-button> <ion-segment-button value="favorites"> <ion-label>Favorites</ion-label> </ion-segment-button> </ion-segment> <ion-segment color="primary" value="all"> <ion-segment-button value="all"> <ion-label>All</ion-label> </ion-segment-button> <ion-segment-button value="favorites"> <ion-label>Favorites</ion-label> </ion-segment-button> </ion-segment> <ion-segment color="secondary" value="all"> <ion-segment-button value="all"> <ion-label>All</ion-label> </ion-segment-button> <ion-segment-button value="favorites"> <ion-label>Favorites</ion-label> </ion-segment-button> </ion-segment> <ion-segment color="success" value="all"> <ion-segment-button value="all"> <ion-label>All</ion-label> </ion-segment-button> <ion-segment-button value="favorites"> <ion-label>Favorites</ion-label> </ion-segment-button> </ion-segment> <ion-segment color="light" value="all"> <ion-segment-button value="all"> <ion-label>All</ion-label> </ion-segment-button> <ion-segment-button value="favorites"> <ion-label>Favorites</ion-label> </ion-segment-button> </ion-segment> <ion-segment color="medium" value="all"> <ion-segment-button value="all"> <ion-label>All</ion-label> </ion-segment-button> <ion-segment-button value="favorites"> <ion-label>Favorites</ion-label> </ion-segment-button> </ion-segment> </p> </section> <section> <p> <ion-toolbar> <ion-buttons slot="start"> <ion-button color="danger"> <ion-icon slot="icon-only" name="add"></ion-icon> </ion-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button> <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-button> </ion-buttons> <ion-title>Toolbar</ion-title> </ion-toolbar> <ion-toolbar color="primary"> <ion-buttons slot="start"> <ion-button color="danger"> <ion-icon slot="icon-only" name="add"></ion-icon> </ion-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button> <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-button> </ion-buttons> <ion-segment value="favorites"> <ion-segment-button value="all">All</ion-segment-button> <ion-segment-button value="favorites">Favorites</ion-segment-button> </ion-segment> </ion-toolbar> <ion-toolbar color="secondary"> <ion-buttons slot="primary"> <ion-button> <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-button> </ion-buttons> <ion-searchbar></ion-searchbar> </ion-toolbar> <ion-toolbar color="tertiary"> <ion-buttons slot="start"> <ion-button color="danger"> <ion-icon slot="icon-only" name="add"></ion-icon> </ion-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button> <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-button> </ion-buttons> <ion-title>Tertiary</ion-title> </ion-toolbar> <ion-toolbar color="success"> <ion-buttons slot="start"> <ion-button color="danger"> <ion-icon slot="icon-only" name="add"></ion-icon> </ion-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button> <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-button> </ion-buttons> <ion-title>Success</ion-title> </ion-toolbar> <ion-toolbar color="warning"> <ion-buttons slot="start"> <ion-button color="danger"> <ion-icon slot="icon-only" name="add"></ion-icon> </ion-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button> <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-button> </ion-buttons> <ion-title>Warning</ion-title> </ion-toolbar> <ion-toolbar color="danger"> <ion-buttons slot="primary"> <ion-button> <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-button> </ion-buttons> <ion-searchbar></ion-searchbar> </ion-toolbar> <ion-toolbar color="light"> <ion-buttons slot="start"> <ion-button color="danger"> <ion-icon slot="icon-only" name="add"></ion-icon> </ion-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button> <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-button> </ion-buttons> <ion-segment value="favorites"> <ion-segment-button value="all">All</ion-segment-button> <ion-segment-button value="favorites">Favorites</ion-segment-button> </ion-segment> </ion-toolbar> <ion-toolbar color="medium"> <ion-buttons slot="start"> <ion-button color="danger"> <ion-icon slot="icon-only" name="add"></ion-icon> </ion-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button> <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-button> </ion-buttons> <ion-title>Medium</ion-title> </ion-toolbar> <ion-toolbar color="dark"> <ion-buttons slot="start"> <ion-button color="danger"> <ion-icon slot="icon-only" name="add"></ion-icon> </ion-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button> <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-button> </ion-buttons> <ion-title>Dark</ion-title> </ion-toolbar> </p> <p> <ion-progress-bar value="0.5"></ion-progress-bar> <ion-progress-bar value="0.5" color="secondary"></ion-progress-bar> <ion-progress-bar value="0.5" color="tertiary"></ion-progress-bar> <ion-progress-bar type="indeterminate" color="danger"></ion-progress-bar> <ion-progress-bar type="indeterminate" color="warning"></ion-progress-bar> <ion-progress-bar value="0.2" buffer="0.3" color="success"></ion-progress-bar> <ion-progress-bar value="0.5" color="light"></ion-progress-bar> <ion-progress-bar value="0.5" color="medium"></ion-progress-bar> <ion-progress-bar value="0.2" buffer="0.3" color="dark"></ion-progress-bar> </p> </section> </div> </ion-content> </ion-tab> <ion-tab tab="overlays"> <ion-header> <ion-toolbar> <ion-title>Overlays</ion-title> <div slot="end" class="right-container"> <ion-select label="Select a Palette:" interface="popover" class="palette-picker"> <ion-select-option value="default" selected>Default</ion-select-option> <ion-select-option value="dark">Dark</ion-select-option> <ion-select-option value="high-contrast">High Contrast</ion-select-option> <ion-select-option value="high-contrast-dark">High Contrast (Dark)</ion-select-option> <ion-select-option value="default" selected>Default</ion-select-option> <ion-select-option value="oceanic">Oceanic</ion-select-option> <ion-select-option value="vibrant">Vibrant</ion-select-option> </ion-select> </div> </ion-toolbar> </ion-header> <ion-content> <div class="wrapper"> <!-- <section> --> <ion-list> <ion-item button onClick="presentAlert()"> <ion-label>Present Alert</ion-label> </ion-item> <ion-item button onClick="presentActionSheet()"> <ion-label>Present Action Sheet</ion-label> </ion-item> <ion-item button onClick="presentLoading()"> <ion-label>Present Loading</ion-label> </ion-item> <ion-item button onClick="presentModal()"> <ion-label>Present Modal</ion-label> </ion-item> <ion-item button onClick="presentPopover(event)"> <ion-label>Present Popover</ion-label> </ion-item> <ion-item button onClick="presentToast()"> <ion-label>Present Toast</ion-label> </ion-item> <ion-item> <ion-label>Datetime</ion-label> <ion-datetime></ion-datetime> </ion-item> <ion-item> <ion-select label="Select"> <ion-select-option>1</ion-select-option> <ion-select-option>2</ion-select-option> <ion-select-option>3</ion-select-option> </ion-select> </ion-item> </ion-list> <!-- </section> --> </div> </ion-content> </ion-tab> </ion-tabs> </ion-app> <script> const selects = document.querySelectorAll('.palette-picker'); for (let i = 0; i < selects.length; i++) { selects[i].addEventListener('ionChange', (ev) => { const palette = event.detail && event.detail.value; togglePalette(palette); }); } function togglePalette(palette) { // The path to the directory containing the // custom palette files for this test var paletteFilesDir = '/src/themes/test/css-variables/css'; let modifier = ''; // The default and dark palettes are official Ionic // palettes so they are located outside of this test switch (palette) { case 'dark': case 'high-contrast': case 'high-contrast-dark': paletteFilesDir = '/css/palettes'; modifier = '.always'; break; default: break; } var cssFile = `${paletteFilesDir}/${palette}${modifier}.css`; var oldLink = document.getElementById('palette'); var newLink = document.createElement('link'); newLink.setAttribute('id', 'palette'); newLink.setAttribute('rel', 'stylesheet'); newLink.setAttribute('type', 'text/css'); // The default light palette is built in to Ionic, so no need to import a separate stylesheet if (palette !== 'default') { newLink.setAttribute('href', cssFile); } document.getElementsByTagName('head').item(0).replaceChild(newLink, oldLink); for (let i = 0; i < selects.length; i++) { selects[i].value = palette; } } async function presentAlert() { const alert = Object.assign(document.createElement('ion-alert'), { header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', buttons: ['OK'], }); document.body.appendChild(alert); return await alert.present(); } async function presentActionSheet() { const actionSheet = Object.assign(document.createElement('ion-action-sheet'), { header: 'Albums', buttons: [ { text: 'Delete', role: 'destructive', icon: 'trash', handler: () => { console.log('Delete clicked'); }, }, { text: 'Share', icon: 'share', handler: () => { console.log('Share clicked'); }, }, { text: 'Play (open modal)', icon: 'chevron-forward-circle', handler: () => { console.log('Play clicked'); }, }, { text: 'Favorite', icon: 'heart', handler: () => { console.log('Favorite clicked'); }, }, { text: 'Cancel', icon: 'close', role: 'cancel', handler: () => { console.log('Cancel clicked'); }, }, ], }); document.body.appendChild(actionSheet); await actionSheet.present(); } async function presentLoading() { const loading = Object.assign(document.createElement('ion-loading'), { message: 'Hellooo', duration: 2000, }); document.body.appendChild(loading); await loading.present(); const { role, data } = await loading.onDidDismiss(); console.log('Loading dismissed!'); } async function createModal() { // initialize controller // create component to open const element = document.createElement('div'); element.innerHTML = ` <ion-header translucent="true"> <ion-toolbar> <ion-title>Super Modal</ion-title> <ion-buttons slot="start"> <ion-button class="dismiss">Close</ion-button> </ion-buttons> </ion-toolbar> </ion-header> <ion-content fullscreen="true"> <ion-header collapse="condense"> <ion-toolbar> <ion-title size="large">Super Modal</ion-title> </ion-toolbar> </ion-header> <br /> <div> <ion-list> <ion-item> <ion-label>Item A</ion-label> </ion-item> <ion-item> <ion-label>Item B</ion-label> </ion-item> <ion-item> <ion-label>Item C</ion-label> </ion-item> </ion-list> </div> </ion-content> `; // present the modal const modalElement = Object.assign(document.createElement('ion-modal'), { component: element, presentingElement: document.querySelector('ion-tabs'), }); // listen for close event const button = element.querySelector('ion-button'); button.addEventListener('click', () => { modalElement.dismiss(); }); document.body.appendChild(modalElement); return modalElement; } async function presentModal() { const modal = await createModal(); await modal.present(); } async function presentPopover(event) { const popoverElement = Object.assign(document.createElement('ion-popover'), { component: 'profile-page', event: event, }); document.body.appendChild(popoverElement); return await popoverElement.present(); } class ProfilePage extends HTMLElement { constructor() { super(); } connectedCallback() { this.innerHTML = ` <ion-content> <ion-list> <ion-list-header> <ion-label> Ionic </ion-label> </ion-list-header> <ion-item><ion-label>Item 0</ion-label></ion-item> <ion-item><ion-label>Item 1</ion-label></ion-item> <ion-item><ion-label>Item 2</ion-label></ion-item> <ion-item><ion-label>Item 3</ion-label></ion-item> </ion-list> </ion-content> `; } } customElements.define('profile-page', ProfilePage); async function presentToast() { const toast = Object.assign(document.createElement('ion-toast'), { message: 'Hello world!', buttons: [{ text: 'Close', role: 'close' }], }); document.body.appendChild(toast); await toast.present(); } </script> </body> </html>