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
@@ -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;
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user