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
@@ -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