mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
lint(eslint): migrate to eslint and prettier (#25046)
This commit is contained in:
Liam DeBeasi
@ -1,7 +1,8 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';
|
||||
import type { ComponentInterface, EventEmitter } from '@stencil/core';
|
||||
import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { Color, StyleEventDetail } from '../../interface';
|
||||
import type { Color, StyleEventDetail } from '../../interface';
|
||||
import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
|
||||
/**
|
||||
@ -11,9 +12,9 @@ import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
tag: 'ion-label',
|
||||
styleUrls: {
|
||||
ios: 'label.ios.scss',
|
||||
md: 'label.md.scss'
|
||||
md: 'label.md.scss',
|
||||
},
|
||||
scoped: true
|
||||
scoped: true,
|
||||
})
|
||||
export class Label implements ComponentInterface {
|
||||
private inRange = false;
|
||||
@ -48,7 +49,7 @@ export class Label implements ComponentInterface {
|
||||
|
||||
componentWillLoad() {
|
||||
this.inRange = !!this.el.closest('ion-range');
|
||||
this.noAnimate = (this.position === 'floating');
|
||||
this.noAnimate = this.position === 'floating';
|
||||
this.emitStyle();
|
||||
this.emitColor();
|
||||
}
|
||||
@ -76,7 +77,7 @@ export class Label implements ComponentInterface {
|
||||
|
||||
this.ionColor.emit({
|
||||
'item-label-color': color !== undefined,
|
||||
[`ion-color-${color}`]: color !== undefined
|
||||
[`ion-color-${color}`]: color !== undefined,
|
||||
});
|
||||
}
|
||||
|
||||
@ -88,8 +89,8 @@ export class Label implements ComponentInterface {
|
||||
// is a direct child of the item
|
||||
if (!inRange) {
|
||||
this.ionStyle.emit({
|
||||
'label': true,
|
||||
[`label-${position}`]: position !== undefined
|
||||
label: true,
|
||||
[`label-${position}`]: position !== undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -103,11 +104,10 @@ export class Label implements ComponentInterface {
|
||||
[mode]: true,
|
||||
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
||||
[`label-${position}`]: position !== undefined,
|
||||
[`label-no-animate`]: (this.noAnimate),
|
||||
'label-rtl': document.dir === 'rtl'
|
||||
[`label-no-animate`]: this.noAnimate,
|
||||
'label-rtl': document.dir === 'rtl',
|
||||
})}
|
||||
>
|
||||
</Host>
|
||||
></Host>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('label: basic', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/label/test/basic?ionic:_testing=true'
|
||||
url: '/src/components/label/test/basic?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
|
||||
@ -1,119 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Label - Basic</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="../../../../../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>Label - Basic</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="../../../../../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>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Label - Basic</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button onClick="changeColors()"> Color Change </ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Label - Basic</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button onClick="changeColors()">
|
||||
Color Change
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div class="ion-padding">
|
||||
<ion-label>Default</ion-label>
|
||||
|
||||
<ion-label color="secondary">Secondary</ion-label>
|
||||
|
||||
<ion-label color="tertiary">Tertiary</ion-label>
|
||||
|
||||
<ion-label color="danger">Danger</ion-label>
|
||||
|
||||
<ion-label class="custom">Custom</ion-label>
|
||||
</div>
|
||||
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-content>
|
||||
<div class="ion-padding">
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
|
||||
<ion-label color="secondary">Secondary</ion-label>
|
||||
|
||||
<ion-label color="tertiary">Tertiary</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
|
||||
<ion-label color="danger">Danger</ion-label>
|
||||
|
||||
<ion-label class="custom">Custom</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">Wrap label this label just goes on and on and on</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="fixed">Fixed</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Floating</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="floating-color">
|
||||
<ion-label position="floating" color="success">Floating: Success</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="stacked">Stacked</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="stacked-color">
|
||||
<ion-label position="stacked" color="danger">Stacked: Danger</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
<ion-list>
|
||||
<ion-item color="tertiary">
|
||||
<ion-label position="floating">(Item: Tertiary) Floating</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item color="primary">
|
||||
<ion-label position="stacked">(Item: Primary) Stacked</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="floating-color" color="tertiary">
|
||||
<ion-label position="floating" color="success">(Item: Tertiary) Floating: Success</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="stacked-color" color="primary">
|
||||
<ion-label position="stacked" color="danger">(Item: Primary) Stacked: Danger</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label color="tertiary">Tertiary</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="custom">Custom</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">Wrap label this label just goes on and on and on</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="fixed">Fixed</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Floating</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="floating-color">
|
||||
<ion-label position="floating" color="success">Floating: Success</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="stacked">Stacked</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="stacked-color">
|
||||
<ion-label position="stacked" color="danger">Stacked: Danger</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
color: lightblue;
|
||||
}
|
||||
</style>
|
||||
<ion-list>
|
||||
<ion-item color="tertiary">
|
||||
<ion-label position="floating">(Item: Tertiary) Floating</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item color="primary">
|
||||
<ion-label position="stacked">(Item: Primary) Stacked</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="floating-color" color="tertiary">
|
||||
<ion-label position="floating" color="success">(Item: Tertiary) Floating: Success</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="stacked-color" color="primary">
|
||||
<ion-label position="stacked" color="danger">(Item: Primary) Stacked: Danger</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
const labels = document.querySelectorAll('.floating-color ion-label, .stacked-color ion-label');
|
||||
|
||||
function changeColors() {
|
||||
for (label of labels) {
|
||||
const currentColor = label.color;
|
||||
label.color = currentColor === 'success' ? 'danger' : 'success';
|
||||
<style>
|
||||
.custom {
|
||||
color: lightblue;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const labels = document.querySelectorAll('.floating-color ion-label, .stacked-color ion-label');
|
||||
|
||||
function changeColors() {
|
||||
for (label of labels) {
|
||||
const currentColor = label.color;
|
||||
label.color = currentColor === 'success' ? 'danger' : 'success';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('label: color', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/label/test/color?ionic:_testing=true'
|
||||
url: '/src/components/label/test/color?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Label - Color</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">
|
||||
<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="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
@ -21,7 +24,10 @@
|
||||
|
||||
<ion-content color="light">
|
||||
<ion-item>
|
||||
<ion-label>Label Text<p>This paragraph should not inherit the color from content</p></ion-label>
|
||||
<ion-label
|
||||
>Label Text
|
||||
<p>This paragraph should not inherit the color from content</p></ion-label
|
||||
>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
@ -1,121 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Label - Floating</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="../../../../../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>Label - Floating</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="../../../../../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>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Label - Floating</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Label - Floating</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Input</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Textarea</ion-label>
|
||||
<ion-textarea></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Input</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Datetime</ion-label>
|
||||
<ion-datetime></ion-datetime>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Textarea</ion-label>
|
||||
<ion-textarea></ion-textarea>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Select</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option>Option</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Datetime</ion-label>
|
||||
<ion-datetime></ion-datetime>
|
||||
</ion-item>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>Placeholders</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Select</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option>Option</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Input</ion-label>
|
||||
<ion-input placeholder="Placeholder Text"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>Placeholders</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Textarea</ion-label>
|
||||
<ion-textarea placeholder="Placeholder Text"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Input</ion-label>
|
||||
<ion-input placeholder="Placeholder Text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Datetime</ion-label>
|
||||
<ion-datetime placeholder="Placeholder Text"></ion-datetime>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Textarea</ion-label>
|
||||
<ion-textarea placeholder="Placeholder Text"></ion-textarea>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Select</ion-label>
|
||||
<ion-select placeholder="Placeholder Text">
|
||||
<ion-select-option>Option</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Datetime</ion-label>
|
||||
<ion-datetime placeholder="Placeholder Text"></ion-datetime>
|
||||
</ion-item>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>Values</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Select</ion-label>
|
||||
<ion-select placeholder="Placeholder Text">
|
||||
<ion-select-option>Option</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Input</ion-label>
|
||||
<ion-input value="Input Value"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>Values</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Textarea</ion-label>
|
||||
<ion-textarea value="Textarea Value"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Input</ion-label>
|
||||
<ion-input value="Input Value"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Datetime</ion-label>
|
||||
<ion-datetime value="2020-03-04"></ion-datetime>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Textarea</ion-label>
|
||||
<ion-textarea value="Textarea Value"></ion-textarea>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Select</ion-label>
|
||||
<ion-select value="option">
|
||||
<ion-select-option value="option">Option</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Datetime</ion-label>
|
||||
<ion-datetime value="2020-03-04"></ion-datetime>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Select</ion-label>
|
||||
<ion-select value="option">
|
||||
<ion-select-option value="option">Option</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
ion-content {
|
||||
--background: #f6f6f6;
|
||||
}
|
||||
|
||||
ion-list {
|
||||
background: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
<style>
|
||||
ion-content {
|
||||
--background: #f6f6f6;
|
||||
}
|
||||
|
||||
ion-list {
|
||||
background: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('label: headings', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/label/test/headings?ionic:_testing=true'
|
||||
url: '/src/components/label/test/headings?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
|
||||
@ -1,70 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Label - Headings</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="../../../../../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>Label - Headings</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="../../../../../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>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Label - Headings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">
|
||||
<h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">
|
||||
<h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">
|
||||
<h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Label - Headings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis
|
||||
reprehenderit ipsa nostrum aperiam optio porro?
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis
|
||||
reprehenderit ipsa nostrum aperiam optio porro?
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">
|
||||
<h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h2>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis
|
||||
reprehenderit ipsa nostrum aperiam optio porro?
|
||||
</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">
|
||||
<h2>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis
|
||||
reprehenderit ipsa nostrum aperiam optio porro?
|
||||
</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis
|
||||
reprehenderit ipsa nostrum aperiam optio porro?
|
||||
</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">
|
||||
<h3>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis
|
||||
reprehenderit ipsa nostrum aperiam optio porro?
|
||||
</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('label: standalone', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/label/test/standalone?ionic:_testing=true'
|
||||
url: '/src/components/label/test/standalone?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
|
||||
@ -1,41 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Label - 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>Label - 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>
|
||||
<h1>Default</h1>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-label>Wrap label this label just goes on and on and on</ion-label>
|
||||
<ion-label position="fixed">Fixed</ion-label>
|
||||
<ion-label position="floating" style="margin-bottom: 30px">Floating</ion-label>
|
||||
<ion-label position="stacked">Stacked</ion-label>
|
||||
|
||||
<body>
|
||||
<h1>Default</h1>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-label>Wrap label this label just goes on and on and on</ion-label>
|
||||
<ion-label position="fixed">Fixed</ion-label>
|
||||
<ion-label position="floating" style="margin-bottom: 30px;">Floating</ion-label>
|
||||
<ion-label position="stacked">Stacked</ion-label>
|
||||
<h1>Colors</h1>
|
||||
<ion-label color="primary">Primary</ion-label>
|
||||
<ion-label color="secondary">Secondary</ion-label>
|
||||
<ion-label color="tertiary">Tertiary</ion-label>
|
||||
<ion-label color="success">Success</ion-label>
|
||||
<ion-label color="warning">Warning</ion-label>
|
||||
<ion-label color="danger">Danger</ion-label>
|
||||
<ion-label color="light">Light</ion-label>
|
||||
<ion-label color="medium">Medium</ion-label>
|
||||
<ion-label color="dark" class="custom">Dark</ion-label>
|
||||
<ion-label class="custom">Custom</ion-label>
|
||||
|
||||
<h1>Colors</h1>
|
||||
<ion-label color="primary">Primary</ion-label>
|
||||
<ion-label color="secondary">Secondary</ion-label>
|
||||
<ion-label color="tertiary">Tertiary</ion-label>
|
||||
<ion-label color="success">Success</ion-label>
|
||||
<ion-label color="warning">Warning</ion-label>
|
||||
<ion-label color="danger">Danger</ion-label>
|
||||
<ion-label color="light">Light</ion-label>
|
||||
<ion-label color="medium">Medium</ion-label>
|
||||
<ion-label color="dark" class="custom">Dark</ion-label>
|
||||
<ion-label class="custom">Custom</ion-label>
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
--color: hotpink;
|
||||
}
|
||||
</style>
|
||||
|
||||
</body>
|
||||
<style>
|
||||
.custom {
|
||||
--color: hotpink;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user