mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
refactor(components): update to use shadow DOM and work with css variables
- updates components to use shadow DOM or scoped if they require css variables - moves global styles to an external stylesheet that needs to be imported - adds support for additional colors and removes the Sass loops to generate colors for each component - several property renames, bug fixes, and test updates Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com> Co-authored-by: Adam Bradley <adambradley25@gmail.com> Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
@ -4,51 +4,36 @@
|
||||
// iOS Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
// iOS Checkbox Outer Circle: Unchecked
|
||||
// -----------------------------------------
|
||||
:host {
|
||||
--size: #{$checkbox-ios-icon-size};
|
||||
|
||||
.checkbox-ios .checkbox-icon {
|
||||
@include border-radius($checkbox-ios-icon-border-radius);
|
||||
--border-radius: #{$checkbox-ios-icon-border-radius};
|
||||
--border-width: #{$checkbox-ios-icon-border-width};
|
||||
--border-style: #{$checkbox-ios-icon-border-style};
|
||||
|
||||
position: relative;
|
||||
|
||||
width: $checkbox-ios-icon-size;
|
||||
height: $checkbox-ios-icon-size;
|
||||
|
||||
border-width: $checkbox-ios-icon-border-width;
|
||||
border-style: $checkbox-ios-icon-border-style;
|
||||
border-color: $checkbox-ios-icon-border-color-off;
|
||||
background-color: $checkbox-ios-background-color-off;
|
||||
|
||||
contain: strict;
|
||||
--unchecked-border-color: #{$checkbox-ios-icon-border-color-off};
|
||||
--unchecked-background: #{$checkbox-ios-background-color-off};
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Outer Circle: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-ios .checkbox-checked {
|
||||
border-color: $checkbox-ios-icon-border-color-on;
|
||||
background-color: $checkbox-ios-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Inner Checkmark: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-ios .checkbox-checked .checkbox-inner {
|
||||
@include position($checkbox-ios-checkmark-top, null, null, $checkbox-ios-checkmark-start);
|
||||
.checkbox-inner {
|
||||
@include position(
|
||||
calc(var(--size) / 6),
|
||||
null, null,
|
||||
calc(var(--size) / 2.5 - 1px)
|
||||
);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: $checkbox-ios-checkmark-width;
|
||||
height: $checkbox-ios-checkmark-height;
|
||||
width: calc(var(--size) / 6 + 1px);
|
||||
height: calc(var(--size) / 2);
|
||||
|
||||
border-width: $checkbox-ios-checkmark-border-width;
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
border-style: $checkbox-ios-checkmark-border-style;
|
||||
border-color: $checkbox-ios-checkmark-border-color;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@ -56,8 +41,8 @@
|
||||
// iOS Checkbox: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-ios.checkbox-disabled,
|
||||
.item-ios.item-checkbox-disabled ion-label {
|
||||
// TODO: .item-ios.item-checkbox-disabled ion-labe
|
||||
:host(.checkbox-disabled) {
|
||||
opacity: $checkbox-ios-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
@ -67,7 +52,7 @@
|
||||
// iOS Checkbox Keyboard Focus
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-key .checkbox-icon::after {
|
||||
:host(.checkbox-key) .checkbox-icon::after {
|
||||
@include border-radius(50%);
|
||||
@include position(-9px, null, null, -9px);
|
||||
|
||||
@ -89,39 +74,14 @@
|
||||
// iOS Checkbox Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item.item-ios .checkbox-ios {
|
||||
// :host-context(.item)
|
||||
:host(.in-item) {
|
||||
@include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
|
||||
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item.item-ios .checkbox-ios[slot="end"] {
|
||||
:host(.in-item[slot="end"]) {
|
||||
@include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start);
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin checkbox-theme-ios($color-name) {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
|
||||
.checkbox-ios-#{$color-name} .checkbox-checked {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.checkbox-ios-#{$color-name} .checkbox-checked .checkbox-inner {
|
||||
border-color: $color-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Checkbox Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
@include checkbox-theme-ios($color-name);
|
||||
}
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background color of the checkbox when off
|
||||
$checkbox-ios-background-color-off: $item-ios-background-color !default;
|
||||
$checkbox-ios-background-color-off: $item-background-color !default;
|
||||
|
||||
/// @prop - Background color of the checkbox when on
|
||||
$checkbox-ios-background-color-on: ion-color($colors-ios, primary, base, ios) !default;
|
||||
$checkbox-ios-background-color-on: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background color of focus indicator for checkbox when focused
|
||||
$checkbox-ios-background-color-focused: ion-color($colors-ios, primary, tint, ios) !default;
|
||||
$checkbox-ios-background-color-focused: ion-color(primary, tint) !default;
|
||||
|
||||
/// @prop - Size of the checkbox icon
|
||||
$checkbox-ios-icon-size: 24px !default;
|
||||
@ -39,7 +39,7 @@ $checkbox-ios-checkmark-border-width: 1px !default;
|
||||
$checkbox-ios-checkmark-border-style: solid !default;
|
||||
|
||||
/// @prop - Color of the checkmark border in the checkbox
|
||||
$checkbox-ios-checkmark-border-color: ion-color($colors-ios, $checkbox-ios-background-color-on, contrast, ios) !default;
|
||||
$checkbox-ios-checkmark-border-color: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Top of the checkmark in the checkbox
|
||||
$checkbox-ios-checkmark-top: $checkbox-ios-icon-size / 6 !default;
|
||||
|
||||
@ -4,55 +4,38 @@
|
||||
// Material Design Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
// Material Design Checkbox Outer Square: Unchecked
|
||||
// -----------------------------------------
|
||||
:host {
|
||||
--size: #{$checkbox-md-icon-size};
|
||||
|
||||
.checkbox-md .checkbox-icon {
|
||||
@include border-radius($checkbox-md-icon-border-radius);
|
||||
--border-radius: calc(var(--size) * .125);
|
||||
--border-width: #{$checkbox-md-icon-border-width};
|
||||
--border-style: #{$checkbox-md-icon-border-style};
|
||||
|
||||
position: relative;
|
||||
--unchecked-border-color: #{$checkbox-md-icon-border-color-off};
|
||||
--unchecked-background: #{$checkbox-md-icon-background-color-off};
|
||||
|
||||
width: $checkbox-md-icon-size;
|
||||
height: $checkbox-md-icon-size;
|
||||
|
||||
border-width: $checkbox-md-icon-border-width;
|
||||
border-style: $checkbox-md-icon-border-style;
|
||||
border-color: $checkbox-md-icon-border-color-off;
|
||||
background-color: $checkbox-md-icon-background-color-off;
|
||||
|
||||
transition-duration: $checkbox-md-transition-duration;
|
||||
transition-property: background;
|
||||
transition-timing-function: $checkbox-md-transition-easing;
|
||||
|
||||
contain: strict;
|
||||
--transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing};
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Outer Square: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-md .checkbox-checked {
|
||||
border-color: $checkbox-md-icon-border-color-on;
|
||||
background-color: $checkbox-md-icon-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Inner Checkmark: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-md .checkbox-checked .checkbox-inner {
|
||||
@include position(0, null, null, 4px);
|
||||
:host(.checkbox-checked) .checkbox-inner {
|
||||
@include position(
|
||||
calc(var(--size) * .05),
|
||||
null, null,
|
||||
calc(var(--size) * .3)
|
||||
);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
width: calc(var(--size) * .3125);
|
||||
height: calc(var(--size) * .625);
|
||||
|
||||
border-width: $checkbox-md-icon-checkmark-width;
|
||||
border-width: calc(var(--size) * .125);
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
border-style: $checkbox-md-icon-checkmark-style;
|
||||
border-color: $checkbox-md-icon-checkmark-color;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@ -60,8 +43,10 @@
|
||||
// Material Design Checkbox: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-md.checkbox-disabled,
|
||||
.item-md.item-checkbox-disabled ion-label {
|
||||
// TODO
|
||||
// .item-md.item-checkbox-disabled ion-label {
|
||||
|
||||
:host(.checkbox-disabled) {
|
||||
opacity: $checkbox-md-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
@ -71,7 +56,7 @@
|
||||
// Material Design Checkbox Keyboard Focus
|
||||
// -----------------------------------------
|
||||
|
||||
.checkbox-key .checkbox-icon::after {
|
||||
:host(.checkbox-key) .checkbox-icon::after {
|
||||
@include border-radius(50%);
|
||||
@include position(-12px, null, null, -12px);
|
||||
|
||||
@ -93,43 +78,18 @@
|
||||
// Material Design Checkbox Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item.item-md .checkbox-md {
|
||||
:host(.in-item) {
|
||||
@include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
|
||||
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item.item-md .checkbox-md[slot="end"] {
|
||||
:host(.in-item[slot="end"]) {
|
||||
@include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
|
||||
}
|
||||
|
||||
.checkbox-md + .item-inner ion-label {
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin checkbox-theme-md($color-name) {
|
||||
$color-base: ion-color($colors-md, $color-name, base, md);
|
||||
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
|
||||
|
||||
.checkbox-md-#{$color-name} .checkbox-checked {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.checkbox-md-#{$color-name} .checkbox-checked .checkbox-inner {
|
||||
border-color: $color-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Checkbox Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
@include checkbox-theme-md($color-name);
|
||||
}
|
||||
// REVIEW
|
||||
// .checkbox-md + .item-inner ion-label {
|
||||
// @include margin-horizontal(0, null);
|
||||
// }
|
||||
|
||||
@ -9,13 +9,13 @@
|
||||
$checkbox-md-disabled-opacity: .3 !default;
|
||||
|
||||
/// @prop - Background color of the checkbox icon when off
|
||||
$checkbox-md-icon-background-color-off: $item-md-background-color !default;
|
||||
$checkbox-md-icon-background-color-off: $item-background-color !default;
|
||||
|
||||
/// @prop - Background color of focus indicator for checkbox when focused
|
||||
$checkbox-md-background-color-focused: ion-color($colors-md, primary, tint, md) !default;
|
||||
$checkbox-md-background-color-focused: ion-color(primary, tint) !default;
|
||||
|
||||
/// @prop - Background color of the checkbox icon when on
|
||||
$checkbox-md-icon-background-color-on: ion-color($colors-md, primary, base, md) !default;
|
||||
$checkbox-md-icon-background-color-on: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Size of the checkbox icon
|
||||
$checkbox-md-icon-size: 16px !default;
|
||||
@ -27,7 +27,7 @@ $checkbox-md-icon-checkmark-width: 2px !default;
|
||||
$checkbox-md-icon-checkmark-style: solid !default;
|
||||
|
||||
/// @prop - Color of the checkbox icon checkmark
|
||||
$checkbox-md-icon-checkmark-color: ion-color($colors-md, $checkbox-md-icon-background-color-on, contrast, md) !default;
|
||||
$checkbox-md-icon-checkmark-color: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Border width of the checkbox icon
|
||||
$checkbox-md-icon-border-width: 2px !default;
|
||||
@ -42,7 +42,7 @@ $checkbox-md-icon-border-radius: 2px !default;
|
||||
$checkbox-md-icon-border-color-off: $border-md-color !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when on
|
||||
$checkbox-md-icon-border-color-on: ion-color($colors-md, primary, base, md) !default;
|
||||
$checkbox-md-icon-border-color-on: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Transition duration of the checkbox
|
||||
$checkbox-md-transition-duration: 280ms !default;
|
||||
|
||||
@ -3,24 +3,51 @@
|
||||
// Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-checkbox {
|
||||
:host {
|
||||
--ion-color-base: #{ion-color(primary, base)};
|
||||
--ion-color-contrast: #{ion-color(primary, contrast)};
|
||||
|
||||
--background: var(--unchecked-backgroud);
|
||||
--border-color: var(--unchecked-border-color);
|
||||
|
||||
--checked-border-color: #{current-color(base)};
|
||||
--checked-background: #{current-color(base)};
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ion-checkbox input {
|
||||
@include position(0, null, null, 0);
|
||||
@include margin(0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
appearance: none;
|
||||
:host(.checkbox-checked) {
|
||||
--background: var(--checked-background);
|
||||
--border-color: var(--checked-border-color);
|
||||
}
|
||||
|
||||
:host(.checkbox-checked) .checkbox-inner {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input {
|
||||
@include input-cover();
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
@include border-radius(var(--border-radius));
|
||||
|
||||
position: relative;
|
||||
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: var(--border-color);
|
||||
background-color: var(--background);
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.checkbox-inner {
|
||||
border-color: #{current-color(contrast)};
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
|
||||
import { CheckboxInput, CheckedInputChangeEvent, Color, CssClassMap, Mode, StyleEvent } from '../../interface';
|
||||
import { CheckboxInput, CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
|
||||
import { deferEvent } from '../../utils/helpers';
|
||||
import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -9,9 +10,7 @@ import { deferEvent } from '../../utils/helpers';
|
||||
ios: 'checkbox.ios.scss',
|
||||
md: 'checkbox.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'checkbox'
|
||||
}
|
||||
shadow: true
|
||||
})
|
||||
export class Checkbox implements CheckboxInput {
|
||||
|
||||
@ -94,8 +93,8 @@ export class Checkbox implements CheckboxInput {
|
||||
@Watch('disabled')
|
||||
emitStyle() {
|
||||
this.ionStyle.emit({
|
||||
'checkbox-disabled': this.disabled,
|
||||
'checkbox-checked': this.checked,
|
||||
'interactive-disabled': this.disabled,
|
||||
});
|
||||
}
|
||||
|
||||
@ -119,21 +118,19 @@ export class Checkbox implements CheckboxInput {
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
...createColorClasses(this.color),
|
||||
'in-item': hostContext('.item', this.el),
|
||||
'checkbox-checked': this.checked,
|
||||
'checkbox-disabled': this.disabled,
|
||||
'checkbox-key': this.keyFocus
|
||||
'checkbox-key': this.keyFocus,
|
||||
'interactive': true
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const checkboxClasses: CssClassMap = {
|
||||
'checkbox-icon': true,
|
||||
'checkbox-checked': this.checked
|
||||
};
|
||||
|
||||
return [
|
||||
<div class={checkboxClasses}>
|
||||
<div class="checkbox-icon">
|
||||
<div class="checkbox-inner"></div>
|
||||
</div>,
|
||||
<input
|
||||
|
||||
@ -1,85 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Checkbox - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Checkbox - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Checkbox - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-item>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-content id="content">
|
||||
<ion-item>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Primary</ion-label>
|
||||
<ion-checkbox checked color="primary"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Primary</ion-label>
|
||||
<ion-checkbox checked color="primary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Secondary</ion-label>
|
||||
<ion-checkbox checked color="secondary"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Secondary</ion-label>
|
||||
<ion-checkbox checked color="secondary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary</ion-label>
|
||||
<ion-checkbox checked color="tertiary"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Tertiary</ion-label>
|
||||
<ion-checkbox checked color="tertiary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success</ion-label>
|
||||
<ion-checkbox checked color="success"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Success</ion-label>
|
||||
<ion-checkbox checked color="success"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning</ion-label>
|
||||
<ion-checkbox checked color="warning"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Warning</ion-label>
|
||||
<ion-checkbox checked color="warning"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Danger</ion-label>
|
||||
<ion-checkbox checked color="danger"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Danger</ion-label>
|
||||
<ion-checkbox checked color="danger"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Light</ion-label>
|
||||
<ion-checkbox checked color="light"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Light</ion-label>
|
||||
<ion-checkbox checked color="light"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium</ion-label>
|
||||
<ion-checkbox checked color="medium"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Medium</ion-label>
|
||||
<ion-checkbox checked color="medium"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-checkbox checked color="dark"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-checkbox checked color="dark" style="--size: 100px;"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Unchecked by Default</ion-label>
|
||||
<ion-checkbox></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Unchecked by Default</ion-label>
|
||||
<ion-checkbox></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,85 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Checkbox</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Checkbox</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Checkbox</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-item>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-content id="content">
|
||||
<ion-item>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Primary</ion-label>
|
||||
<ion-checkbox checked color="primary"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Primary</ion-label>
|
||||
<ion-checkbox checked color="primary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Secondary</ion-label>
|
||||
<ion-checkbox checked color="secondary"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Secondary</ion-label>
|
||||
<ion-checkbox checked color="secondary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary</ion-label>
|
||||
<ion-checkbox checked color="tertiary"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Tertiary</ion-label>
|
||||
<ion-checkbox checked color="tertiary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success</ion-label>
|
||||
<ion-checkbox checked color="success"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Success</ion-label>
|
||||
<ion-checkbox checked color="success"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning</ion-label>
|
||||
<ion-checkbox checked color="warning"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Warning</ion-label>
|
||||
<ion-checkbox checked color="warning"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Danger</ion-label>
|
||||
<ion-checkbox checked color="danger"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Danger</ion-label>
|
||||
<ion-checkbox checked color="danger"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Light</ion-label>
|
||||
<ion-checkbox checked color="light"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Light</ion-label>
|
||||
<ion-checkbox checked color="light"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium</ion-label>
|
||||
<ion-checkbox checked color="medium"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Medium</ion-label>
|
||||
<ion-checkbox checked color="medium"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-checkbox checked color="dark"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-checkbox checked color="dark"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Unchecked by Default</ion-label>
|
||||
<ion-checkbox></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Unchecked by Default</ion-label>
|
||||
<ion-checkbox></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Checkbox - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user