mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
lint(eslint): migrate to eslint and prettier (#25046)
This commit is contained in:
Liam DeBeasi
@ -1,4 +1,3 @@
|
||||
|
||||
export interface CheckboxChangeEventDetail<T = any> {
|
||||
value: T;
|
||||
checked: boolean;
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';
|
||||
import type { ComponentInterface, EventEmitter } from '@stencil/core';
|
||||
import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { CheckboxChangeEventDetail, Color, StyleEventDetail } from '../../interface';
|
||||
import type { CheckboxChangeEventDetail, Color, StyleEventDetail } from '../../interface';
|
||||
import { getAriaLabel, renderHiddenInput } from '../../utils/helpers';
|
||||
import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
|
||||
@ -15,12 +16,11 @@ import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
tag: 'ion-checkbox',
|
||||
styleUrls: {
|
||||
ios: 'checkbox.ios.scss',
|
||||
md: 'checkbox.md.scss'
|
||||
md: 'checkbox.md.scss',
|
||||
},
|
||||
shadow: true
|
||||
shadow: true,
|
||||
})
|
||||
export class Checkbox implements ComponentInterface {
|
||||
|
||||
private inputId = `ion-cb-${checkboxIds++}`;
|
||||
private focusEl?: HTMLElement;
|
||||
|
||||
@ -91,7 +91,7 @@ export class Checkbox implements ComponentInterface {
|
||||
checkedChanged(isChecked: boolean) {
|
||||
this.ionChange.emit({
|
||||
checked: isChecked,
|
||||
value: this.value
|
||||
value: this.value,
|
||||
});
|
||||
this.emitStyle();
|
||||
}
|
||||
@ -120,31 +120,35 @@ export class Checkbox implements ComponentInterface {
|
||||
this.setFocus();
|
||||
this.checked = !this.checked;
|
||||
this.indeterminate = false;
|
||||
}
|
||||
};
|
||||
|
||||
private onFocus = () => {
|
||||
this.ionFocus.emit();
|
||||
}
|
||||
};
|
||||
|
||||
private onBlur = () => {
|
||||
this.ionBlur.emit();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { color, checked, disabled, el, indeterminate, inputId, name, value } = this;
|
||||
const mode = getIonMode(this);
|
||||
const { label, labelId, labelText } = getAriaLabel(el, inputId);
|
||||
|
||||
renderHiddenInput(true, el, name, (checked ? value : ''), disabled);
|
||||
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
||||
|
||||
let path = indeterminate
|
||||
? <path d="M6 12L18 12" part="mark" />
|
||||
: <path d="M5.9,12.5l3.8,3.8l8.8-8.8" part="mark" />;
|
||||
let path = indeterminate ? (
|
||||
<path d="M6 12L18 12" part="mark" />
|
||||
) : (
|
||||
<path d="M5.9,12.5l3.8,3.8l8.8-8.8" part="mark" />
|
||||
);
|
||||
|
||||
if (mode === 'md') {
|
||||
path = indeterminate
|
||||
? <path d="M2 12H22" part="mark" />
|
||||
: <path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />;
|
||||
path = indeterminate ? (
|
||||
<path d="M2 12H22" part="mark" />
|
||||
) : (
|
||||
<path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
@ -160,15 +164,13 @@ export class Checkbox implements ComponentInterface {
|
||||
'checkbox-checked': checked,
|
||||
'checkbox-disabled': disabled,
|
||||
'checkbox-indeterminate': indeterminate,
|
||||
'interactive': true
|
||||
interactive: true,
|
||||
})}
|
||||
>
|
||||
<svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
|
||||
{path}
|
||||
</svg>
|
||||
<label htmlFor={inputId}>
|
||||
{labelText}
|
||||
</label>
|
||||
<label htmlFor={inputId}>{labelText}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-checked={`${checked}`}
|
||||
@ -176,7 +178,7 @@ export class Checkbox implements ComponentInterface {
|
||||
id={inputId}
|
||||
onFocus={() => this.onFocus()}
|
||||
onBlur={() => this.onBlur()}
|
||||
ref={focusEl => this.focusEl = focusEl}
|
||||
ref={(focusEl) => (this.focusEl = focusEl)}
|
||||
/>
|
||||
</Host>
|
||||
);
|
||||
|
||||
@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('checkbox: basic', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/checkbox/test/basic?ionic:_testing=true'
|
||||
url: '/src/components/checkbox/test/basic?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
|
||||
@ -1,142 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" 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">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
<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"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
ion-checkbox.checkbox-part::part(mark) {
|
||||
transform: scale(.5);
|
||||
transform: scale(0.5);
|
||||
transform-origin: center;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<ion-app>
|
||||
<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 onClick="clickItem()">
|
||||
<ion-label>Clickable Item</ion-label>
|
||||
<ion-checkbox></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-item onClick="clickItem()">
|
||||
<ion-label>Clickable Item</ion-label>
|
||||
<ion-checkbox></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<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" slot="end"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Primary</ion-label>
|
||||
<ion-checkbox checked color="primary" slot="end"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Secondary</ion-label>
|
||||
<ion-checkbox disabled checked color="secondary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Secondary</ion-label>
|
||||
<ion-checkbox disabled 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>Dark</ion-label>
|
||||
<ion-checkbox checked color="dark" style="--size: 100px"></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>Danger</ion-label>
|
||||
<ion-checkbox checked color="danger" slot="start"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Danger</ion-label>
|
||||
<ion-checkbox checked color="danger" slot="start"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Light</ion-label>
|
||||
<ion-checkbox checked color="light" slot="start"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Light</ion-label>
|
||||
<ion-checkbox checked color="light" slot="start"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Medium</ion-label>
|
||||
<ion-checkbox checked color="medium" slot="start"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium</ion-label>
|
||||
<ion-checkbox checked color="medium" slot="start"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-checkbox checked color="dark" slot="start" style="--size: 100px"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Checkmark width</ion-label>
|
||||
<ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkmark width</ion-label>
|
||||
<ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7;"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Checkmark ::part</ion-label>
|
||||
<ion-checkbox checked color="dark" slot="start" class="checkbox-part"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkmark ::part</ion-label>
|
||||
<ion-checkbox checked color="dark" slot="start" class="checkbox-part"></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-app>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
<script>
|
||||
const inputs = document.querySelectorAll('ion-checkbox');
|
||||
|
||||
</ion-app>
|
||||
for (var i = 0; i < inputs.length; i++) {
|
||||
const input = inputs[i];
|
||||
|
||||
<script>
|
||||
const inputs = document.querySelectorAll('ion-checkbox');
|
||||
input.addEventListener('ionBlur', function () {
|
||||
console.log('Listen ionBlur: fired');
|
||||
});
|
||||
|
||||
for (var i = 0; i < inputs.length; i++) {
|
||||
const input = inputs[i];
|
||||
input.addEventListener('ionFocus', function () {
|
||||
console.log('Listen ionFocus: fired');
|
||||
});
|
||||
|
||||
input.addEventListener('ionBlur', function() {
|
||||
console.log('Listen ionBlur: fired');
|
||||
});
|
||||
input.addEventListener('ionChange', function (ev) {
|
||||
console.log('Listen ionChange: fired', ev.detail);
|
||||
});
|
||||
|
||||
input.addEventListener('ionFocus', function() {
|
||||
console.log('Listen ionFocus: fired');
|
||||
});
|
||||
|
||||
input.addEventListener('ionChange', function(ev) {
|
||||
console.log('Listen ionChange: fired', ev.detail);
|
||||
});
|
||||
|
||||
input.addEventListener('click', function() {
|
||||
console.log('Listen click: fired');
|
||||
});
|
||||
}
|
||||
|
||||
const clickItem = () => {
|
||||
console.log('Item click: fired');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
input.addEventListener('click', function () {
|
||||
console.log('Listen click: fired');
|
||||
});
|
||||
}
|
||||
|
||||
const clickItem = () => {
|
||||
console.log('Item click: fired');
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('checkbox: indeterminate', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/checkbox/test/indeterminate?ionic:_testing=true'
|
||||
url: '/src/components/checkbox/test/indeterminate?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
|
||||
@ -1,211 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Checkbox - Indeterminate</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Checkbox - Indeterminate</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
<body onLoad="onLoad()">
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Checkbox - Indeterminate</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<body onLoad="onLoad()">
|
||||
<ion-app>
|
||||
<ion-content id="content">
|
||||
<ion-list-header>
|
||||
<ion-label> Native </ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Checkbox - Indeterminate</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<div class="ion-padding-start">
|
||||
<!-- Default to unchecked -->
|
||||
<label for="unchecked">Unchecked</label>
|
||||
<input name="unchecked" id="unchecked" type="checkbox" />
|
||||
<br />
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Native
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<!-- Default to checked -->
|
||||
<label for="checked">Checked</label>
|
||||
<input name="checked" id="checked" type="checkbox" checked />
|
||||
<br />
|
||||
|
||||
<div class="ion-padding-start">
|
||||
<!-- Default to unchecked -->
|
||||
<label for="unchecked">Unchecked</label>
|
||||
<input name="unchecked" id="unchecked" type="checkbox">
|
||||
<br>
|
||||
<!-- Default to indeterminate -->
|
||||
<label for="indeterminate">Indeterminate</label>
|
||||
<input name="indeterminate" id="indeterminate" type="checkbox" class="indeterminate" />
|
||||
<br />
|
||||
|
||||
<!-- Default to checked -->
|
||||
<label for="checked">Checked</label>
|
||||
<input name="checked" id="checked" type="checkbox" checked />
|
||||
<br>
|
||||
<!-- Default to checked / indeterminate -->
|
||||
<label for="both">Checked / Indeterminate</label>
|
||||
<input name="both" id="both" type="checkbox" checked class="indeterminate" />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<!-- Default to indeterminate -->
|
||||
<label for="indeterminate">Indeterminate</label>
|
||||
<input name="indeterminate" id="indeterminate" type="checkbox" class="indeterminate">
|
||||
<br>
|
||||
<ion-list-header>
|
||||
<ion-label> Ionic </ion-label>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Unchecked</ion-label>
|
||||
<ion-checkbox slot="end"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<!-- Default to checked / indeterminate -->
|
||||
<label for="both">Checked / Indeterminate</label>
|
||||
<input name="both" id="both" type="checkbox" checked class="indeterminate">
|
||||
<br>
|
||||
</div>
|
||||
<ion-item>
|
||||
<ion-label>Checked</ion-label>
|
||||
<ion-checkbox slot="end" checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Ionic
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Unchecked</ion-label>
|
||||
<ion-checkbox slot="end"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Indeterminate</ion-label>
|
||||
<ion-checkbox slot="end" indeterminate></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checked</ion-label>
|
||||
<ion-checkbox slot="end" checked></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Checked / Indeterminate</ion-label>
|
||||
<ion-checkbox slot="end" checked indeterminate></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Indeterminate</ion-label>
|
||||
<ion-checkbox slot="end" indeterminate></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-list-header>
|
||||
<ion-label> Colors </ion-label>
|
||||
</ion-list-header>
|
||||
<div class="ion-padding-start">
|
||||
<ion-checkbox aria-label="Default Indeterminate" indeterminate></ion-checkbox>
|
||||
<ion-checkbox aria-label="Secondary Indeterminate" indeterminate color="secondary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Tertiary Indeterminate" indeterminate color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Success Indeterminate" indeterminate color="success"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Warning Indeterminate" indeterminate color="warning"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Danger Indeterminate" indeterminate color="danger"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Dark Indeterminate" indeterminate color="dark"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Medium Indeterminate" indeterminate color="medium"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Light Indeterminate" indeterminate color="light"></ion-checkbox>
|
||||
</div>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checked / Indeterminate</ion-label>
|
||||
<ion-checkbox slot="end" checked indeterminate></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-list-header>
|
||||
<ion-label> Parent </ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Colors
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<div class="ion-padding-start">
|
||||
<ion-checkbox aria-label="Default Indeterminate" indeterminate></ion-checkbox>
|
||||
<ion-checkbox aria-label="Secondary Indeterminate" indeterminate color="secondary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Tertiary Indeterminate" indeterminate color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Success Indeterminate" indeterminate color="success"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Warning Indeterminate" indeterminate color="warning"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Danger Indeterminate" indeterminate color="danger"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Dark Indeterminate" indeterminate color="dark"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Medium Indeterminate" indeterminate color="medium"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Light Indeterminate" indeterminate color="light"></ion-checkbox>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<ion-checkbox aria-labelledby="tall-label-0" indeterminate></ion-checkbox>
|
||||
<label id="tall-label-0">Tall Things</label>
|
||||
<ul>
|
||||
<li>
|
||||
<ion-checkbox aria-labelledby="tall-label-1" checked></ion-checkbox>
|
||||
<label id="tall-label-1">Skyscrapers</label>
|
||||
</li>
|
||||
<li>
|
||||
<ion-checkbox aria-labelledby="tall-label-2"></ion-checkbox>
|
||||
<label id="tall-label-2">Trees</label>
|
||||
</li>
|
||||
<li>
|
||||
<ion-checkbox aria-labelledby="tall-label-3"></ion-checkbox>
|
||||
<label id="tall-label-3">Giants</label>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
Parent
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<ion-checkbox aria-labelledby="tall-label-0" indeterminate></ion-checkbox>
|
||||
<label id="tall-label-0">Tall Things</label>
|
||||
<ul>
|
||||
<li>
|
||||
<ion-checkbox aria-labelledby="tall-label-1" checked></ion-checkbox>
|
||||
<label id="tall-label-1">Skyscrapers</label>
|
||||
</li>
|
||||
<li>
|
||||
<ion-checkbox aria-labelledby="tall-label-2"></ion-checkbox>
|
||||
<label id="tall-label-2">Trees</label>
|
||||
</li>
|
||||
<li>
|
||||
<ion-checkbox aria-labelledby="tall-label-3"></ion-checkbox>
|
||||
<label id="tall-label-3">Giants</label>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 5px 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
ul label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var indeterminateCheckboxes = document.getElementsByClassName("indeterminate");
|
||||
|
||||
for (var i = 0; i < indeterminateCheckboxes.length; i++) {
|
||||
var checkbox = indeterminateCheckboxes[i];
|
||||
checkbox.indeterminate = true;
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
var checkboxes = document.getElementsByTagName("ion-checkbox");
|
||||
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
var checkbox = checkboxes[i];
|
||||
checkbox.addEventListener('ionChange', function (event) {
|
||||
checkboxChanged(this, event);
|
||||
});
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 5px 20px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
function checkboxChanged(el, ev) {
|
||||
var isParent = el.id === "tall";
|
||||
|
||||
if (isParent) {
|
||||
checkChildren(el.checked);
|
||||
} else {
|
||||
checkParent();
|
||||
li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
function checkParent() {
|
||||
var parent = document.getElementById("tall");
|
||||
var children = getChildren();
|
||||
var countChecked = 0;
|
||||
ul label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
for(var i = 0; i < children.length; i++) {
|
||||
var child = children[i];
|
||||
if (child.checked) {
|
||||
countChecked = ++countChecked;
|
||||
<script>
|
||||
var indeterminateCheckboxes = document.getElementsByClassName('indeterminate');
|
||||
|
||||
for (var i = 0; i < indeterminateCheckboxes.length; i++) {
|
||||
var checkbox = indeterminateCheckboxes[i];
|
||||
checkbox.indeterminate = true;
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
var checkboxes = document.getElementsByTagName('ion-checkbox');
|
||||
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
var checkbox = checkboxes[i];
|
||||
checkbox.addEventListener('ionChange', function (event) {
|
||||
checkboxChanged(this, event);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// None checked, uncheck parent
|
||||
if (countChecked == 0) {
|
||||
parent.checked = false;
|
||||
parent.indeterminate = false;
|
||||
// All checked, check parent
|
||||
} else if (countChecked == children.length) {
|
||||
parent.checked = true;
|
||||
parent.indeterminate = false;
|
||||
// One checked, indeterminate parent
|
||||
} else {
|
||||
parent.indeterminate = true;
|
||||
function checkboxChanged(el, ev) {
|
||||
var isParent = el.id === 'tall';
|
||||
|
||||
if (isParent) {
|
||||
checkChildren(el.checked);
|
||||
} else {
|
||||
checkParent();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function checkChildren(shouldCheck) {
|
||||
var children = getChildren();
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
var child = children[i];
|
||||
child.checked = shouldCheck;
|
||||
function checkParent() {
|
||||
var parent = document.getElementById('tall');
|
||||
var children = getChildren();
|
||||
var countChecked = 0;
|
||||
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
var child = children[i];
|
||||
if (child.checked) {
|
||||
countChecked = ++countChecked;
|
||||
}
|
||||
}
|
||||
|
||||
// None checked, uncheck parent
|
||||
if (countChecked == 0) {
|
||||
parent.checked = false;
|
||||
parent.indeterminate = false;
|
||||
// All checked, check parent
|
||||
} else if (countChecked == children.length) {
|
||||
parent.checked = true;
|
||||
parent.indeterminate = false;
|
||||
// One checked, indeterminate parent
|
||||
} else {
|
||||
parent.indeterminate = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getChildren() {
|
||||
return document.querySelectorAll("ion-checkbox[name^=tall-]");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
function checkChildren(shouldCheck) {
|
||||
var children = getChildren();
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
var child = children[i];
|
||||
child.checked = shouldCheck;
|
||||
}
|
||||
}
|
||||
|
||||
function getChildren() {
|
||||
return document.querySelectorAll('ion-checkbox[name^=tall-]');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('checkbox: standalone', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/checkbox/test/standalone?ionic:_testing=true'
|
||||
url: '/src/components/checkbox/test/standalone?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
|
||||
@ -1,107 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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"
|
||||
/>
|
||||
<link href="../../../../../css/core.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<link href="../../../../../css/core.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
<body class="ion-padding">
|
||||
<h1>Default</h1>
|
||||
<ion-checkbox aria-label="Default Checkbox"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Default Checkbox" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Default Checkbox" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Default Checkbox" disabled checked></ion-checkbox>
|
||||
|
||||
<body class="ion-padding">
|
||||
<h1>Default</h1>
|
||||
<ion-checkbox aria-label="Default Checkbox"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Default Checkbox" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Default Checkbox" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Default Checkbox" disabled checked></ion-checkbox>
|
||||
<h1>Colors</h1>
|
||||
<ion-checkbox aria-label="Checkbox Primary" color="primary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Secondary" color="secondary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Tertiary" color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Success" color="success"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Warning" color="warning"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Danger" color="danger"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Light" color="light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Medium" color="medium"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Dark" color="dark"></ion-checkbox>
|
||||
|
||||
<h1>Colors</h1>
|
||||
<ion-checkbox aria-label="Checkbox Primary" color="primary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Secondary" color="secondary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Tertiary" color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Success" color="success"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Warning" color="warning"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Danger" color="danger"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Light" color="light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Medium" color="medium"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Dark" color="dark"></ion-checkbox>
|
||||
<hr />
|
||||
|
||||
<hr>
|
||||
<ion-checkbox aria-label="Checkbox Primary" checked color="primary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Secondary" checked color="secondary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Tertiary" checked color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Success" checked color="success"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Warning" checked color="warning"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Danger" checked color="danger"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Light" checked color="light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Medium" checked color="medium"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Dark" checked color="dark"></ion-checkbox>
|
||||
|
||||
<ion-checkbox aria-label="Checkbox Primary" checked color="primary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Secondary" checked color="secondary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Tertiary" checked color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Success" checked color="success"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Warning" checked color="warning"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Danger" checked color="danger"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Light" checked color="light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Medium" checked color="medium"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Dark" checked color="dark"></ion-checkbox>
|
||||
<hr />
|
||||
|
||||
<hr>
|
||||
<ion-checkbox aria-label="Checkbox Primary" checked disabled color="primary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Secondary" checked disabled color="secondary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Tertiary" checked disabled color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Success" checked disabled color="success"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Warning" checked disabled color="warning"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Danger" checked disabled color="danger"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Light" checked disabled color="light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Medium" checked disabled color="medium"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Dark" checked disabled color="dark"></ion-checkbox>
|
||||
|
||||
<ion-checkbox aria-label="Checkbox Primary" checked disabled color="primary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Secondary" checked disabled color="secondary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Tertiary" checked disabled color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Success" checked disabled color="success"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Warning" checked disabled color="warning"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Danger" checked disabled color="danger"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Light" checked disabled color="light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Medium" checked disabled color="medium"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Dark" checked disabled color="dark"></ion-checkbox>
|
||||
<h1>Custom</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom" disabled checked></ion-checkbox>
|
||||
|
||||
<h1>Custom</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom" disabled checked></ion-checkbox>
|
||||
<h1>Custom: checked</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" disabled checked></ion-checkbox>
|
||||
|
||||
<h1>Custom: checked</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" disabled checked></ion-checkbox>
|
||||
<h1>Custom: light</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" disabled checked></ion-checkbox>
|
||||
|
||||
<h1>Custom: light</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" checked></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" disabled></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" disabled checked></ion-checkbox>
|
||||
<h1>Custom: transition</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom Transition" class="custom-transition"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Transition" class="custom-transition" checked></ion-checkbox>
|
||||
|
||||
<h1>Custom: transition</h1>
|
||||
<ion-checkbox aria-label="Checkbox Custom Transition" class="custom-transition"></ion-checkbox>
|
||||
<ion-checkbox aria-label="Checkbox Custom Transition" class="custom-transition" checked></ion-checkbox>
|
||||
<style>
|
||||
.custom {
|
||||
--background: #444;
|
||||
--border-color: #000;
|
||||
}
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
--background: #444;
|
||||
--border-color: #000;
|
||||
}
|
||||
.custom-checked {
|
||||
--background: lightblue;
|
||||
--border-color: lightpink;
|
||||
|
||||
.custom-checked {
|
||||
--background: lightblue;
|
||||
--border-color: lightpink;
|
||||
--background-checked: lightpink;
|
||||
--border-color-checked: lightblue;
|
||||
}
|
||||
|
||||
--background-checked: lightpink;
|
||||
--border-color-checked: lightblue;
|
||||
}
|
||||
.custom-light {
|
||||
--background: lightgrey;
|
||||
--border-color: darkgrey;
|
||||
|
||||
.custom-light {
|
||||
--background: lightgrey;
|
||||
--border-color: darkgrey;
|
||||
--background-checked: darkgrey;
|
||||
--border-color-checked: transparent;
|
||||
|
||||
--background-checked: darkgrey;
|
||||
--border-color-checked: transparent;
|
||||
--checkmark-color: #000;
|
||||
}
|
||||
|
||||
--checkmark-color: #000;
|
||||
}
|
||||
|
||||
.custom-transition {
|
||||
--transition: all 5s ease-out;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
.custom-transition {
|
||||
--transition: all 5s ease-out;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user