mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
feat(spinner): add lines-sharp, lines-sharp-small, update styles for ios 14 (#22397)
Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>
This commit is contained in:
Hans Krywalsky
@ -446,7 +446,7 @@ ion-infinite-scroll,method,complete,complete() => Promise<void>
|
||||
ion-infinite-scroll,event,ionInfinite,void,true
|
||||
|
||||
ion-infinite-scroll-content,none
|
||||
ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
|
||||
ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
|
||||
ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefined,undefined,false,false
|
||||
|
||||
ion-input,scoped
|
||||
@ -626,7 +626,7 @@ ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undef
|
||||
ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,false
|
||||
ion-loading,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-loading,prop,showBackdrop,boolean,true,false,false
|
||||
ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
|
||||
ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
|
||||
ion-loading,prop,translucent,boolean,false,false,false
|
||||
ion-loading,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
|
||||
ion-loading,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
|
||||
@ -918,7 +918,7 @@ ion-refresher,event,ionStart,void,true
|
||||
ion-refresher-content,none
|
||||
ion-refresher-content,prop,pullingIcon,null | string | undefined,undefined,false,false
|
||||
ion-refresher-content,prop,pullingText,IonicSafeString | string | undefined,undefined,false,false
|
||||
ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
|
||||
ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
|
||||
ion-refresher-content,prop,refreshingText,IonicSafeString | string | undefined,undefined,false,false
|
||||
|
||||
ion-reorder,shadow
|
||||
@ -1145,7 +1145,7 @@ ion-slides,css-prop,--scroll-bar-background-active
|
||||
ion-spinner,shadow
|
||||
ion-spinner,prop,color,string | undefined,undefined,false,false
|
||||
ion-spinner,prop,duration,number | undefined,undefined,false,false
|
||||
ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | undefined,undefined,false,false
|
||||
ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
|
||||
ion-spinner,prop,paused,boolean,false,false,false
|
||||
ion-spinner,css-prop,--color
|
||||
|
||||
|
||||
@ -104,10 +104,10 @@ export default defineComponent({
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
|
||||
| `loadingText` | `loading-text` | Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| null \| undefined` | `undefined` |
|
||||
| `loadingText` | `loading-text` | Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
@ -303,20 +303,20 @@ export default defineComponent({
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` |
|
||||
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` |
|
||||
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
|
||||
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` |
|
||||
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
|
||||
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
|
||||
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
|
||||
| `message` | `message` | Optional text content to display in the loading indicator. | `IonicSafeString \| string \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` |
|
||||
| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
|
||||
| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` |
|
||||
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` |
|
||||
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
|
||||
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` |
|
||||
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
|
||||
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
|
||||
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
|
||||
| `message` | `message` | Optional text content to display in the loading indicator. | `IonicSafeString \| string \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` |
|
||||
| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| null \| undefined` | `undefined` |
|
||||
| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
@ -9,12 +9,12 @@ The refresher content contains the text, icon and spinner to display during a pu
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| `pullingIcon` | `pulling-icon` | A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices. | `null \| string \| undefined` | `undefined` |
|
||||
| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` |
|
||||
| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
|
||||
| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| `pullingIcon` | `pulling-icon` | A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices. | `null \| string \| undefined` | `undefined` |
|
||||
| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` |
|
||||
| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| null \| undefined` | `undefined` |
|
||||
| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
@ -160,12 +160,12 @@ export default defineComponent({
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||
| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | `number \| undefined` | `undefined` |
|
||||
| `name` | `name` | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` |
|
||||
| `paused` | `paused` | If `true`, the spinner's animation will be paused. | `boolean` | `false` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||
| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | `number \| undefined` | `undefined` |
|
||||
| `name` | `name` | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| undefined` | `undefined` |
|
||||
| `paused` | `paused` | If `true`, the spinner's animation will be paused. | `boolean` | `false` |
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
@ -81,6 +81,41 @@ const spinners = {
|
||||
},
|
||||
|
||||
'lines': {
|
||||
dur: 1000,
|
||||
lines: 8,
|
||||
fn: (dur: number, index: number, total: number) => {
|
||||
const transform = `rotate(${ (360 / total) * index + (index < (total / 2) ? 180 : -180) }deg)`;
|
||||
const animationDelay = `${ (dur * index / total) - dur }ms`;
|
||||
|
||||
return {
|
||||
y1: 14,
|
||||
y2: 26,
|
||||
style: {
|
||||
'transform': transform,
|
||||
'animation-delay': animationDelay,
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
'lines-small': {
|
||||
dur: 1000,
|
||||
lines: 8,
|
||||
fn: (dur: number, index: number, total: number) => {
|
||||
const transform = `rotate(${(360 / total) * index + (index < (total / 2) ? 180 : -180)}deg)`;
|
||||
const animationDelay = `${ (dur * index / total) - dur }ms`;
|
||||
return {
|
||||
y1: 12,
|
||||
y2: 20,
|
||||
style: {
|
||||
'transform': transform,
|
||||
'animation-delay': animationDelay,
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
'lines-sharp': {
|
||||
dur: 1000,
|
||||
lines: 12,
|
||||
fn: (dur: number, index: number, total: number) => {
|
||||
@ -98,7 +133,7 @@ const spinners = {
|
||||
}
|
||||
},
|
||||
|
||||
'lines-small': {
|
||||
'lines-sharp-small': {
|
||||
dur: 1000,
|
||||
lines: 12,
|
||||
fn: (dur: number, index: number, total: number) => {
|
||||
|
||||
@ -36,18 +36,31 @@ svg {
|
||||
}
|
||||
|
||||
|
||||
// Spinner: lines / lines-small
|
||||
// Spinner: lines / lines-small / lines-sharp / lines-sharp-small
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.spinner-lines) line,
|
||||
:host(.spinner-lines-small) line {
|
||||
stroke-width: 7px;
|
||||
}
|
||||
|
||||
:host(.spinner-lines-sharp) line,
|
||||
:host(.spinner-lines-sharp-small) line {
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
:host(.spinner-lines) line,
|
||||
:host(.spinner-lines-small) line,
|
||||
:host(.spinner-lines-sharp) line,
|
||||
:host(.spinner-lines-sharp-small) line {
|
||||
stroke-linecap: round;
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
:host(.spinner-lines) svg,
|
||||
:host(.spinner-lines-small) svg {
|
||||
:host(.spinner-lines-small) svg,
|
||||
:host(.spinner-lines-sharp) svg,
|
||||
:host(.spinner-lines-sharp-small) svg {
|
||||
animation: spinner-fade-out 1s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
@ -70,7 +70,7 @@ export class Spinner implements ComponentInterface {
|
||||
class={createColorClasses(self.color, {
|
||||
[mode]: true,
|
||||
[`spinner-${spinnerName}`]: true,
|
||||
'spinner-paused': !!self.paused || config.getBoolean('_testing')
|
||||
'spinner-paused': self.paused || config.getBoolean('_testing')
|
||||
})}
|
||||
role="progressbar"
|
||||
style={spinner.elmDuration ? { animationDuration: duration + 'ms' } : {}}
|
||||
@ -104,7 +104,7 @@ const buildLine = (spinner: SpinnerConfig, duration: number, index: number, tota
|
||||
|
||||
return (
|
||||
<svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>
|
||||
<line transform="translate(32,32)" y1={data.y1} y2={data.y2}></line>
|
||||
<line transform="translate(32,32)" y1={data.y1} y2={data.y2} />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@ -39,6 +39,14 @@
|
||||
<ion-spinner slot="start" name="lines-small"></ion-spinner>
|
||||
<code>lines-small</code>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="lines-sharp"></ion-spinner>
|
||||
<code>lines-sharp</code>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="lines-sharp-small"></ion-spinner>
|
||||
<code>lines-sharp-small</code>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="circular"></ion-spinner>
|
||||
<code>circular</code>
|
||||
@ -74,6 +82,14 @@
|
||||
<ion-spinner slot="start" name="lines-small" paused></ion-spinner>
|
||||
<code>lines-small</code>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="lines-sharp" paused></ion-spinner>
|
||||
<code>lines-sharp</code>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="lines-sharp-small" paused></ion-spinner>
|
||||
<code>lines-sharp-small</code>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="circular" paused></ion-spinner>
|
||||
<code>circular</code>
|
||||
|
||||
Reference in New Issue
Block a user