mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(components): consistent css variables for size (#16600)
Reviews the `--width` and `--height` variables in each component to either remove or add them based on need. - fixes a bug where the spinner color wasn't being set properly in loading - adds css variables for customizing background, color, some borders in overlays - fixes a bug where prefix, suffix are taking up too much width in picker closes #16097 references ionic-team/ionic-docs#228 BREAKING CHANGES ## Core Components Removes the `--width` and `--height` variables from the following components, in favor of CSS: - Button - FAB Button - Checkbox - Removes the `--width`/`--height` and adds a `--size` variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable - Radio - Removes the `--width`/`--height` and `--inner-width`/`--inner-height` variables. Calculates inner values based on parent element size. ## Overlay Components The following components have all be converted to shadow (or scoped) and have CSS variables for width/height: - Action Sheet _(scoped)_ - Alert _(scoped)_ - Loading _(scoped)_ - Menu _(shadow)_ - Modal _(scoped)_ - Picker _(scoped)_ - Popover _(scoped)_ - Toast _(shadow)_ The above components will now have the following CSS variables for consistency among overlays: | Name | | ----------------- | | `--height` | | `--max-height` | | `--max-width` | | `--min-height` | | `--min-width` | | `--width` | If the component does not set the value, it will default to `auto`. ## Removed CSS Variables The following CSS properties have been removed: | Component | Property | Reason | | ---------------| --------------------| --------------------------------| | **Button** | `--height` | Use CSS instead | | **Button** | `--margin-bottom` | Use CSS instead | | **Button** | `--margin-end` | Use CSS instead | | **Button** | `--margin-start` | Use CSS instead | | **Button** | `--margin-top` | Use CSS instead | | **Button** | `--width` | Use CSS instead | | **Checkbox** | `--height` | Use CSS or `--size` | | **Checkbox** | `--width` | Use CSS or `--size` | | **FAB Button** | `--width` | Use CSS instead | | **FAB Button** | `--height` | Use CSS instead | | **FAB Button** | `--margin-bottom` | Use CSS instead | | **FAB Button** | `--margin-end` | Use CSS instead | | **FAB Button** | `--margin-start` | Use CSS instead | | **FAB Button** | `--margin-top | Use CSS instead | | **Menu** | `--width-small` | Use a media query and `--width` | | **Radio** | `--width` | Use CSS instead | | **Radio** | `--height` | Use CSS instead | | **Radio** | `--inner-height` | Calculated based on parent | | **Radio** | `--inner-width` | Calculated based on parent |
This commit is contained in:
Brandy Carney
@@ -5,6 +5,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--background: #{$action-sheet-ios-background-color};
|
||||
--background-selected: #{var(--background, $action-sheet-ios-button-background-selected)};
|
||||
--background-activated: #{$action-sheet-ios-button-background-activated};
|
||||
|
||||
text-align: $action-sheet-ios-text-align;
|
||||
}
|
||||
|
||||
@@ -27,8 +31,6 @@
|
||||
.action-sheet-group {
|
||||
@include border-radius($action-sheet-ios-border-radius);
|
||||
@include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
|
||||
|
||||
background: $action-sheet-ios-background-color;
|
||||
}
|
||||
|
||||
.action-sheet-group:first-child {
|
||||
@@ -57,7 +59,7 @@
|
||||
|
||||
border-bottom: $action-sheet-ios-title-border-width $action-sheet-ios-title-border-style $action-sheet-ios-title-border-color;
|
||||
|
||||
color: $action-sheet-ios-title-color;
|
||||
color: var(--color, $action-sheet-ios-title-color);
|
||||
|
||||
font-size: $action-sheet-ios-title-font-size;
|
||||
font-weight: $action-sheet-ios-title-font-weight;
|
||||
@@ -83,8 +85,8 @@
|
||||
|
||||
border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-border-color;
|
||||
|
||||
background: $action-sheet-ios-button-background;
|
||||
color: $action-sheet-ios-button-text-color;
|
||||
background: transparent;
|
||||
color: var(--color, $action-sheet-ios-button-text-color);
|
||||
|
||||
font-size: $action-sheet-ios-button-font-size;
|
||||
|
||||
@@ -104,15 +106,11 @@
|
||||
.action-sheet-button.activated {
|
||||
@include margin(-$action-sheet-ios-button-border-width, null, null, null);
|
||||
|
||||
border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
|
||||
border-bottom-color: $action-sheet-ios-button-background-activated;
|
||||
|
||||
background: $action-sheet-ios-button-background-activated;
|
||||
border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style var(--background-activated);
|
||||
border-bottom-color: var(--background-activated);
|
||||
}
|
||||
|
||||
.action-sheet-selected {
|
||||
background: $action-sheet-ios-button-background-selected;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -121,7 +119,7 @@
|
||||
}
|
||||
|
||||
.action-sheet-cancel {
|
||||
background: $action-sheet-ios-button-cancel-background;
|
||||
background: var(--background-selected);
|
||||
|
||||
font-weight: $action-sheet-ios-button-cancel-font-weight;
|
||||
}
|
||||
|
||||
@@ -4,12 +4,18 @@
|
||||
// Material Design Action Sheet Title
|
||||
// -----------------------------------------
|
||||
|
||||
:host {
|
||||
--background: #{$action-sheet-md-background-color};
|
||||
--background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
|
||||
--background-activated: var(--background);
|
||||
}
|
||||
|
||||
.action-sheet-title {
|
||||
@include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start);
|
||||
|
||||
height: $action-sheet-md-title-height;
|
||||
|
||||
color: $action-sheet-md-title-color;
|
||||
color: var(--color, $action-sheet-md-title-color);
|
||||
|
||||
font-size: $action-sheet-md-title-font-size;
|
||||
|
||||
@@ -26,10 +32,6 @@
|
||||
// Material Design Action Sheet Group
|
||||
// -----------------------------------------
|
||||
|
||||
.action-sheet-group {
|
||||
background-color: $action-sheet-md-background-color;
|
||||
}
|
||||
|
||||
.action-sheet-group:first-child {
|
||||
@include padding($action-sheet-md-padding-top, null, null, null);
|
||||
}
|
||||
@@ -49,8 +51,8 @@
|
||||
|
||||
height: $action-sheet-md-button-height;
|
||||
|
||||
background: $action-sheet-md-button-background;
|
||||
color: $action-sheet-md-button-text-color;
|
||||
background: transparent;
|
||||
color: var(--color, $action-sheet-md-button-text-color);
|
||||
|
||||
font-size: $action-sheet-md-button-font-size;
|
||||
|
||||
@@ -64,7 +66,7 @@
|
||||
@include padding(null, null, 4px, null);
|
||||
@include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
|
||||
|
||||
color: $action-sheet-md-icon-color;
|
||||
color: var(--color, $action-sheet-md-icon-color);
|
||||
|
||||
font-size: $action-sheet-md-icon-font-size;
|
||||
}
|
||||
@@ -74,7 +76,5 @@
|
||||
}
|
||||
|
||||
.action-sheet-selected {
|
||||
background-color: $action-sheet-md-button-background-selected;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -5,11 +5,26 @@
|
||||
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the action sheet group
|
||||
* @prop --background-activated: Background of the activated action sheet button
|
||||
* @prop --background-selected: Background of the selected action sheet button
|
||||
* @prop --color: Color of the action sheet text
|
||||
*
|
||||
* @prop --min-width: Minimum width of the action sheet
|
||||
* @prop --width: Width of the action sheet
|
||||
* @prop --max-width: Maximum width of the action sheet
|
||||
*
|
||||
* @prop --min-height: Minimum height of the action sheet
|
||||
* @prop --height: height of the action sheet
|
||||
* @prop --max-height: Maximum height of the action sheet
|
||||
*/
|
||||
--color: initial;
|
||||
--min-width: auto;
|
||||
--width: #{$action-sheet-width};
|
||||
--max-width: #{$action-sheet-max-width};
|
||||
--min-height: auto;
|
||||
--height: auto;
|
||||
--max-height: auto;
|
||||
|
||||
@include font-smoothing();
|
||||
@include position(0, 0, 0, 0);
|
||||
@@ -25,7 +40,7 @@
|
||||
}
|
||||
|
||||
.action-sheet-wrapper {
|
||||
@include position(0, 0, 0, 0);
|
||||
@include position(null, 0, 0, 0);
|
||||
@include margin(auto);
|
||||
@include transform(translate3d(0, 100%, 0));
|
||||
|
||||
@@ -33,14 +48,19 @@
|
||||
position: absolute;
|
||||
|
||||
width: var(--width);
|
||||
min-width: var(--min-width);
|
||||
max-width: var(--max-width);
|
||||
|
||||
height: var(--height);
|
||||
min-height: var(--min-height);
|
||||
max-height: var(--max-height);
|
||||
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.action-sheet-button {
|
||||
width: var(--width);
|
||||
width: 100%;
|
||||
|
||||
border: 0;
|
||||
|
||||
@@ -49,6 +69,10 @@
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.action-sheet-button.activated {
|
||||
background: var(--background-activated);
|
||||
}
|
||||
|
||||
.action-sheet-button-inner {
|
||||
display: flex;
|
||||
|
||||
@@ -77,6 +101,8 @@
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
pointer-events: all;
|
||||
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.action-sheet-group::-webkit-scrollbar {
|
||||
@@ -88,3 +114,7 @@
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.action-sheet-selected {
|
||||
background: var(--background-selected);
|
||||
}
|
||||
@@ -205,10 +205,18 @@ Type: `Promise<void>`
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ------------- | --------------------------------- |
|
||||
| `--max-width` | Maximum width of the action sheet |
|
||||
| `--width` | Width of the action sheet |
|
||||
| Name | Description |
|
||||
| ------------------------ | ----------------------------------------------- |
|
||||
| `--background` | Background of the action sheet group |
|
||||
| `--background-activated` | Background of the activated action sheet button |
|
||||
| `--background-selected` | Background of the selected action sheet button |
|
||||
| `--color` | Color of the action sheet text |
|
||||
| `--height` | height of the action sheet |
|
||||
| `--max-height` | Maximum height of the action sheet |
|
||||
| `--max-width` | Maximum width of the action sheet |
|
||||
| `--min-height` | Minimum height of the action sheet |
|
||||
| `--min-width` | Minimum width of the action sheet |
|
||||
| `--width` | Width of the action sheet |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Action Sheet - Custom CSS Class</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Action Sheet - Custom CSS Class</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-action-sheet-controller></ion-action-sheet-controller>
|
||||
|
||||
<ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--ion-safe-area-top: 20px;
|
||||
--ion-safe-area-bottom: 40px;
|
||||
}
|
||||
.my-custom-class {
|
||||
--max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
async function presentWithCssClass() {
|
||||
const actionSheetController = document.querySelector('ion-action-sheet-controller');
|
||||
await actionSheetController.componentOnReady();
|
||||
const actionSheetElement = await actionSheetController.create({
|
||||
header: "Custom Css Class",
|
||||
cssClass: "my-class my-custom-class",
|
||||
buttons: [
|
||||
{
|
||||
text: 'Test',
|
||||
role: 'test',
|
||||
cssClass: 'my-cancel-button my-custom-button customClass',
|
||||
handler: () => {
|
||||
console.log('Cancel clicked');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
await actionSheetElement.present();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,11 +1,11 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('action-sheet: cssClass', async () => {
|
||||
test('action-sheet: custom', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: `/src/components/action-sheet/test/custom-css?ionic:_testing=true`
|
||||
url: `/src/components/action-sheet/test/custom?ionic:_testing=true`
|
||||
});
|
||||
|
||||
const presentBtn = await page.find('#cssClass');
|
||||
const presentBtn = await page.find('#custom');
|
||||
await presentBtn.click();
|
||||
|
||||
const actionSheet = await page.find('ion-action-sheet');
|
||||
121
core/src/components/action-sheet/test/custom/index.html
Normal file
121
core/src/components/action-sheet/test/custom/index.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Action Sheet - Custom CSS Class</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Action Sheet - Custom CSS Class</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-action-sheet-controller></ion-action-sheet-controller>
|
||||
|
||||
<ion-button expand="block" id="custom" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
|
||||
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
|
||||
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
|
||||
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
|
||||
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
|
||||
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--ion-safe-area-top: 20px;
|
||||
--ion-safe-area-bottom: 40px;
|
||||
}
|
||||
|
||||
.my-color-class {
|
||||
--background: #292929;
|
||||
--background-selected: #222222;
|
||||
|
||||
--color: #dfdfdf;;
|
||||
}
|
||||
|
||||
.my-custom-class {
|
||||
--max-width: 300px;
|
||||
--height: 325px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
async function presentWithCssClass() {
|
||||
const actionSheetController = document.querySelector('ion-action-sheet-controller');
|
||||
await actionSheetController.componentOnReady();
|
||||
const actionSheetElement = await actionSheetController.create({
|
||||
header: "Custom Css Class",
|
||||
cssClass: "my-color-class my-custom-class",
|
||||
buttons: [
|
||||
{
|
||||
text: 'Add to Favorites',
|
||||
icon: 'star',
|
||||
cssClass: 'my-custom-button customClass activated',
|
||||
handler: () => {
|
||||
console.log('Add to Favorites clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Duplicate',
|
||||
icon: 'copy',
|
||||
handler: () => {
|
||||
console.log('Duplicate clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Move to Album',
|
||||
icon: 'move',
|
||||
handler: () => {
|
||||
console.log('Move to Album clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Delete',
|
||||
icon: 'trash',
|
||||
role: 'destructive',
|
||||
handler: () => {
|
||||
console.log('Delete clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel', // will always sort to be on the bottom
|
||||
handler: () => {
|
||||
console.log('Delete clicked');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
await actionSheetElement.present();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -6,10 +6,19 @@
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the alert
|
||||
*
|
||||
* @prop --min-width: Minimum width of the alert
|
||||
* @prop --width: Width of the alert
|
||||
* @prop --max-width: Maximum width of the alert
|
||||
*
|
||||
* @prop --min-height: Minimum height of the alert
|
||||
* @prop --height: Height of the alert
|
||||
* @prop --max-height: Maximum height of the alert
|
||||
*/
|
||||
--min-width: #{$alert-min-width};
|
||||
--width: auto;
|
||||
--min-height: auto;
|
||||
--height: auto;
|
||||
--max-height: #{$alert-max-height};
|
||||
|
||||
@include font-smoothing();
|
||||
@@ -40,9 +49,12 @@
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: var(--width);
|
||||
min-width: var(--min-width);
|
||||
max-width: var(--max-width);
|
||||
|
||||
height: var(--height);
|
||||
min-height: var(--min-height);
|
||||
max-height: var(--max-height);
|
||||
|
||||
background: var(--background);
|
||||
|
||||
@@ -613,8 +613,12 @@ Type: `Promise<void>`
|
||||
| Name | Description |
|
||||
| -------------- | --------------------------- |
|
||||
| `--background` | Background of the alert |
|
||||
| `--height` | Height of the alert |
|
||||
| `--max-height` | Maximum height of the alert |
|
||||
| `--max-width` | Maximum width of the alert |
|
||||
| `--min-height` | Minimum height of the alert |
|
||||
| `--min-width` | Minimum width of the alert |
|
||||
| `--width` | Width of the alert |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -102,8 +102,9 @@
|
||||
}
|
||||
|
||||
.wide {
|
||||
--width: 200px;
|
||||
--background: lightblue;
|
||||
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.large {
|
||||
|
||||
@@ -7,17 +7,16 @@
|
||||
|
||||
:host {
|
||||
--border-radius: #{$button-ios-border-radius};
|
||||
--margin-top: #{$button-ios-margin-top};
|
||||
--margin-bottom: #{$button-ios-margin-bottom};
|
||||
--margin-start: #{$button-ios-margin-start};
|
||||
--margin-end: #{$button-ios-margin-end};
|
||||
--padding-top: #{$button-ios-padding-top};
|
||||
--padding-bottom: #{$button-ios-padding-bottom};
|
||||
--padding-start: #{$button-ios-padding-start};
|
||||
--padding-end: #{$button-ios-padding-end};
|
||||
--height: #{$button-ios-height};
|
||||
--transition: background-color, opacity 100ms linear;
|
||||
|
||||
@include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
|
||||
|
||||
height: #{$button-ios-height};
|
||||
|
||||
font-size: #{$button-ios-font-size};
|
||||
font-weight: #{$button-ios-font-weight};
|
||||
|
||||
@@ -89,7 +88,8 @@
|
||||
--padding-start: #{$button-ios-large-padding-start};
|
||||
--padding-end: #{$button-ios-large-padding-end};
|
||||
--padding-bottom: #{$button-ios-large-padding-bottom};
|
||||
--height: #{$button-ios-large-height};
|
||||
|
||||
height: #{$button-ios-large-height};
|
||||
|
||||
font-size: #{$button-ios-large-font-size};
|
||||
}
|
||||
@@ -100,7 +100,8 @@
|
||||
--padding-start: #{$button-ios-small-padding-start};
|
||||
--padding-end: #{$button-ios-small-padding-end};
|
||||
--padding-bottom: #{$button-ios-small-padding-bottom};
|
||||
--height: #{$button-ios-small-height};
|
||||
|
||||
height: #{$button-ios-small-height};
|
||||
|
||||
font-size: #{$button-ios-small-font-size};
|
||||
}
|
||||
|
||||
@@ -6,19 +6,18 @@
|
||||
|
||||
:host {
|
||||
--border-radius: #{$button-md-border-radius};
|
||||
--margin-top: #{$button-md-margin-top};
|
||||
--margin-bottom: #{$button-md-margin-bottom};
|
||||
--margin-start: #{$button-md-margin-start};
|
||||
--margin-end: #{$button-md-margin-end};
|
||||
--padding-top: #{$button-md-padding-top};
|
||||
--padding-bottom: #{$button-md-padding-bottom};
|
||||
--padding-start: #{$button-md-padding-start};
|
||||
--padding-end: #{$button-md-padding-end};
|
||||
--height: #{$button-md-height};
|
||||
--transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
|
||||
background-color 15ms linear,
|
||||
color 15ms linear;
|
||||
|
||||
@include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start);
|
||||
|
||||
height: #{$button-md-height};
|
||||
|
||||
font-size: #{$button-md-font-size};
|
||||
font-weight: #{$button-md-font-weight};
|
||||
|
||||
@@ -88,7 +87,8 @@
|
||||
--padding-start: #{$button-md-large-padding-start};
|
||||
--padding-end: #{$button-md-large-padding-end};
|
||||
--padding-bottom: #{$button-md-large-padding-bottom};
|
||||
--height: #{$button-md-large-height};
|
||||
|
||||
height: #{$button-md-large-height};
|
||||
|
||||
font-size: #{$button-md-large-font-size};
|
||||
}
|
||||
@@ -98,7 +98,8 @@
|
||||
--padding-start: #{$button-md-small-padding-start};
|
||||
--padding-end: #{$button-md-small-padding-end};
|
||||
--padding-bottom: #{$button-md-small-padding-bottom};
|
||||
--height: #{$button-md-small-height};
|
||||
|
||||
height: #{$button-md-small-height};
|
||||
|
||||
font-size: #{$button-md-small-font-size};
|
||||
}
|
||||
|
||||
@@ -13,9 +13,6 @@
|
||||
* @prop --color-activated: Text color of the button when activated
|
||||
* @prop --color-focused: Text color of the button when focused
|
||||
*
|
||||
* @prop --width: Width of the button
|
||||
* @prop --height: Height of the button
|
||||
*
|
||||
* @prop --transition: Transition of the button
|
||||
*
|
||||
* @prop --border-radius: Border radius of the button
|
||||
@@ -28,17 +25,11 @@
|
||||
* @prop --box-shadow: Box shadow of the button
|
||||
* @prop --opacity: Opacity of the button
|
||||
*
|
||||
* @prop --margin-top: Margin top of the button
|
||||
* @prop --margin-end: Margin end of the button
|
||||
* @prop --margin-bottom: Margin bottom of the button
|
||||
* @prop --margin-start: Margin start of the button
|
||||
*
|
||||
* @prop --padding-top: Padding top of the button
|
||||
* @prop --padding-end: Padding end of the button
|
||||
* @prop --padding-bottom: Padding bottom of the button
|
||||
* @prop --padding-start: Padding start of the button
|
||||
*/
|
||||
--width: auto;
|
||||
--overflow: hidden;
|
||||
--ripple-color: currentColor;
|
||||
--border-width: initial;
|
||||
@@ -48,10 +39,11 @@
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: auto;
|
||||
|
||||
color: var(--color);
|
||||
|
||||
font-family: $font-family-base;
|
||||
pointer-events: auto;
|
||||
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
@@ -62,6 +54,7 @@
|
||||
user-select: none;
|
||||
vertical-align: top; // the better option for most scenarios
|
||||
vertical-align: -webkit-baseline-middle; // the best for those that support it
|
||||
pointer-events: auto;
|
||||
|
||||
font-kerning: none;
|
||||
}
|
||||
@@ -199,15 +192,15 @@
|
||||
.button-native {
|
||||
@include border-radius(var(--border-radius));
|
||||
@include font-smoothing();
|
||||
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
|
||||
@include margin(0);
|
||||
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
@include text-inherit();
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
transition: var(--transition);
|
||||
|
||||
|
||||
@@ -133,11 +133,6 @@ This attribute specifies the size of the button. Setting this attribute will cha
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-activated` | Text color of the button when activated |
|
||||
| `--color-focused` | Text color of the button when focused |
|
||||
| `--height` | Height of the button |
|
||||
| `--margin-bottom` | Margin bottom of the button |
|
||||
| `--margin-end` | Margin end of the button |
|
||||
| `--margin-start` | Margin start of the button |
|
||||
| `--margin-top` | Margin top of the button |
|
||||
| `--opacity` | Opacity of the button |
|
||||
| `--padding-bottom` | Padding bottom of the button |
|
||||
| `--padding-end` | Padding end of the button |
|
||||
@@ -145,7 +140,6 @@ This attribute specifies the size of the button. Setting this attribute will cha
|
||||
| `--padding-top` | Padding top of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
| `--width` | Width of the button |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
|
||||
<style>
|
||||
.wide {
|
||||
--width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.large {
|
||||
@@ -80,8 +80,8 @@
|
||||
}
|
||||
|
||||
.round {
|
||||
--width: 60px;
|
||||
--height: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
--border-radius: 50%;
|
||||
--vertical-align: middle;
|
||||
|
||||
|
||||
@@ -10,7 +10,8 @@
|
||||
--padding-bottom: 0;
|
||||
--padding-start: 5px;
|
||||
--padding-end: 5px;
|
||||
--height: 32px;
|
||||
|
||||
height: 32px;
|
||||
|
||||
font-size: #{$toolbar-ios-button-font-size};
|
||||
font-weight: 400;
|
||||
@@ -77,11 +78,6 @@
|
||||
|
||||
// min-width: 36px;
|
||||
|
||||
// --margin-top: 0;
|
||||
// --margin-bottom: 0;
|
||||
// --margin-start: 6px;
|
||||
// --margin-end: 6px;
|
||||
|
||||
// --padding-top: 0;
|
||||
// --padding-bottom: 0;
|
||||
// --padding-start: 0;
|
||||
|
||||
@@ -9,9 +9,10 @@
|
||||
--padding-bottom: 0;
|
||||
--padding-start: 8px;
|
||||
--padding-end: 8px;
|
||||
--height: 32px;
|
||||
--box-shadow: none;
|
||||
|
||||
height: 32px;
|
||||
|
||||
font-size: #{$toolbar-md-button-font-size};
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -14,10 +14,6 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
::slotted(*) ion-button {
|
||||
--margin-top: 0;
|
||||
--margin-bottom: 0;
|
||||
--margin-start: 0;
|
||||
--margin-end: 0;
|
||||
--padding-top: 0;
|
||||
--padding-bottom: 0;
|
||||
--padding-start: 0;
|
||||
@@ -25,5 +21,6 @@
|
||||
--box-shadow: none;
|
||||
--overflow: visible;
|
||||
|
||||
@include margin(0);
|
||||
@include margin-horizontal(2px, 2px);
|
||||
}
|
||||
|
||||
@@ -5,9 +5,6 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--height: #{$checkbox-ios-icon-size};
|
||||
--width: #{$checkbox-ios-icon-size};
|
||||
|
||||
// Border
|
||||
--border-radius: #{$checkbox-ios-icon-border-radius};
|
||||
--border-width: #{$checkbox-ios-icon-border-width};
|
||||
@@ -16,6 +13,12 @@
|
||||
|
||||
// Background
|
||||
--background: #{$checkbox-ios-background-color-off};
|
||||
|
||||
// Size
|
||||
--size: #{$checkbox-ios-icon-size};
|
||||
width: var(--size);
|
||||
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -5,11 +5,8 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--height: #{$checkbox-md-icon-size};
|
||||
--width: #{$checkbox-md-icon-size};
|
||||
|
||||
// Border
|
||||
--border-radius: calc(var(--height) * .125);
|
||||
--border-radius: calc(var(--size) * .125);
|
||||
--border-width: #{$checkbox-md-icon-border-width};
|
||||
--border-style: #{$checkbox-md-icon-border-style};
|
||||
--border-color: #{$checkbox-md-icon-border-color-off};
|
||||
@@ -17,6 +14,12 @@
|
||||
// Background
|
||||
--background: #{$checkbox-md-icon-background-color-off};
|
||||
--transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing};
|
||||
|
||||
// Size
|
||||
--size: #{$checkbox-md-icon-size};
|
||||
width: var(--size);
|
||||
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
:host {
|
||||
/**
|
||||
* @prop --size: Size of the checkbox icon
|
||||
* @prop --background: Background of the checkbox icon
|
||||
* @prop --border-color: Border color of the checkbox icon
|
||||
* @prop --border-radius: Border radius of the checkbox icon
|
||||
@@ -14,8 +15,6 @@
|
||||
* @prop --background-checked: Background of the checkbox icon when checked
|
||||
* @prop --border-color-checked: Border color of the checkbox icon when checked
|
||||
* @prop --checkmark-color: Color of the checkbox checkmark when checked
|
||||
* @prop --height: Height of the checkbox icon
|
||||
* @prop --width: Width of the checkbox icon
|
||||
*/
|
||||
--background-checked: #{ion-color(primary, base)};
|
||||
--border-color-checked: #{ion-color(primary, base)};
|
||||
@@ -45,8 +44,8 @@ button {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
transition: var(--transition);
|
||||
|
||||
|
||||
@@ -129,9 +129,8 @@ export class HomePage {
|
||||
| `--border-style` | Border style of the checkbox icon |
|
||||
| `--border-width` | Border width of the checkbox icon |
|
||||
| `--checkmark-color` | Color of the checkbox checkmark when checked |
|
||||
| `--height` | Height of the checkbox icon |
|
||||
| `--size` | Size of the checkbox icon |
|
||||
| `--transition` | Transition of the checkbox icon |
|
||||
| `--width` | Width of the checkbox icon |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-checkbox checked color="dark" style="--height: 100px; --width: 100px;"></ion-checkbox>
|
||||
<ion-checkbox checked color="dark" style="--size: 100px;"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
@@ -72,7 +72,7 @@
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-checkbox checked color="dark" slot="start" style="--height: 100px; --width: 100px;"></ion-checkbox>
|
||||
<ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
|
||||
@@ -4,6 +4,12 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--transition: background-color, opacity 100ms linear;
|
||||
--ripple-color: currentColor;
|
||||
--border-radius: #{$fab-border-radius};
|
||||
--border-width: 0;
|
||||
--border-style: none;
|
||||
--border-color: initial;
|
||||
/**
|
||||
* @prop --background: Background of the button
|
||||
* @prop --background-activated: Background of the button when activated
|
||||
@@ -13,9 +19,6 @@
|
||||
* @prop --color-activated: Text color of the button when activated
|
||||
* @prop --color-focused: Text color of the button when focused
|
||||
*
|
||||
* @prop --width: Width of the button
|
||||
* @prop --height: Height of the button
|
||||
*
|
||||
* @prop --transition: Transition of the button
|
||||
*
|
||||
* @prop --border-radius: Border radius of the button
|
||||
@@ -27,30 +30,17 @@
|
||||
*
|
||||
* @prop --box-shadow: Box shadow of the button
|
||||
*
|
||||
* @prop --margin-top: Margin top of the button
|
||||
* @prop --margin-end: Margin end of the button
|
||||
* @prop --margin-bottom: Margin bottom of the button
|
||||
* @prop --margin-start: Margin start of the button
|
||||
*
|
||||
* @prop --padding-top: Padding top of the button
|
||||
* @prop --padding-end: Padding end of the button
|
||||
* @prop --padding-bottom: Padding bottom of the button
|
||||
* @prop --padding-start: Padding start of the button
|
||||
*/
|
||||
--width: #{$fab-size};
|
||||
--height: var(--width);
|
||||
--margin-start: calc((#{$fab-size} - var(--width)) / 2);
|
||||
--margin-end: calc((#{$fab-size} - var(--width)) / 2);
|
||||
--margin-top: calc((#{$fab-size} - var(--height)) / 2);
|
||||
--margin-bottom: calc((#{$fab-size} - var(--height)) / 2);
|
||||
--transition: background-color, opacity 100ms linear;
|
||||
--ripple-color: currentColor;
|
||||
--border-radius: #{$fab-border-radius};
|
||||
--border-width: 0;
|
||||
--border-style: none;
|
||||
--border-color: initial;
|
||||
@include margin(0);
|
||||
display: block;
|
||||
|
||||
width: #{$fab-size};
|
||||
height: #{$fab-size};
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
text-align: center;
|
||||
@@ -81,14 +71,13 @@
|
||||
.button-native {
|
||||
@include border-radius(var(--border-radius));
|
||||
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
|
||||
@include text-inherit();
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
transform: var(--transform);
|
||||
|
||||
@@ -105,8 +94,6 @@
|
||||
background-clip: padding-box;
|
||||
color: var(--color);
|
||||
|
||||
line-height: var(--height);
|
||||
|
||||
box-shadow: var(--box-shadow);
|
||||
contain: strict;
|
||||
cursor: pointer;
|
||||
@@ -181,7 +168,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host([mini]) {
|
||||
--width: #{$fab-mini-size};
|
||||
@include margin(($fab-size - $fab-mini-size) / 2);
|
||||
|
||||
width: #{$fab-mini-size};
|
||||
height: #{$fab-mini-size};
|
||||
}
|
||||
|
||||
// FAB Close Icon
|
||||
|
||||
@@ -75,18 +75,12 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-activated` | Text color of the button when activated |
|
||||
| `--color-focused` | Text color of the button when focused |
|
||||
| `--height` | Height of the button |
|
||||
| `--margin-bottom` | Margin bottom of the button |
|
||||
| `--margin-end` | Margin end of the button |
|
||||
| `--margin-start` | Margin start of the button |
|
||||
| `--margin-top` | Margin top of the button |
|
||||
| `--padding-bottom` | Padding bottom of the button |
|
||||
| `--padding-end` | Padding end of the button |
|
||||
| `--padding-start` | Padding start of the button |
|
||||
| `--padding-top` | Padding top of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
| `--width` | Width of the button |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -22,7 +22,10 @@
|
||||
}
|
||||
|
||||
::slotted(.fab-button-in-list) {
|
||||
--width: #{$fab-mini-size};
|
||||
@include margin(8px, 0);
|
||||
|
||||
width: #{$fab-mini-size};
|
||||
height: #{$fab-mini-size};
|
||||
|
||||
transform: scale(0);
|
||||
|
||||
@@ -32,14 +35,12 @@
|
||||
|
||||
:host(.fab-list-side-top) ::slotted(.fab-button-in-list),
|
||||
:host(.fab-list-side-bottom) ::slotted(.fab-button-in-list) {
|
||||
--margin-top: 5px;
|
||||
--margin-bottom: 5px;
|
||||
@include margin(5px, 0, 5px, 0);
|
||||
}
|
||||
|
||||
:host(.fab-list-side-start) ::slotted(.fab-button-in-list),
|
||||
:host(.fab-list-side-end) ::slotted(.fab-button-in-list) {
|
||||
--margin-start: 5px;
|
||||
--margin-end: 5px;
|
||||
@include margin(0, 5px, 0, 5px);
|
||||
}
|
||||
|
||||
::slotted(.fab-button-in-list.fab-button-show) {
|
||||
|
||||
@@ -96,7 +96,8 @@
|
||||
--padding-bottom: 0px;
|
||||
--padding-start: .5em;
|
||||
--padding-end: .5em;
|
||||
--height: 24px;
|
||||
|
||||
height: 24px;
|
||||
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -212,7 +212,8 @@
|
||||
--padding-bottom: 0;
|
||||
--padding-start: .6em;
|
||||
--padding-end: .6em;
|
||||
--height: 25px;
|
||||
|
||||
height: 25px;
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -4,26 +4,27 @@
|
||||
// iOS Loading Indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
.loading-ios {
|
||||
:host {
|
||||
--background: #{$loading-ios-background-color};
|
||||
--max-width: #{$loading-ios-max-width};
|
||||
--max-height: #{$loading-ios-max-height};
|
||||
--spinner-color: #{$loading-ios-spinner-color};
|
||||
|
||||
color: $loading-ios-text-color;
|
||||
|
||||
font-size: $loading-ios-font-size;
|
||||
}
|
||||
|
||||
.loading-ios .loading-wrapper {
|
||||
.loading-wrapper {
|
||||
@include border-radius($loading-ios-border-radius);
|
||||
@include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start);
|
||||
|
||||
max-width: $loading-ios-max-width;
|
||||
max-height: $loading-ios-max-height;
|
||||
|
||||
background-color: $loading-ios-background-color;
|
||||
color: $loading-ios-text-color;
|
||||
}
|
||||
|
||||
|
||||
// iOS Translucent Loading
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-translucent-ios .loading-wrapper {
|
||||
:host(.loading-translucent) .loading-wrapper {
|
||||
background-color: $loading-ios-translucent-background-color;
|
||||
backdrop-filter: $loading-ios-translucent-filter;
|
||||
}
|
||||
@@ -32,35 +33,10 @@
|
||||
// iOS Loading Content
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-ios .loading-content {
|
||||
.loading-content {
|
||||
font-weight: $loading-ios-content-font-weight;
|
||||
}
|
||||
|
||||
.loading-ios .loading-spinner + .loading-content {
|
||||
.loading-spinner + .loading-content {
|
||||
@include margin-horizontal(16px, null);
|
||||
}
|
||||
|
||||
|
||||
// iOS Loading Spinner fill colors
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-ios .spinner-lines-ios line,
|
||||
.loading-ios .spinner-lines-small-ios line {
|
||||
stroke: $loading-ios-spinner-lines-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-bubbles circle {
|
||||
fill: $loading-ios-spinner-bubbles-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-circles circle {
|
||||
fill: $loading-ios-spinner-circles-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-crescent circle {
|
||||
stroke: $loading-ios-spinner-crescent-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-dots circle {
|
||||
fill: $loading-ios-spinner-dots-color;
|
||||
}
|
||||
|
||||
@@ -45,20 +45,5 @@ $loading-ios-content-font-weight: bold !default;
|
||||
/// @prop - Color of the loading spinner
|
||||
$loading-ios-spinner-color: $text-color-step-400 !default;
|
||||
|
||||
/// @prop - Color of the ios loading spinner
|
||||
$loading-ios-spinner-lines-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the bubbles loading spinner
|
||||
$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the circles loading spinner
|
||||
$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the crescent loading spinner
|
||||
$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the dots loading spinner
|
||||
$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Filter of the translucent loading
|
||||
$loading-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
|
||||
@@ -4,20 +4,21 @@
|
||||
// Material Design Loading Indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
.loading-md {
|
||||
:host {
|
||||
--background: #{$loading-md-background};
|
||||
--max-width: #{$loading-md-max-width};
|
||||
--max-height: #{$loading-md-max-height};
|
||||
--spinner-color: #{$loading-md-spinner-color};
|
||||
|
||||
color: $loading-md-text-color;
|
||||
|
||||
font-size: $loading-md-font-size;
|
||||
}
|
||||
|
||||
.loading-md .loading-wrapper {
|
||||
.loading-wrapper {
|
||||
@include border-radius($loading-md-border-radius);
|
||||
@include padding($loading-md-padding-top, $loading-md-padding-end, $loading-md-padding-bottom, $loading-md-padding-start);
|
||||
|
||||
max-width: $loading-md-max-width;
|
||||
max-height: $loading-md-max-height;
|
||||
|
||||
background: $loading-md-background;
|
||||
color: $loading-md-text-color;
|
||||
|
||||
box-shadow: $loading-md-box-shadow;
|
||||
}
|
||||
|
||||
@@ -25,31 +26,6 @@
|
||||
// Material Design Loading Content
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-md .loading-spinner + .loading-content {
|
||||
.loading-spinner + .loading-content {
|
||||
@include margin-horizontal(16px, null);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Loading Spinner fill colors
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-md .spinner-lines-md line,
|
||||
.loading-md .spinner-lines-small-md line {
|
||||
stroke: $loading-md-spinner-lines-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-bubbles circle {
|
||||
fill: $loading-md-spinner-bubbles-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-circles circle {
|
||||
fill: $loading-md-spinner-circles-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-crescent circle {
|
||||
stroke: $loading-md-spinner-crescent-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-dots circle {
|
||||
fill: $loading-md-spinner-dots-color;
|
||||
}
|
||||
|
||||
@@ -41,18 +41,3 @@ $loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color
|
||||
|
||||
/// @prop - Color of the loading spinner
|
||||
$loading-md-spinner-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Color of the lines loading spinner
|
||||
$loading-md-spinner-lines-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the bubbles loading spinner
|
||||
$loading-md-spinner-bubbles-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the circles loading spinner
|
||||
$loading-md-spinner-circles-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the crescent loading spinner
|
||||
$loading-md-spinner-crescent-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the dots loading spinner
|
||||
$loading-md-spinner-dots-color: $loading-md-spinner-color !default;
|
||||
|
||||
@@ -3,7 +3,25 @@
|
||||
// Loading
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-loading {
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the loading dialog
|
||||
*
|
||||
* @prop --min-width: Minimum width of the loading dialog
|
||||
* @prop --width: Width of the loading dialog
|
||||
* @prop --max-width: Maximum width of the loading dialog
|
||||
*
|
||||
* @prop --min-height: Minimum height of the loading dialog
|
||||
* @prop --height: Height of the loading dialog
|
||||
* @prop --max-height: Maximum height of the loading dialog
|
||||
*
|
||||
* @prop --spinner-color: Color of the loading spinner
|
||||
*/
|
||||
--min-width: auto;
|
||||
--width: auto;
|
||||
--min-height: auto;
|
||||
--height: auto;
|
||||
|
||||
@include font-smoothing();
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
@@ -21,15 +39,31 @@ ion-loading {
|
||||
z-index: $z-index-overlay;
|
||||
}
|
||||
|
||||
ion-loading-controller {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-wrapper {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
align-items: inherit;
|
||||
justify-content: inherit;
|
||||
|
||||
width: var(--width);
|
||||
min-width: var(--min-width);
|
||||
max-width: var(--max-width);
|
||||
|
||||
height: var(--height);
|
||||
min-height: var(--min-height);
|
||||
max-height: var(--max-height);
|
||||
|
||||
background: var(--background);
|
||||
|
||||
opacity: 0;
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
}
|
||||
|
||||
.spinner-lines,
|
||||
.spinner-lines-small,
|
||||
.spinner-bubbles,
|
||||
.spinner-circles,
|
||||
.spinner-crescent,
|
||||
.spinner-dots {
|
||||
color: var(--spinner-color);
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me
|
||||
|
||||
import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
|
||||
import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
|
||||
import { createThemedClasses, getClassMap } from '../../utils/theme';
|
||||
import { getClassMap } from '../../utils/theme';
|
||||
|
||||
import { iosEnterAnimation } from './animations/ios.enter';
|
||||
import { iosLeaveAnimation } from './animations/ios.leave';
|
||||
@@ -14,7 +14,8 @@ import { mdLeaveAnimation } from './animations/md.leave';
|
||||
styleUrls: {
|
||||
ios: 'loading.ios.scss',
|
||||
md: 'loading.md.scss'
|
||||
}
|
||||
},
|
||||
scoped: true
|
||||
})
|
||||
export class Loading implements ComponentInterface, OverlayInterface {
|
||||
private durationTimeout: any;
|
||||
@@ -183,18 +184,13 @@ export class Loading implements ComponentInterface, OverlayInterface {
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const themedClasses = this.translucent
|
||||
? createThemedClasses(this.mode, 'loading-translucent')
|
||||
: {};
|
||||
|
||||
return {
|
||||
style: {
|
||||
zIndex: 40000 + this.overlayIndex
|
||||
},
|
||||
class: {
|
||||
...createThemedClasses(this.mode, 'loading'),
|
||||
...themedClasses,
|
||||
...getClassMap(this.cssClass)
|
||||
...getClassMap(this.cssClass),
|
||||
'loading-translucent': this.translucent
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -165,6 +165,20 @@ Type: `Promise<void>`
|
||||
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ----------------- | ------------------------------------ |
|
||||
| `--background` | Background of the loading dialog |
|
||||
| `--height` | Height of the loading dialog |
|
||||
| `--max-height` | Maximum height of the loading dialog |
|
||||
| `--max-width` | Maximum width of the loading dialog |
|
||||
| `--min-height` | Minimum height of the loading dialog |
|
||||
| `--min-width` | Minimum width of the loading dialog |
|
||||
| `--spinner-color` | Color of the loading spinner |
|
||||
| `--width` | Width of the loading dialog |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -13,52 +13,52 @@
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Loading - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Loading - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
|
||||
<ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
|
||||
<ion-content padding>
|
||||
<ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
|
||||
<ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
|
||||
|
||||
<ion-loading-controller></ion-loading-controller>
|
||||
<ion-loading-controller></ion-loading-controller>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
<script>
|
||||
@@ -81,8 +81,16 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-loading .loading-wrapper {
|
||||
background: rgb(155, 221, 226);
|
||||
.custom-loading {
|
||||
--background: rgba(37, 210, 223, 0.8);
|
||||
--spinner-color: white;
|
||||
|
||||
--height: 100%;
|
||||
--max-height: auto;
|
||||
--width: 100%;
|
||||
--max-width: auto;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
f {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# ion-menu-controller
|
||||
|
||||
The MenuController makes it easy to control a Menu. Its methods can be used to display the menu, enable the menu, toggle the menu, and more. The controller will grab a reference to the menu by the side, id, or, if neither of these are passed to it, it will grab the first menu it finds.
|
||||
The Menu Controller makes it easy to control a Menu. The methods provided can be used to display the menu, enable the menu, toggle the menu, and more. The controller will grab a reference to the menu by the side, or id. if neither of these are passed to it, it will grab the first menu it finds.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -6,11 +6,21 @@
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the menu
|
||||
*
|
||||
* @prop --min-width: Minimum width of the menu
|
||||
* @prop --width: Width of the menu
|
||||
* @prop --width-small: Width of the small menu
|
||||
* @prop --max-width: Maximum width of the menu
|
||||
*
|
||||
* @prop --min-height: Minimum height of the menu
|
||||
* @prop --height: Height of the menu
|
||||
* @prop --max-height: Maximum height of the menu
|
||||
*/
|
||||
--width: #{$menu-width};
|
||||
--width-small: #{$menu-small-width};
|
||||
--min-width: auto;
|
||||
--max-width: auto;
|
||||
--height: 100%;
|
||||
--min-height: auto;
|
||||
--max-height: auto;
|
||||
--background: #{$background-color};
|
||||
|
||||
@include position(0, 0, 0, 0);
|
||||
@@ -37,7 +47,12 @@
|
||||
justify-content: space-between;
|
||||
|
||||
width: var(--width);
|
||||
height: 100%;
|
||||
min-width: var(--min-width);
|
||||
max-width: var(--max-width);
|
||||
|
||||
height: var(--height);
|
||||
min-height: var(--min-height);
|
||||
max-height: var(--max-height);
|
||||
|
||||
background: var(--background);
|
||||
|
||||
@@ -72,11 +87,9 @@ ion-backdrop {
|
||||
}
|
||||
|
||||
@media (max-width: 340px) {
|
||||
|
||||
.menu-inner {
|
||||
width: var(--width-small);
|
||||
--width: #{$menu-small-width};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -16,53 +16,192 @@ These can be controlled from the templates, or programmatically using the MenuCo
|
||||
### Angular
|
||||
|
||||
```html
|
||||
<ion-menu>
|
||||
<ion-menu side="start" menuId="first">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Menu</ion-title>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Start Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="start" menuId="custom" class="my-custom-menu">
|
||||
<ion-header>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Custom Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="end" type="push">
|
||||
<ion-header>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>End Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-router-outlet main></ion-router-outlet>
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { Component } from '@angular/core';
|
||||
import { MenuController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'menu-example',
|
||||
templateUrl: 'menu-example.html',
|
||||
styleUrls: ['./menu-example.css'],
|
||||
})
|
||||
export class MenuExample {
|
||||
|
||||
constructor(private menu: MenuController) { }
|
||||
|
||||
openFirst() {
|
||||
this.menu.enable(true, 'first');
|
||||
this.menu.open('first');
|
||||
}
|
||||
|
||||
openEnd() {
|
||||
this.menu.open('end');
|
||||
}
|
||||
|
||||
openCustom() {
|
||||
this.menu.enable(true, 'custom');
|
||||
this.menu.open('custom');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.my-custom-menu {
|
||||
--width: 500px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Javascript
|
||||
|
||||
```html
|
||||
<ion-app>
|
||||
<ion-menu side="start" content-id="menu-content">
|
||||
<ion-menu side="start" menu-id="first">
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Left Menu</ion-title>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Start Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="end" content-id="menu-content">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Hola</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
hola macho
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<div class="ion-page" id="menu-content">
|
||||
<ion-menu side="start" menu-id="custom" class="my-custom-menu">
|
||||
<ion-header>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Custom Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="end" type="push">
|
||||
<ion-header>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>End Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<div class="ion-page" main>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Menu - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
|
||||
<ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
|
||||
<ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
|
||||
</ion-content>
|
||||
</div>
|
||||
|
||||
</ion-app>
|
||||
<ion-menu-controller></ion-menu-controller>
|
||||
```
|
||||
|
||||
```javascript
|
||||
const menuCtrl = document.querySelector('ion-menu-controller');
|
||||
|
||||
function openFirst() {
|
||||
menuCtrl.enable(true, 'first');
|
||||
menuCtrl.open('first');
|
||||
}
|
||||
|
||||
function openEnd() {
|
||||
menuCtrl.open('end');
|
||||
}
|
||||
|
||||
function openCustom() {
|
||||
menuCtrl.enable(true, 'custom');
|
||||
menuCtrl.open('custom');
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.my-custom-menu {
|
||||
--width: 500px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
@@ -185,11 +324,15 @@ Type: `Promise<boolean>`
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| --------------- | ----------------------- |
|
||||
| `--background` | Background of the menu |
|
||||
| `--width` | Width of the menu |
|
||||
| `--width-small` | Width of the small menu |
|
||||
| Name | Description |
|
||||
| -------------- | -------------------------- |
|
||||
| `--background` | Background of the menu |
|
||||
| `--height` | Height of the menu |
|
||||
| `--max-height` | Maximum height of the menu |
|
||||
| `--max-width` | Maximum width of the menu |
|
||||
| `--min-height` | Minimum height of the menu |
|
||||
| `--min-width` | Minimum width of the menu |
|
||||
| `--width` | Width of the menu |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -12,9 +12,9 @@
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-menu side="start">
|
||||
<ion-menu side="start" menu-id="first">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Start Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
@@ -29,9 +29,26 @@
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="start" menu-id="custom" class="my-custom-menu">
|
||||
<ion-header>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Custom Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="end" type="push">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>End Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
@@ -53,23 +70,36 @@
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<ion-button expand="block" onclick="openStart()">Open Start Menu</ion-button>
|
||||
<ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
|
||||
<ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
|
||||
<ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
|
||||
</ion-content>
|
||||
</div>
|
||||
|
||||
</ion-app>
|
||||
<ion-menu-controller></ion-menu-controller>
|
||||
|
||||
<style>
|
||||
.my-custom-menu {
|
||||
--width: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function openStart() {
|
||||
document.querySelector('ion-menu-controller')
|
||||
.open('start');
|
||||
const menuCtrl = document.querySelector('ion-menu-controller');
|
||||
|
||||
function openFirst() {
|
||||
menuCtrl.enable(true, 'first');
|
||||
menuCtrl.open('first');
|
||||
}
|
||||
|
||||
function openEnd() {
|
||||
document.querySelector('ion-menu-controller')
|
||||
.open('end');
|
||||
menuCtrl.open('end');
|
||||
}
|
||||
|
||||
function openCustom() {
|
||||
menuCtrl.enable(true, 'custom');
|
||||
menuCtrl.open('custom');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -1,10 +1,89 @@
|
||||
```html
|
||||
<ion-menu>
|
||||
<ion-menu side="start" menuId="first">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Menu</ion-title>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Start Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="start" menuId="custom" class="my-custom-menu">
|
||||
<ion-header>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Custom Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="end" type="push">
|
||||
<ion-header>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>End Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-router-outlet main></ion-router-outlet>
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { Component } from '@angular/core';
|
||||
import { MenuController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'menu-example',
|
||||
templateUrl: 'menu-example.html',
|
||||
styleUrls: ['./menu-example.css'],
|
||||
})
|
||||
export class MenuExample {
|
||||
|
||||
constructor(private menu: MenuController) { }
|
||||
|
||||
openFirst() {
|
||||
this.menu.enable(true, 'first');
|
||||
this.menu.open('first');
|
||||
}
|
||||
|
||||
openEnd() {
|
||||
this.menu.open('end');
|
||||
}
|
||||
|
||||
openCustom() {
|
||||
this.menu.enable(true, 'custom');
|
||||
this.menu.open('custom');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.my-custom-menu {
|
||||
--width: 500px;
|
||||
}
|
||||
```
|
||||
@@ -1,33 +1,93 @@
|
||||
```html
|
||||
<ion-app>
|
||||
<ion-menu side="start" content-id="menu-content">
|
||||
<ion-menu side="start" menu-id="first">
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Left Menu</ion-title>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Start Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="end" content-id="menu-content">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Hola</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
hola macho
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<div class="ion-page" id="menu-content">
|
||||
<ion-menu side="start" menu-id="custom" class="my-custom-menu">
|
||||
<ion-header>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Custom Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="end" type="push">
|
||||
<ion-header>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>End Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<div class="ion-page" main>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Menu - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
|
||||
<ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
|
||||
<ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
|
||||
</ion-content>
|
||||
</div>
|
||||
|
||||
</ion-app>
|
||||
<ion-menu-controller></ion-menu-controller>
|
||||
```
|
||||
|
||||
```javascript
|
||||
const menuCtrl = document.querySelector('ion-menu-controller');
|
||||
|
||||
function openFirst() {
|
||||
menuCtrl.enable(true, 'first');
|
||||
menuCtrl.open('first');
|
||||
}
|
||||
|
||||
function openEnd() {
|
||||
menuCtrl.open('end');
|
||||
}
|
||||
|
||||
function openCustom() {
|
||||
menuCtrl.enable(true, 'custom');
|
||||
menuCtrl.open('custom');
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.my-custom-menu {
|
||||
--width: 500px;
|
||||
}
|
||||
```
|
||||
@@ -6,15 +6,27 @@
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the modal content
|
||||
*
|
||||
* @prop --border-color: Border color of the modal content
|
||||
* @prop --border-radius: Border radius of the modal content
|
||||
* @prop --border-width: Border width of the modal content
|
||||
* @prop --border-style: Border style of the modal content
|
||||
* @prop --height: Height of the modal content
|
||||
* @prop --width: Width of the modal content
|
||||
*
|
||||
* @prop --min-width: Minimum width of the modal
|
||||
* @prop --width: Width of the modal
|
||||
* @prop --max-width: Maximum width of the modal
|
||||
*
|
||||
* @prop --min-height: Minimum height of the modal
|
||||
* @prop --height: Height of the modal
|
||||
* @prop --max-height: Maximum height of the modal
|
||||
*
|
||||
*/
|
||||
--width: 100%;
|
||||
--min-width: auto;
|
||||
--max-width: auto;
|
||||
--height: 100%;
|
||||
--min-height: auto;
|
||||
--max-height: auto;
|
||||
--overflow: hidden;
|
||||
--border-radius: 0;
|
||||
--border-width: 0;
|
||||
@@ -37,7 +49,12 @@
|
||||
@include border-radius(var(--border-radius));
|
||||
|
||||
width: var(--width);
|
||||
min-width: var(--min-width);
|
||||
max-width: var(--max-width);
|
||||
|
||||
height: var(--height);
|
||||
min-height: var(--min-height);
|
||||
max-height: var(--max-height);
|
||||
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
|
||||
@@ -165,8 +165,12 @@ Type: `Promise<void>`
|
||||
| `--border-radius` | Border radius of the modal content |
|
||||
| `--border-style` | Border style of the modal content |
|
||||
| `--border-width` | Border width of the modal content |
|
||||
| `--height` | Height of the modal content |
|
||||
| `--width` | Width of the modal content |
|
||||
| `--height` | Height of the modal |
|
||||
| `--max-height` | Maximum height of the modal |
|
||||
| `--max-width` | Maximum width of the modal |
|
||||
| `--min-height` | Minimum height of the modal |
|
||||
| `--min-width` | Minimum width of the modal |
|
||||
| `--width` | Width of the modal |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -16,8 +16,16 @@
|
||||
--border-width: 7px 0 0 0;
|
||||
--border-color: #0d51aa;
|
||||
--border-radius: 20px 20px 0 0;
|
||||
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.custom-modal {
|
||||
--max-width: 98%;
|
||||
--height: 98%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
47
core/src/components/picker-column/picker-column.ios.scss
Normal file
47
core/src/components/picker-column/picker-column.ios.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
@import "./picker-column";
|
||||
@import "../picker/picker.ios.vars";
|
||||
|
||||
// iOS Picker Column
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-col {
|
||||
@include padding($picker-ios-column-padding-top, $picker-ios-column-padding-end, $picker-ios-column-padding-bottom, $picker-ios-column-padding-start);
|
||||
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.picker-prefix,
|
||||
.picker-suffix,
|
||||
.picker-opts {
|
||||
top: $picker-ios-option-offset-y;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
color: inherit;
|
||||
|
||||
font-size: $picker-ios-option-font-size;
|
||||
|
||||
line-height: $picker-ios-option-height;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.picker-opt {
|
||||
@include padding($picker-ios-option-padding-top, $picker-ios-option-padding-end, $picker-ios-option-padding-bottom, $picker-ios-option-padding-start);
|
||||
@include margin(0);
|
||||
@include transform-origin(center, center);
|
||||
|
||||
height: 46px;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
transition-timing-function: ease-out;
|
||||
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
|
||||
font-size: $picker-ios-option-font-size;
|
||||
|
||||
line-height: $picker-ios-option-height;
|
||||
backface-visibility: hidden;
|
||||
pointer-events: auto;
|
||||
}
|
||||
51
core/src/components/picker-column/picker-column.md.scss
Normal file
51
core/src/components/picker-column/picker-column.md.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
@import "./picker-column";
|
||||
@import "../picker/picker.md.vars";
|
||||
|
||||
// Material Design Picker Column
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-col {
|
||||
@include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start);
|
||||
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.picker-prefix,
|
||||
.picker-suffix,
|
||||
.picker-opts {
|
||||
top: $picker-md-option-offset-y;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
color: inherit;
|
||||
|
||||
font-size: $picker-md-option-font-size;
|
||||
|
||||
line-height: $picker-md-option-height;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.picker-opt {
|
||||
@include margin(0);
|
||||
@include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start);
|
||||
|
||||
height: 43px;
|
||||
|
||||
transition-timing-function: ease-out;
|
||||
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
|
||||
font-size: $picker-md-option-font-size;
|
||||
|
||||
line-height: $picker-md-option-height;
|
||||
backface-visibility: hidden;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.picker-prefix,
|
||||
.picker-suffix,
|
||||
.picker-opt.picker-opt-selected {
|
||||
color: $picker-md-option-selected-color;
|
||||
}
|
||||
101
core/src/components/picker-column/picker-column.scss
Normal file
101
core/src/components/picker-column/picker-column.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Picker Column
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-col {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
height: 100%;
|
||||
box-sizing: content-box;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.picker-opts {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// contain property is supported by Chrome
|
||||
.picker-opt {
|
||||
@include position(0, null, null, 0);
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
|
||||
border: 0;
|
||||
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
contain: strict;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.picker-opt.picker-opt-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.picker-opt-disabled {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.picker-opts-left {
|
||||
@include ltr() {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-opts-right {
|
||||
@include ltr() {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-opt {
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-prefix {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
text-align: end;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.picker-suffix {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
text-align: start;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -5,7 +5,11 @@ import { hapticSelectionChanged } from '../../utils';
|
||||
import { clamp } from '../../utils/helpers';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-picker-column'
|
||||
tag: 'ion-picker-column',
|
||||
styleUrls: {
|
||||
ios: 'picker-column.ios.scss',
|
||||
md: 'picker-column.md.scss'
|
||||
}
|
||||
})
|
||||
export class PickerColumnCmp implements ComponentInterface {
|
||||
mode!: Mode;
|
||||
|
||||
@@ -4,48 +4,47 @@
|
||||
// iOS Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-ios .picker-wrapper {
|
||||
height: $picker-ios-height;
|
||||
:host {
|
||||
--background: #{$picker-ios-background-color};
|
||||
--border-width: #{1px 0 0};
|
||||
--border-color: #{$picker-ios-border-color};
|
||||
--height: #{$picker-ios-height};
|
||||
|
||||
border-top: 1px solid $picker-ios-border-color;
|
||||
|
||||
background: $picker-ios-background-color;
|
||||
color: $picker-ios-option-text-color;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar {
|
||||
.picker-toolbar {
|
||||
display: flex;
|
||||
|
||||
height: $picker-ios-toolbar-height;
|
||||
|
||||
border-bottom: $hairlines-width solid $picker-ios-border-color;
|
||||
|
||||
background: $picker-ios-toolbar-background-color;
|
||||
border-bottom: $hairlines-width solid var(--border-color);
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-button {
|
||||
.picker-toolbar-button {
|
||||
flex: 1;
|
||||
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-button:last-child .picker-button {
|
||||
.picker-toolbar-button:last-child .picker-button {
|
||||
font-weight: $picker-ios-button-strong-font-weight;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-button:first-child {
|
||||
.picker-toolbar-button:first-child {
|
||||
font-weight: normal;
|
||||
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.picker-ios .picker-button,
|
||||
.picker-ios .picker-button.activated {
|
||||
.picker-button,
|
||||
.picker-button.activated {
|
||||
@include margin(0);
|
||||
@include padding($picker-ios-button-padding-top, $picker-ios-button-padding-end, $picker-ios-button-padding-bottom, $picker-ios-button-padding-start);
|
||||
|
||||
height: $picker-ios-button-height;
|
||||
|
||||
background: $picker-ios-button-background-color;
|
||||
background: transparent;
|
||||
color: $picker-ios-button-text-color;
|
||||
|
||||
font-size: $picker-ios-button-font-size;
|
||||
@@ -56,49 +55,7 @@
|
||||
perspective: $picker-ios-column-perspective;
|
||||
}
|
||||
|
||||
.picker-ios .picker-col {
|
||||
@include padding($picker-ios-column-padding-top, $picker-ios-column-padding-end, $picker-ios-column-padding-bottom, $picker-ios-column-padding-start);
|
||||
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.picker-ios .picker-prefix,
|
||||
.picker-ios .picker-suffix,
|
||||
.picker-ios .picker-opts {
|
||||
top: $picker-ios-option-offset-y;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
color: $picker-ios-option-text-color;
|
||||
|
||||
font-size: $picker-ios-option-font-size;
|
||||
|
||||
line-height: $picker-ios-option-height;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.picker-ios .picker-opt {
|
||||
@include padding($picker-ios-option-padding-top, $picker-ios-option-padding-end, $picker-ios-option-padding-bottom, $picker-ios-option-padding-start);
|
||||
@include margin(0);
|
||||
@include transform-origin(center, center);
|
||||
|
||||
height: 46px;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
transition-timing-function: ease-out;
|
||||
|
||||
background: transparent;
|
||||
color: $picker-ios-option-text-color;
|
||||
|
||||
font-size: $picker-ios-option-font-size;
|
||||
|
||||
line-height: $picker-ios-option-height;
|
||||
backface-visibility: hidden;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.picker-ios .picker-above-highlight {
|
||||
.picker-above-highlight {
|
||||
@include position(0, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
@@ -108,16 +65,17 @@
|
||||
width: 100%;
|
||||
height: $picker-ios-option-offset-y + 4px;
|
||||
|
||||
border-bottom: 1px solid $picker-ios-border-color;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
background: linear-gradient(to bottom,
|
||||
$picker-ios-top-background-color 20%,
|
||||
$picker-ios-bottom-background-color 100%);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
$picker-ios-top-background-color 20%,
|
||||
$picker-ios-bottom-background-color 100%);
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.picker-ios .picker-below-highlight {
|
||||
.picker-below-highlight {
|
||||
@include position($picker-ios-option-offset-y + $picker-ios-option-height - 4, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
@@ -127,11 +85,12 @@
|
||||
width: 100%;
|
||||
height: $picker-ios-option-offset-y + $picker-ios-option-height;
|
||||
|
||||
border-top: 1px solid $picker-ios-border-color;
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
background: linear-gradient(to top,
|
||||
$picker-ios-top-background-color 30%,
|
||||
$picker-ios-bottom-background-color 100%);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
$picker-ios-top-background-color 30%,
|
||||
$picker-ios-bottom-background-color 100%);
|
||||
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
@@ -13,13 +13,13 @@ $picker-ios-border-color: $item-ios-border-color !defaul
|
||||
$picker-ios-background-color: $background-color !default;
|
||||
|
||||
/// @prop - Top Background Color of the picker wrapper gradient
|
||||
$picker-ios-top-background-color: $picker-ios-background-color !default;
|
||||
$picker-ios-top-background-color: var(--background, $picker-ios-background-color) !default;
|
||||
|
||||
/// @prop - Bottom Background Color alpha of the picker wrapper gradient
|
||||
$picker-ios-bottom-background-color-alpha: .8 !default;
|
||||
|
||||
/// @prop - Bottom Background Color of the picker wrapper gradient
|
||||
$picker-ios-bottom-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha) !default;
|
||||
$picker-ios-bottom-background-color: rgba(var(--background-rgb, var(--ion-background-color-rgb, $background-color-rgb)), $picker-ios-bottom-background-color-alpha) !default;
|
||||
|
||||
/// @prop - Height of the picker toolbar
|
||||
$picker-ios-toolbar-height: 44px !default;
|
||||
@@ -33,9 +33,6 @@ $picker-ios-button-height: $picker-ios-toolbar-height !de
|
||||
/// @prop - Text color of the picker button
|
||||
$picker-ios-button-text-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background of the picker button
|
||||
$picker-ios-button-background-color: transparent !default;
|
||||
|
||||
/// @prop - Font size of the picker button
|
||||
$picker-ios-button-font-size: 16px !default;
|
||||
|
||||
|
||||
@@ -4,26 +4,25 @@
|
||||
// Material Design Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-md .picker-wrapper {
|
||||
height: $picker-md-height;
|
||||
:host {
|
||||
--background: #{$picker-md-background-color};
|
||||
--border-width: #{$hairlines-width 0 0};
|
||||
--border-color: #{$picker-md-border-color};
|
||||
--height: #{$picker-md-height};
|
||||
|
||||
border-top: $hairlines-width solid $picker-md-border-color;
|
||||
|
||||
background: $picker-md-background-color;
|
||||
color: $picker-md-option-text-color;
|
||||
}
|
||||
|
||||
.picker-md .picker-toolbar {
|
||||
.picker-toolbar {
|
||||
display: flex;
|
||||
|
||||
justify-content: flex-end;
|
||||
|
||||
height: $picker-md-toolbar-height;
|
||||
|
||||
background: $picker-md-toolbar-background-color;
|
||||
}
|
||||
|
||||
.picker-md .picker-button,
|
||||
.picker-md .picker-button.activated {
|
||||
.picker-button,
|
||||
.picker-button.activated {
|
||||
@include margin(0);
|
||||
@include padding(0, 1.1em);
|
||||
|
||||
@@ -40,58 +39,12 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.picker-md .picker-columns {
|
||||
.picker-columns {
|
||||
height: $picker-md-height - $picker-md-toolbar-height;
|
||||
perspective: 1800px;
|
||||
}
|
||||
|
||||
.picker-md .picker-col {
|
||||
@include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start);
|
||||
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.picker-md .picker-prefix,
|
||||
.picker-md .picker-suffix,
|
||||
.picker-md .picker-opts {
|
||||
top: $picker-md-option-offset-y;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
color: $picker-md-option-text-color;
|
||||
|
||||
font-size: $picker-md-option-font-size;
|
||||
|
||||
line-height: $picker-md-option-height;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.picker-md .picker-opt {
|
||||
@include margin(0);
|
||||
@include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start);
|
||||
|
||||
height: 43px;
|
||||
|
||||
transition-timing-function: ease-out;
|
||||
|
||||
background: transparent;
|
||||
color: $picker-md-option-text-color;
|
||||
|
||||
font-size: $picker-md-option-font-size;
|
||||
|
||||
line-height: $picker-md-option-height;
|
||||
backface-visibility: hidden;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.picker-md .picker-prefix,
|
||||
.picker-md .picker-suffix,
|
||||
.picker-md .picker-opt.picker-opt-selected {
|
||||
color: $picker-md-option-selected-color;
|
||||
}
|
||||
|
||||
.picker-md .picker-above-highlight {
|
||||
.picker-above-highlight {
|
||||
@include position(0, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
@@ -102,14 +55,15 @@
|
||||
|
||||
border-bottom: 1px solid $picker-md-border-color;
|
||||
|
||||
background: linear-gradient(to bottom,
|
||||
$picker-md-top-background-color 20%,
|
||||
$picker-md-bottom-background-color 100%);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
$picker-md-top-background-color 20%,
|
||||
$picker-md-bottom-background-color 100%);
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.picker-md .picker-below-highlight {
|
||||
.picker-below-highlight {
|
||||
@include position($picker-md-option-offset-y + $picker-md-option-height - 4, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
@@ -120,9 +74,10 @@
|
||||
|
||||
border-top: 1px solid $picker-md-border-color;
|
||||
|
||||
background: linear-gradient(to top,
|
||||
$picker-md-top-background-color 30%,
|
||||
$picker-md-bottom-background-color 100%);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
$picker-md-top-background-color 30%,
|
||||
$picker-md-bottom-background-color 100%);
|
||||
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
@@ -3,15 +3,40 @@
|
||||
// Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-picker {
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the picker
|
||||
* @prop --background-rgb: Background of the picker in rgb format
|
||||
*
|
||||
* @prop --border-radius: Border radius of the picker
|
||||
* @prop --border-color: Border color of the picker
|
||||
* @prop --border-width: Border width of the picker
|
||||
* @prop --border-style: Border style of the picker
|
||||
*
|
||||
* @prop --min-width: Minimum width of the picker
|
||||
* @prop --width: Width of the picker
|
||||
* @prop --max-width: Maximum width of the picker
|
||||
*
|
||||
* @prop --min-height: Minimum height of the picker
|
||||
* @prop --height: Height of the picker
|
||||
* @prop --max-height: Maximum height of the picker
|
||||
*/
|
||||
--border-radius: 0;
|
||||
--border-style: solid;
|
||||
--min-width: auto;
|
||||
--width: #{$picker-width};
|
||||
--max-width: #{$picker-max-width};
|
||||
--min-height: auto;
|
||||
--max-height: auto;
|
||||
|
||||
@include font-smoothing();
|
||||
@include position(0, null, null, 0);
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
width: $picker-width;
|
||||
height: $picker-width;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
font-family: $font-family-base;
|
||||
|
||||
@@ -20,14 +45,8 @@ ion-picker {
|
||||
z-index: $z-index-overlay;
|
||||
}
|
||||
|
||||
.picker-toolbar {
|
||||
width: 100%;
|
||||
|
||||
contain: strict;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.picker-wrapper {
|
||||
@include border-radius(var(--border-radius));
|
||||
@include position(null, 0, 0, 0);
|
||||
@include margin(auto);
|
||||
@include transform(translate3d(0, 100%, 0));
|
||||
@@ -37,14 +56,53 @@ ion-picker {
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: $picker-width;
|
||||
max-width: $picker-max-width;
|
||||
width: var(--width);
|
||||
min-width: var(--min-width);
|
||||
max-width: var(--max-width);
|
||||
|
||||
height: var(--height);
|
||||
min-height: var(--min-height);
|
||||
max-height: var(--max-height);
|
||||
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: var(--border-color);
|
||||
|
||||
background: var(--background);
|
||||
|
||||
contain: strict;
|
||||
overflow: hidden;
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
}
|
||||
|
||||
// Picker Toolbar and Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-toolbar {
|
||||
width: 100%;
|
||||
|
||||
background: transparent;
|
||||
|
||||
contain: strict;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.picker-button {
|
||||
border: 0;
|
||||
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.picker-button {
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Picker Columns and Highlight
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-columns {
|
||||
@include rtl() {
|
||||
// Date is the same format in both directions
|
||||
@@ -62,118 +120,8 @@ ion-picker {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.picker-col {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
height: 100%;
|
||||
box-sizing: content-box;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.picker-opts {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.picker-prefix {
|
||||
position: relative;
|
||||
|
||||
flex: 2;
|
||||
|
||||
min-width: 45%;
|
||||
max-width: 50%;
|
||||
|
||||
text-align: end;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.picker-suffix {
|
||||
position: relative;
|
||||
|
||||
flex: 2;
|
||||
|
||||
min-width: 45%;
|
||||
max-width: 50%;
|
||||
|
||||
text-align: start;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// contain property is supported by Chrome
|
||||
.picker-opt {
|
||||
@include position(0, null, null, 0);
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
|
||||
border: 0;
|
||||
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
contain: strict;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.picker-opt.picker-opt-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.picker-opt-disabled {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.picker-opts-left {
|
||||
@include ltr() {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-opts-right {
|
||||
@include ltr() {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-above-highlight,
|
||||
.picker-below-highlight {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.picker-button {
|
||||
border: 0;
|
||||
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.picker-opt,
|
||||
.picker-button {
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,8 @@ import { iosLeaveAnimation } from './animations/ios.leave';
|
||||
styleUrls: {
|
||||
ios: 'picker.ios.scss',
|
||||
md: 'picker.md.scss'
|
||||
}
|
||||
},
|
||||
scoped: true
|
||||
})
|
||||
export class Picker implements ComponentInterface, OverlayInterface {
|
||||
private durationTimeout: any;
|
||||
@@ -137,13 +138,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
|
||||
*/
|
||||
@Method()
|
||||
async present(): Promise<void> {
|
||||
await present(
|
||||
this,
|
||||
'pickerEnter',
|
||||
iosEnterAnimation,
|
||||
iosEnterAnimation,
|
||||
undefined
|
||||
);
|
||||
await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
|
||||
|
||||
if (this.duration > 0) {
|
||||
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
|
||||
@@ -158,14 +153,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
|
||||
if (this.durationTimeout) {
|
||||
clearTimeout(this.durationTimeout);
|
||||
}
|
||||
return dismiss(
|
||||
this,
|
||||
data,
|
||||
role,
|
||||
'pickerLeave',
|
||||
iosLeaveAnimation,
|
||||
iosLeaveAnimation
|
||||
);
|
||||
return dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -249,7 +237,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
|
||||
tappable={this.backdropDismiss}
|
||||
>
|
||||
</ion-backdrop>,
|
||||
|
||||
<div class="picker-wrapper" role="dialog">
|
||||
<div class="picker-toolbar">
|
||||
{this.buttons.map(b => (
|
||||
@@ -266,9 +253,11 @@ export class Picker implements ComponentInterface, OverlayInterface {
|
||||
</div>
|
||||
|
||||
<div class="picker-columns">
|
||||
<div class="picker-above-highlight" />
|
||||
{this.columns.map(c => <ion-picker-column col={c} />)}
|
||||
<div class="picker-below-highlight" />
|
||||
<div class="picker-above-highlight"></div>
|
||||
{this.columns.map(c =>
|
||||
<ion-picker-column col={c}></ion-picker-column>
|
||||
)}
|
||||
<div class="picker-below-highlight"></div>
|
||||
</div>
|
||||
</div>
|
||||
];
|
||||
|
||||
@@ -102,6 +102,24 @@ Type: `Promise<void>`
|
||||
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ------------------ | -------------------------------------- |
|
||||
| `--background` | Background of the picker |
|
||||
| `--background-rgb` | Background of the picker in rgb format |
|
||||
| `--border-color` | Border color of the picker |
|
||||
| `--border-radius` | Border radius of the picker |
|
||||
| `--border-style` | Border style of the picker |
|
||||
| `--border-width` | Border width of the picker |
|
||||
| `--height` | Height of the picker |
|
||||
| `--max-height` | Maximum height of the picker |
|
||||
| `--max-width` | Maximum width of the picker |
|
||||
| `--min-height` | Minimum height of the picker |
|
||||
| `--min-width` | Minimum width of the picker |
|
||||
| `--width` | Width of the picker |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
120
core/src/components/picker/test/basic/index.html
Normal file
120
core/src/components/picker/test/basic/index.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Picker - 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="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Picker - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
|
||||
<ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')">Show Custom Picker</ion-button>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
<ion-picker-controller></ion-picker-controller>
|
||||
|
||||
<style>
|
||||
.my-custom-class {
|
||||
--width: 200px;
|
||||
--height: 50%;
|
||||
|
||||
--background: #272727;
|
||||
--background-rgb: 39, 39, 39;
|
||||
--border-width: 2px;
|
||||
--border-color: #000000;
|
||||
--border-radius: 16px 16px 0 0;
|
||||
|
||||
color: #d6d6d6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
async function presentPicker(customClass) {
|
||||
const pickerController = document.querySelector('ion-picker-controller');
|
||||
await pickerController.componentOnReady();
|
||||
const pickerElement = await pickerController.create({
|
||||
buttons: [{
|
||||
text: 'Save',
|
||||
handler: () => console.log('Clicked Save!')
|
||||
}, {
|
||||
text: 'Log',
|
||||
handler: (val) => {
|
||||
console.log('Clicked Log. Do not Dismiss.', val);
|
||||
return false;
|
||||
}
|
||||
}],
|
||||
columns: [{
|
||||
name: 'hours',
|
||||
prefix: 'total',
|
||||
suffix: 'hours',
|
||||
options: [{
|
||||
text: '1',
|
||||
value: '01'
|
||||
},
|
||||
{
|
||||
text: '2',
|
||||
value: '02'
|
||||
},
|
||||
{
|
||||
text: '3',
|
||||
value: '03'
|
||||
},
|
||||
{
|
||||
text: '4',
|
||||
value: '04'
|
||||
},
|
||||
{
|
||||
text: '5',
|
||||
value: '05'
|
||||
},
|
||||
{
|
||||
text: '6',
|
||||
value: '06'
|
||||
},
|
||||
{
|
||||
text: '7',
|
||||
value: '07'
|
||||
},
|
||||
{
|
||||
text: '8',
|
||||
value: '08'
|
||||
},
|
||||
{
|
||||
text: '9',
|
||||
value: '09'
|
||||
},
|
||||
{
|
||||
text: '10',
|
||||
value: '10'
|
||||
},
|
||||
{
|
||||
text: '11',
|
||||
value: '11'
|
||||
},
|
||||
{
|
||||
text: '12',
|
||||
value: '12'
|
||||
}]
|
||||
}],
|
||||
cssClass: customClass
|
||||
});
|
||||
return await pickerElement.present();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -4,16 +4,14 @@
|
||||
// iOS Popover
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--width: #{$popover-ios-width};
|
||||
--max-height: #{$popover-ios-max-height};
|
||||
--box-shadow: none;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
@include border-radius($popover-ios-border-radius);
|
||||
|
||||
width: $popover-ios-width;
|
||||
min-width: $popover-ios-min-width;
|
||||
min-height: $popover-ios-min-height;
|
||||
max-height: $popover-ios-max-height;
|
||||
|
||||
background-color: $popover-ios-background-color;
|
||||
color: $popover-ios-text-color;
|
||||
}
|
||||
|
||||
|
||||
@@ -41,7 +39,7 @@
|
||||
|
||||
transform: rotate(45deg);
|
||||
|
||||
background-color: $popover-ios-arrow-background-color;
|
||||
background: var(--background);
|
||||
|
||||
content: "";
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
|
||||
@@ -9,32 +9,17 @@ $popover-backdrop-ios-color: $backdrop-ios-color !defau
|
||||
/// @prop - Width of the popover content
|
||||
$popover-ios-width: 200px !default;
|
||||
|
||||
/// @prop - Min width of the popover content
|
||||
$popover-ios-min-width: 0 !default;
|
||||
|
||||
/// @prop - Minimum height of the popover content
|
||||
$popover-ios-min-height: 0 !default;
|
||||
|
||||
/// @prop - Maximum height of the popover content
|
||||
$popover-ios-max-height: 90% !default;
|
||||
|
||||
/// @prop - Border radius of the popover content
|
||||
$popover-ios-border-radius: 10px !default;
|
||||
|
||||
/// @prop - Text color of the popover content
|
||||
$popover-ios-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Background of the popover content
|
||||
$popover-ios-background-color: $background-color !default;
|
||||
|
||||
/// @prop - Background color alpha of the popover content
|
||||
$popover-ios-translucent-background-color-alpha: .8 !default;
|
||||
|
||||
/// @prop - Background color of the popover content
|
||||
$popover-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $popover-ios-translucent-background-color-alpha) !default;
|
||||
|
||||
/// @prop - Background of the popover arrow
|
||||
$popover-ios-arrow-background-color: $popover-ios-background-color !default;
|
||||
|
||||
/// @prop - Filter of the translucent popover
|
||||
$popover-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
|
||||
@@ -4,22 +4,17 @@
|
||||
// Material Design Popover
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--width: #{$popover-md-width};
|
||||
--max-height: #{$popover-md-max-height};
|
||||
--box-shadow: #{$popover-md-box-shadow};
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
@include border-radius($popover-md-border-radius);
|
||||
@include transform-origin(start, top);
|
||||
|
||||
width: $popover-md-width;
|
||||
min-width: $popover-md-min-width;
|
||||
min-height: $popover-md-min-height;
|
||||
max-height: $popover-md-max-height;
|
||||
|
||||
background: $popover-md-background;
|
||||
color: $popover-md-text-color;
|
||||
|
||||
box-shadow: $popover-md-box-shadow;
|
||||
}
|
||||
|
||||
.popover-viewport {
|
||||
// opacity: 0;
|
||||
transition-delay: 100ms;
|
||||
}
|
||||
|
||||
@@ -6,23 +6,11 @@
|
||||
/// @prop - Width of the popover content
|
||||
$popover-md-width: 250px !default;
|
||||
|
||||
/// @prop - Min width of the popover content
|
||||
$popover-md-min-width: 0 !default;
|
||||
|
||||
/// @prop - Minimum height of the popover content
|
||||
$popover-md-min-height: 0 !default;
|
||||
|
||||
/// @prop - Maximum height of the popover content
|
||||
$popover-md-max-height: 90% !default;
|
||||
|
||||
/// @prop - Border radius of the popover content
|
||||
$popover-md-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Text color of the popover content
|
||||
$popover-md-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Background of the popover content
|
||||
$popover-md-background: $background-color !default;
|
||||
|
||||
/// @prop - Box shadow of the popover content
|
||||
$popover-md-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default;
|
||||
|
||||
@@ -4,6 +4,24 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the popover
|
||||
* @prop --box-shadow: Box shadow of the popover
|
||||
*
|
||||
* @prop --min-width: Minimum width of the popover
|
||||
* @prop --width: Width of the popover
|
||||
* @prop --max-width: Maximum width of the popover
|
||||
*
|
||||
* @prop --min-height: Minimum height of the popover
|
||||
* @prop --height: Height of the popover
|
||||
* @prop --max-height: Maximum height of the popover
|
||||
*/
|
||||
--background: #{$popover-background-color};
|
||||
--min-width: 0;
|
||||
--min-height: 0;
|
||||
--max-width: auto;
|
||||
--height: auto;
|
||||
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
display: flex;
|
||||
@@ -12,6 +30,8 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
color: $popover-text-color;
|
||||
|
||||
z-index: $z-index-overlay;
|
||||
}
|
||||
|
||||
@@ -26,6 +46,18 @@
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: var(--width);
|
||||
min-width: var(--min-width);
|
||||
max-width: var(--max-width);
|
||||
|
||||
height: var(--height);
|
||||
min-height: var(--min-height);
|
||||
max-height: var(--max-height);
|
||||
|
||||
background: var(--background);
|
||||
|
||||
box-shadow: var(--box-shadow);
|
||||
|
||||
overflow: auto;
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
}
|
||||
|
||||
@@ -223,9 +223,8 @@ export class Popover implements ComponentInterface, OverlayInterface {
|
||||
},
|
||||
'no-router': true,
|
||||
class: {
|
||||
'popover-translucent': this.translucent,
|
||||
|
||||
...getClassMap(this.cssClass),
|
||||
'popover-translucent': this.translucent
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1 +1,10 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Popover
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the popover content
|
||||
$popover-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Background color of the popover content
|
||||
$popover-background-color: $background-color !default;
|
||||
@@ -141,6 +141,20 @@ Type: `Promise<void>`
|
||||
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| -------------- | ----------------------------- |
|
||||
| `--background` | Background of the popover |
|
||||
| `--box-shadow` | Box shadow of the popover |
|
||||
| `--height` | Height of the popover |
|
||||
| `--max-height` | Maximum height of the popover |
|
||||
| `--max-width` | Maximum width of the popover |
|
||||
| `--min-height` | Minimum height of the popover |
|
||||
| `--min-width` | Minimum width of the popover |
|
||||
| `--width` | Width of the popover |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
<ion-button expand="block" onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</ion-button>
|
||||
<ion-button expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</ion-button>
|
||||
<ion-button expand="block" color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</ion-button>
|
||||
<ion-button expand="block" color="tertiary" onclick="presentPopover({ component: 'translucent-page', event: event, cssClass: 'my-custom-class' })">Custom Class Popover</ion-button>
|
||||
|
||||
<ion-popover-controller></ion-popover-controller>
|
||||
</ion-content>
|
||||
@@ -45,11 +46,18 @@
|
||||
</ion-footer>
|
||||
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
.my-custom-class {
|
||||
--background: rgba(40, 173, 218, .6);
|
||||
--width: 300px;
|
||||
--box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .6);
|
||||
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
// window.addEventListener('ionPopoverDidDismiss', function(e){console.log('didDismiss', e)})
|
||||
// window.addEventListener('ionPopoverWillDismiss', function(e){console.log('willDismiss', e)})
|
||||
async function presentPopover(opts) {
|
||||
const popoverController = document.querySelector('ion-popover-controller');
|
||||
await popoverController.componentOnReady();
|
||||
|
||||
@@ -6,10 +6,9 @@
|
||||
|
||||
:host {
|
||||
--color-checked: #{ion-color(primary, base)};
|
||||
--width: #{$radio-ios-icon-width};
|
||||
--height: #{$radio-ios-icon-height};
|
||||
--inner-width: 5px;
|
||||
--inner-height: 12px;
|
||||
|
||||
width: $radio-ios-icon-width;
|
||||
height: $radio-ios-icon-height;
|
||||
}
|
||||
|
||||
:host(.ion-color.radio-checked) .radio-inner {
|
||||
@@ -24,6 +23,11 @@
|
||||
// iOS Radio Checkmark: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.radio-inner {
|
||||
width: 33%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
:host(.radio-checked) .radio-inner {
|
||||
transform: rotate(45deg);
|
||||
|
||||
@@ -34,6 +38,7 @@
|
||||
border-color: var(--color-checked);
|
||||
}
|
||||
|
||||
|
||||
// iOS Radio: Disabled
|
||||
// -----------------------------------------
|
||||
:host(.radio-disabled) {
|
||||
|
||||
@@ -11,10 +11,10 @@ $radio-ios-color-on: current-color(base) !default;
|
||||
$radio-ios-background-color-focused: ion-color(primary, tint) !default;
|
||||
|
||||
/// @prop - Width of the radio icon
|
||||
$radio-ios-icon-width: 16px !default;
|
||||
$radio-ios-icon-width: 15px !default;
|
||||
|
||||
/// @prop - Height of the radio icon
|
||||
$radio-ios-icon-height: 21px !default;
|
||||
$radio-ios-icon-height: 24px !default;
|
||||
|
||||
/// @prop - Border width of the radio icon
|
||||
$radio-ios-icon-border-width: 2px !default;
|
||||
|
||||
@@ -7,12 +7,11 @@
|
||||
:host {
|
||||
--color: #{$radio-md-color-off};
|
||||
--color-checked: #{ion-color(primary, base)};
|
||||
--width: #{$radio-md-icon-width};
|
||||
--height: #{$radio-md-icon-height};
|
||||
--border-width: #{$radio-md-icon-border-width};
|
||||
--border-style: #{$radio-md-icon-border-style};
|
||||
--inner-width: calc(var(--width) / 2);
|
||||
--inner-height: calc(var(--height) / 2);
|
||||
|
||||
width: $radio-md-icon-width;
|
||||
height: $radio-md-icon-height;
|
||||
}
|
||||
|
||||
:host(.ion-color) .radio-inner {
|
||||
@@ -42,6 +41,9 @@
|
||||
.radio-inner {
|
||||
@include border-radius(50%);
|
||||
|
||||
width: calc(50% + var(--border-width));
|
||||
height: calc(50% + var(--border-width));
|
||||
|
||||
transform: scale3d(0, 0, 0);
|
||||
|
||||
transition: transform $radio-md-transition-duration $radio-md-transition-easing;
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
/**
|
||||
* @prop --color: Color of the radio
|
||||
* @prop --color-checked: Color of the checked radio
|
||||
* @prop --width: Width of the radio button
|
||||
* @prop --height: Height of the radio button
|
||||
* @prop --inner-width: Width of the dot or checkmark
|
||||
* @prop --inner-height: Height of the dot or checkmark
|
||||
*/
|
||||
|
||||
display: inline-block;
|
||||
@@ -33,17 +29,12 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
contain: layout size style;
|
||||
}
|
||||
|
||||
.radio-inner {
|
||||
width: var(--inner-width);
|
||||
height: var(--inner-height);
|
||||
}
|
||||
|
||||
button {
|
||||
@include input-cover();
|
||||
}
|
||||
|
||||
@@ -66,14 +66,10 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ----------------- | ------------------------------ |
|
||||
| `--color` | Color of the radio |
|
||||
| `--color-checked` | Color of the checked radio |
|
||||
| `--height` | Height of the radio button |
|
||||
| `--inner-height` | Height of the dot or checkmark |
|
||||
| `--inner-width` | Width of the dot or checkmark |
|
||||
| `--width` | Width of the radio button |
|
||||
| Name | Description |
|
||||
| ----------------- | -------------------------- |
|
||||
| `--color` | Color of the radio |
|
||||
| `--color-checked` | Color of the checked radio |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -47,6 +47,7 @@
|
||||
<ion-radio class="custom"></ion-radio>
|
||||
<ion-radio class="custom" checked></ion-radio>
|
||||
<ion-radio class="custom" checked color="tertiary"></ion-radio>
|
||||
<ion-radio class="custom-size" checked color="danger"></ion-radio>
|
||||
|
||||
<style>
|
||||
/* to be able to see the radio buttons */
|
||||
@@ -59,6 +60,18 @@
|
||||
--color: orange;
|
||||
--color-checked: hotpink;
|
||||
}
|
||||
|
||||
.ios .custom-size {
|
||||
width: 60px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.md .custom-size {
|
||||
--border-width: 8px;
|
||||
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -170,16 +170,22 @@ Type: `Promise<void>`
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ----------------- | -------------------------- |
|
||||
| `--background` | Background of the toast |
|
||||
| `--border-color` | Border color of the toast |
|
||||
| `--border-radius` | Border radius of the toast |
|
||||
| `--border-style` | Border style of the toast |
|
||||
| `--border-width` | Border width of the toast |
|
||||
| `--box-shadow` | Box shadow of the toast |
|
||||
| `--button-color` | Color of the button text |
|
||||
| `--color` | Color of the toast text |
|
||||
| Name | Description |
|
||||
| ----------------- | --------------------------- |
|
||||
| `--background` | Background of the toast |
|
||||
| `--border-color` | Border color of the toast |
|
||||
| `--border-radius` | Border radius of the toast |
|
||||
| `--border-style` | Border style of the toast |
|
||||
| `--border-width` | Border width of the toast |
|
||||
| `--box-shadow` | Box shadow of the toast |
|
||||
| `--button-color` | Color of the button text |
|
||||
| `--color` | Color of the toast text |
|
||||
| `--height` | Height of the toast |
|
||||
| `--max-height` | Maximum height of the toast |
|
||||
| `--max-width` | Maximum width of the toast |
|
||||
| `--min-height` | Minimum height of the toast |
|
||||
| `--min-width` | Minimum width of the toast |
|
||||
| `--width` | Width of the toast |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -8,20 +8,10 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
|
||||
<style>
|
||||
ion-toast.toast-border {
|
||||
--border-radius: 20px;
|
||||
--border-width: 5px;
|
||||
--border-style: double;
|
||||
--border-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Toast - Basic</ion-title>
|
||||
@@ -37,7 +27,7 @@
|
||||
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
|
||||
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
|
||||
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, color: 'danger'})">Show Color Toast</ion-button>
|
||||
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'toast-border'})">Show Toast with border</ion-button>
|
||||
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'my-custom-class'})">Show Toast with Custom Class</ion-button>
|
||||
|
||||
<ion-toast-controller></ion-toast-controller>
|
||||
|
||||
@@ -101,6 +91,18 @@
|
||||
--ion-safe-area-bottom: 40px;
|
||||
}
|
||||
|
||||
.my-custom-class {
|
||||
--border-radius: 20px;
|
||||
--border-width: 5px;
|
||||
--border-style: double;
|
||||
--border-color: yellow;
|
||||
--background: lightyellow;
|
||||
--button-color: black;
|
||||
--color: black;
|
||||
--width: 180px;
|
||||
--height: 180px;
|
||||
}
|
||||
|
||||
f {
|
||||
display: block;
|
||||
background: blue;
|
||||
|
||||
@@ -6,9 +6,10 @@
|
||||
|
||||
:host {
|
||||
--background: #{$toast-ios-background-color};
|
||||
--border-radius: #{$toast-ios-border-radius};
|
||||
--button-color: #{$toast-ios-button-color};
|
||||
--color: #{$toast-ios-title-color};
|
||||
--border-radius: #{$toast-ios-border-radius};
|
||||
--max-width: #{$toast-max-width};
|
||||
|
||||
font-size: $toast-ios-title-font-size;
|
||||
}
|
||||
@@ -16,13 +17,10 @@
|
||||
.toast-wrapper {
|
||||
@include position-horizontal(10px, 10px);
|
||||
@include margin(auto);
|
||||
@include border-radius(var(--border-radius));
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
max-width: $toast-max-width;
|
||||
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,25 +5,23 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--button-color: #{ion-color(primary, base)};
|
||||
--background: #{$toast-md-background};
|
||||
--color: #{$toast-md-color};
|
||||
--border-radius: #{$toast-md-border-radius};
|
||||
--box-shadow: #{$toast-md-box-shadow};
|
||||
--button-color: #{ion-color(primary, base)};
|
||||
--color: #{$toast-md-color};
|
||||
--max-width: #{$toast-max-width};
|
||||
|
||||
font-size: #{$toast-md-font-size};
|
||||
}
|
||||
|
||||
.toast-wrapper {
|
||||
@include border-radius(var(--border-radius));
|
||||
@include position-horizontal(8px, 8px);
|
||||
@include margin(auto);
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
max-width: $toast-max-width;
|
||||
|
||||
opacity: .01;
|
||||
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
|
||||
@@ -6,19 +6,34 @@
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the toast
|
||||
* @prop --color: Color of the toast text
|
||||
*
|
||||
* @prop --border-color: Border color of the toast
|
||||
* @prop --border-radius: Border radius of the toast
|
||||
* @prop --border-width: Border width of the toast
|
||||
* @prop --border-style: Border style of the toast
|
||||
*
|
||||
* @prop --box-shadow: Box shadow of the toast
|
||||
*
|
||||
* @prop --min-width: Minimum width of the toast
|
||||
* @prop --width: Width of the toast
|
||||
* @prop --max-width: Maximum width of the toast
|
||||
*
|
||||
* @prop --min-height: Minimum height of the toast
|
||||
* @prop --height: Height of the toast
|
||||
* @prop --max-height: Maximum height of the toast
|
||||
*
|
||||
* @prop --button-color: Color of the button text
|
||||
* @prop --color: Color of the toast text
|
||||
*/
|
||||
--button-color: inherit;
|
||||
--border-width: 0;
|
||||
--border-style: none;
|
||||
--border-color: initial;
|
||||
--box-shadow: none;
|
||||
--min-width: auto;
|
||||
--width: auto;
|
||||
--min-height: auto;
|
||||
--height: auto;
|
||||
--max-height: auto;
|
||||
|
||||
@include position(0, null, null, 0);
|
||||
|
||||
@@ -38,12 +53,26 @@
|
||||
}
|
||||
|
||||
:host(.ion-color) {
|
||||
--color: #{current-color(contrast)};
|
||||
--background: #{current-color(base)};
|
||||
--button-color: inherit;
|
||||
|
||||
color: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
:host(.ion-color) .toast-wrapper {
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
|
||||
.toast-wrapper {
|
||||
@include border-radius(var(--border-radius));
|
||||
|
||||
width: var(--width);
|
||||
min-width: var(--min-width);
|
||||
max-width: var(--max-width);
|
||||
|
||||
height: var(--height);
|
||||
min-height: var(--min-height);
|
||||
max-height: var(--max-height);
|
||||
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: var(--border-color);
|
||||
|
||||
Reference in New Issue
Block a user