mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
chore(all): sync with main for beta 7
This commit is contained in:
Liam DeBeasi
@ -60,7 +60,7 @@ Notice how `IonBadge` is imported from `@ionic/core/components/ion-badge` rather
|
||||
|
||||
## How to contribute
|
||||
|
||||
[Check out the CONTRIBUTE guide](CONTRIBUTING.md)
|
||||
[Check out the CONTRIBUTE guide](/.github/CONTRIBUTING.md)
|
||||
|
||||
## Related
|
||||
|
||||
|
||||
8
core/src/components.d.ts
vendored
8
core/src/components.d.ts
vendored
@ -2105,7 +2105,7 @@ export namespace Components {
|
||||
*/
|
||||
"pullMin": number;
|
||||
/**
|
||||
* Time it takes the refresher to to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
|
||||
* Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
|
||||
*/
|
||||
"snapbackDuration": string;
|
||||
}
|
||||
@ -2199,7 +2199,7 @@ export namespace Components {
|
||||
*/
|
||||
"push": (url: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean>;
|
||||
/**
|
||||
* By default `ion-router` will match the routes at the root path ("/"). That can be changed when
|
||||
* The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
|
||||
*/
|
||||
"root": string;
|
||||
/**
|
||||
@ -5777,7 +5777,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"pullMin"?: number;
|
||||
/**
|
||||
* Time it takes the refresher to to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
|
||||
* Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
|
||||
*/
|
||||
"snapbackDuration"?: string;
|
||||
}
|
||||
@ -5867,7 +5867,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"onIonRouteWillChange"?: (event: CustomEvent<RouterEventDetail>) => void;
|
||||
/**
|
||||
* By default `ion-router` will match the routes at the root path ("/"). That can be changed when
|
||||
* The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
|
||||
*/
|
||||
"root"?: string;
|
||||
/**
|
||||
|
||||
@ -80,7 +80,7 @@ $alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-to
|
||||
$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default;
|
||||
|
||||
/// @prop - Maximum height of the alert content
|
||||
$alert-md-content-max-height: 240px !default;
|
||||
$alert-md-content-max-height: 266px !default;
|
||||
|
||||
/// @prop - Border width of the alert input
|
||||
$alert-md-input-border-width: 1px !default;
|
||||
|
||||
@ -270,6 +270,13 @@ export class ItemSliding implements ComponentInterface {
|
||||
}
|
||||
|
||||
private onStart() {
|
||||
/**
|
||||
* We need to query for the ion-item
|
||||
* every time the gesture starts. Developers
|
||||
* may toggle ion-item elements via *ngIf.
|
||||
*/
|
||||
this.item = this.el.querySelector('ion-item');
|
||||
|
||||
// Prevent scrolling during gesture
|
||||
this.disableContentScrollY();
|
||||
|
||||
@ -387,16 +394,28 @@ export class ItemSliding implements ComponentInterface {
|
||||
? SlidingState.Start | SlidingState.SwipeStart
|
||||
: SlidingState.Start;
|
||||
} else {
|
||||
/**
|
||||
* Item sliding cannot be interrupted
|
||||
* while closing the item. If it did,
|
||||
* it would allow the item to get into an
|
||||
* inconsistent state where multiple
|
||||
* items are then open at the same time.
|
||||
*/
|
||||
if (this.gesture) {
|
||||
this.gesture.enable(false);
|
||||
}
|
||||
this.tmr = setTimeout(() => {
|
||||
this.state = SlidingState.Disabled;
|
||||
this.tmr = undefined;
|
||||
if (this.gesture) {
|
||||
this.gesture.enable(true);
|
||||
}
|
||||
}, 600) as any;
|
||||
|
||||
openSlidingItem = undefined;
|
||||
style.transform = '';
|
||||
return;
|
||||
}
|
||||
|
||||
style.transform = `translate3d(${-openAmount}px,0,0)`;
|
||||
this.ionDrag.emit({
|
||||
amount: openAmount,
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
<ion-button expand="block" onclick="openItem('start')">Open Item Start</ion-button>
|
||||
<ion-button expand="block" onclick="openItem('end')">Open Item End</ion-button>
|
||||
<ion-button expand="block" onclick="openItemOneSide()">Open Item with only one side</ion-button>
|
||||
<ion-button expand="block" onclick="setDynaicItem()">Swap dynamic item</ion-button>
|
||||
</div>
|
||||
|
||||
<ion-list id="list">
|
||||
@ -369,6 +370,17 @@
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding id="dynamic-item">
|
||||
<ion-item>
|
||||
<ion-label>Dynamic First Item</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options side="end">
|
||||
<ion-item-option color="tertiary" expandable>
|
||||
First Item Options
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">
|
||||
<h2>Normal ion-item (no sliding)</h2>
|
||||
@ -387,6 +399,20 @@
|
||||
</ion-list>
|
||||
|
||||
<script>
|
||||
const setDynaicItem = () => {
|
||||
const sliding = document.querySelector('#dynamic-item');
|
||||
sliding.innerHTML = `
|
||||
<ion-item>
|
||||
<ion-label>Dynamic Second Item</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options side="end">
|
||||
<ion-item-option color="tertiary" expandable>
|
||||
Second Item Options
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
`
|
||||
}
|
||||
|
||||
var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');
|
||||
|
||||
// Toggle the dynamic options
|
||||
|
||||
@ -89,11 +89,10 @@
|
||||
color: #{$item-ios-paragraph-text-color};
|
||||
}
|
||||
|
||||
:host-context(.ion-color)::slotted(p) {
|
||||
:host(.in-item-color)::slotted(p) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
::slotted(*) h2:last-child,
|
||||
::slotted(*) h3:last-child,
|
||||
::slotted(*) h4:last-child,
|
||||
|
||||
@ -188,6 +188,6 @@
|
||||
color: $item-md-paragraph-text-color;
|
||||
}
|
||||
|
||||
:host-context(.ion-color)::slotted(p) {
|
||||
:host(.in-item-color)::slotted(p) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { Color, StyleEventDetail } from '../../interface';
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
|
||||
/**
|
||||
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
||||
@ -101,6 +101,7 @@ export class Label implements ComponentInterface {
|
||||
<Host
|
||||
class={createColorClasses(this.color, {
|
||||
[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'
|
||||
|
||||
10
core/src/components/label/test/color/e2e.ts
Normal file
10
core/src/components/label/test/color/e2e.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('label: color', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/label/test/color?ionic:_testing=true'
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
29
core/src/components/label/test/color/index.html
Normal file
29
core/src/components/label/test/color/index.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<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">
|
||||
<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 - Color</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content color="light">
|
||||
<ion-item>
|
||||
<ion-label>Label Text<p>This paragraph should not inherit the color from content</p></ion-label>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
@ -299,7 +299,7 @@ export default defineComponent({
|
||||
| `pullFactor` | `pull-factor` | How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead. For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved. Does not apply when the refresher content uses a spinner, enabling the native refresher. | `number` | `1` |
|
||||
| `pullMax` | `pull-max` | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when the refresher content uses a spinner, enabling the native refresher. | `number` | `this.pullMin + 60` |
|
||||
| `pullMin` | `pull-min` | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher. | `number` | `60` |
|
||||
| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher. | `string` | `'280ms'` |
|
||||
| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher. | `string` | `'280ms'` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
@ -82,7 +82,7 @@ export class Refresher implements ComponentInterface {
|
||||
@Prop() closeDuration = '280ms';
|
||||
|
||||
/**
|
||||
* Time it takes the refresher to to snap back to the `refreshing` state.
|
||||
* Time it takes the refresher to snap back to the `refreshing` state.
|
||||
* Does not apply when the refresher content uses a spinner,
|
||||
* enabling the native refresher.
|
||||
*/
|
||||
|
||||
@ -76,7 +76,7 @@ interface RouterCustomEvent extends CustomEvent {
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| --------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
|
||||
| `root` | `root` | By default `ion-router` will match the routes at the root path ("/"). That can be changed when | `string` | `'/'` |
|
||||
| `root` | `root` | The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths. | `string` | `'/'` |
|
||||
| `useHash` | `use-hash` | The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page` Using one or another might depend in the requirements of your app and/or where it's deployed. Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work. On the other side hash-navigation is much easier to deploy, it even works over the file protocol. By default, this property is `true`, change to `false` to allow hash-less URLs. | `boolean` | `true` |
|
||||
|
||||
|
||||
|
||||
@ -25,9 +25,8 @@ export class Router implements ComponentInterface {
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
/**
|
||||
* By default `ion-router` will match the routes at the root path ("/").
|
||||
* That can be changed when
|
||||
*
|
||||
* The root path to use when matching URLs. By default, this is set to "/", but you can specify
|
||||
* an alternate prefix for all URL paths.
|
||||
*/
|
||||
@Prop() root = '/';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "./select-popover.vars";
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
ion-list {
|
||||
@include margin($select-popover-list-margin-top, $select-popover-list-margin-end, $select-popover-list-margin-bottom, $select-popover-list-margin-start);
|
||||
:host ion-list {
|
||||
@include margin(0);
|
||||
}
|
||||
|
||||
ion-list-header,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Select
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the select popover list
|
||||
$select-popover-list-margin-top: -1px !default;
|
||||
|
||||
/// @prop - Margin end of the select popover list
|
||||
$select-popover-list-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the select popover list
|
||||
$select-popover-list-margin-bottom: -1px !default;
|
||||
|
||||
/// @prop - Margin start of the select popover list
|
||||
$select-popover-list-margin-start: 0 !default;
|
||||
@ -102,7 +102,7 @@ You can change the background color of the toolbar with the standard title by se
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
ion-title.title-large {
|
||||
color: purple;
|
||||
font-size: 30px;
|
||||
}
|
||||
@ -240,7 +240,7 @@ You can change the background color of the toolbar with the standard title by se
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
ion-title.title-large {
|
||||
color: purple;
|
||||
font-size: 30px;
|
||||
}
|
||||
@ -381,7 +381,7 @@ You can change the background color of the toolbar with the standard title by se
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
ion-title.title-large {
|
||||
color: purple;
|
||||
font-size: 30px;
|
||||
}
|
||||
@ -544,7 +544,7 @@ You can change the background color of the toolbar with the standard title by se
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
ion-title.title-large {
|
||||
color: purple;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
@ -91,7 +91,7 @@ You can change the background color of the toolbar with the standard title by se
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
ion-title.title-large {
|
||||
color: purple;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
@ -91,7 +91,7 @@ You can change the background color of the toolbar with the standard title by se
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
ion-title.title-large {
|
||||
color: purple;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
@ -127,7 +127,7 @@ You can change the background color of the toolbar with the standard title by se
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
ion-title.title-large {
|
||||
color: purple;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
@ -130,7 +130,7 @@ You can change the background color of the toolbar with the standard title by se
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
ion-title.title-large {
|
||||
color: purple;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
@ -152,7 +152,7 @@ You can change the background color of the toolbar with the standard title by se
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
ion-title.title-large {
|
||||
color: purple;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
@ -15,7 +15,21 @@ export const startStatusTap = () => {
|
||||
const contentEl = el.closest('ion-content');
|
||||
if (contentEl) {
|
||||
new Promise(resolve => componentOnReady(contentEl, resolve)).then(() => {
|
||||
writeTask(() => contentEl.scrollToTop(300));
|
||||
writeTask(async () => {
|
||||
|
||||
/**
|
||||
* If scrolling and user taps status bar,
|
||||
* only calling scrollToTop is not enough
|
||||
* as engines like WebKit will jump the
|
||||
* scroll position back down and complete
|
||||
* any in-progress momentum scrolling.
|
||||
*/
|
||||
contentEl.style.setProperty('--overflow', 'hidden');
|
||||
|
||||
await contentEl.scrollToTop(300);
|
||||
|
||||
contentEl.style.removeProperty('--overflow');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user