mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
10 Commits
v5.0.0-rc.
...
v5.0.0-rc.
| Author | SHA1 | Date | |
|---|---|---|---|
|
0a000d8dcc | ||
|
|
cf7091625e | ||
|
|
8983c7006e | ||
|
|
46d43032ec | ||
|
|
4971499026 | ||
|
|
a25007f54f | ||
|
|
0f31624104 | ||
|
|
023ed07f97 | ||
|
|
43d00415a5 | ||
|
|
8c4905f630 |
41
BREAKING.md
41
BREAKING.md
@@ -117,6 +117,7 @@ The way the CSS variables are used for targeting the activated, focused and hove
|
||||
- Item
|
||||
- Menu Button
|
||||
- Segment Button
|
||||
- Tab Button
|
||||
|
||||
Previously, in order to update any of the background colors for the states you would have to know what the opacity was set to. Using the Material Design spec as an example, it would require you to know that the hover state uses a white overlay with an opacity of `.08`. This means that if we had the following set by default:
|
||||
|
||||
@@ -138,50 +139,34 @@ The new way adds the following variables:
|
||||
--background-hover-opacity
|
||||
```
|
||||
|
||||
It also updates the Action Sheet component so that the variables will be prefixed with `button`. See the [Action Sheet](#action-sheet) section in this document for all of the variable names.
|
||||
It also updates the Action Sheet component so that the variables will be prefixed with `button`. See the [Action Sheet](#action-sheet) section in this document for all of the new variable names.
|
||||
|
||||
This allows you to still have control over the opacity if desired, but when updating the state, you only have to set the main variables: `--background-activated`, `--background-focused`, `--background-hover` and the button will still match the spec. This is most important when changing the global theme, as updating the toolbar color will automatically update the hover states for all of the buttons in a toolbar, regardless of their fill and without having to know what each opacity is.
|
||||
|
||||
As a result of these changes, the following global CSS variables will not change the opacity and as such should be treated the same as the `--background-{STATE}` variables:
|
||||
|
||||
```css
|
||||
--ion-item-background-activated
|
||||
--ion-item-background-focused
|
||||
--ion-item-background-hover
|
||||
```
|
||||
|
||||
##### Examples
|
||||
|
||||
```css
|
||||
/* Setting the button background to solid red */
|
||||
/* Setting the button background on hover to solid red */
|
||||
ion-button {
|
||||
--background-hover: red;
|
||||
--background-hover-opacity: 1;
|
||||
}
|
||||
|
||||
/* Setting the action sheet button background on hover to an opaque green */
|
||||
/* Setting the action sheet button background on focus to an opaque green */
|
||||
ion-action-sheet {
|
||||
--button-background-hover: green;
|
||||
--button-background-hover-opacity: 0.5;
|
||||
--button-background-focus: green;
|
||||
--button-background-focus-opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Setting the fab button background to use the text color with the default opacity on md */
|
||||
/*
|
||||
* Setting the fab button background on hover to match the text color with
|
||||
* the default --background-hover-opacity on md
|
||||
*/
|
||||
.md ion-fab-button {
|
||||
--color: #222;
|
||||
--background-hover: #222;
|
||||
}
|
||||
|
||||
/* Setting the theme background for items to use #000 (black) with the default theme opacity */
|
||||
:root {
|
||||
/* is used in item as rgba(0, 0, 0, var(--background-activated-opacity)); */
|
||||
--ion-item-background-activated: #000;
|
||||
|
||||
/* is used in item as rgba(0, 0, 0, var(--background-focused-opacity)); */
|
||||
--ion-item-background-focused: #000;
|
||||
|
||||
/* is used in item as rgba(0, 0, 0, var(--background-hover-opacity)); */
|
||||
--ion-item-background-hover: #000;
|
||||
}
|
||||
```
|
||||
|
||||
##### Global CSS Properties
|
||||
@@ -343,7 +328,7 @@ For more information see the [List Header usage](https://ionicframework.com/docs
|
||||
- The `swipeEnable()` function has been removed in Angular, use `swipeGesture()` instead.
|
||||
- The `side` values `left` and `right` have been removed, use `start` and `end` instead.
|
||||
- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
|
||||
|
||||
|
||||
**Before**
|
||||
|
||||
```html
|
||||
@@ -433,6 +418,10 @@ The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get
|
||||
|
||||
Segment was completely revamped to use the new iOS design including an all new gesture that applies for both Material Design and iOS. Due to these changes, some breaking changes were inevitably introduced in order to support the new design.
|
||||
|
||||
##### Events
|
||||
|
||||
`ion-segment` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-segment` instead.
|
||||
|
||||
##### Button States
|
||||
|
||||
- The activated styles and custom CSS properties have been removed. These are no longer being used in the latest spec as the indicator and ripple are used to show activation. Properties removed:
|
||||
|
||||
26
CHANGELOG.md
26
CHANGELOG.md
@@ -1,3 +1,29 @@
|
||||
# [5.0.0-rc.3](https://github.com/ionic-team/ionic/compare/v5.0.0-rc.2...v5.0.0-rc.3) (2020-02-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **refresher:** ensure gesture does not interfere with item-sliding ([#20380](https://github.com/ionic-team/ionic/issues/20380)) ([8983c70](https://github.com/ionic-team/ionic/commit/8983c7006e54743873cd45ae1acdfa974d74547a)), closes [#20379](https://github.com/ionic-team/ionic/issues/20379)
|
||||
* **refresher:** translate background content when refreshing ([#20378](https://github.com/ionic-team/ionic/issues/20378)) ([cf70916](https://github.com/ionic-team/ionic/commit/cf7091625ecb46c3f9882ae9eff5c946523fab75)), closes [#20377](https://github.com/ionic-team/ionic/issues/20377)
|
||||
* **segment:** allow background to be set on iOS segment in a toolbar ([#20350](https://github.com/ionic-team/ionic/issues/20350)) ([0f31624](https://github.com/ionic-team/ionic/commit/0f31624104d195367df197eda9b8d6c5bda4cf75))
|
||||
* **toolbar:** properly apply safe area and border ([#20375](https://github.com/ionic-team/ionic/issues/20375)) ([4971499](https://github.com/ionic-team/ionic/commit/4971499026fcee70a32cc9480302bb14a1bebcb7)), closes [#20354](https://github.com/ionic-team/ionic/issues/20354)
|
||||
|
||||
|
||||
|
||||
# [5.0.0-rc.2](https://github.com/ionic-team/ionic/compare/v5.0.0-rc.1...v5.0.0-rc.2) (2020-01-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **header:** fix race condition in collapsible header ([#20334](https://github.com/ionic-team/ionic/issues/20334)) ([215d55f](https://github.com/ionic-team/ionic/commit/215d55f1ebeb93988b513c5869faae14d1d51919))
|
||||
* **ios:** translucent toolbar blur no longer obscures entering page toolbar content ([#20314](https://github.com/ionic-team/ionic/issues/20314)) ([e580b88](https://github.com/ionic-team/ionic/commit/e580b884770a086ee5d8acf61588ea50181786e6)), closes [#19158](https://github.com/ionic-team/ionic/issues/19158)
|
||||
* **radio:** do not clear radio group value from radio ([#20343](https://github.com/ionic-team/ionic/issues/20343)) ([ff78e6e](https://github.com/ionic-team/ionic/commit/ff78e6e8ca8ae4dc2a6d401b377dd3977c48824a)), closes [#20323](https://github.com/ionic-team/ionic/issues/20323)
|
||||
* **radio:** set default radio value if undefined ([#20329](https://github.com/ionic-team/ionic/issues/20329)) ([eb57723](https://github.com/ionic-team/ionic/commit/eb57723785ce5b05585bf48bf9c8ae1b62235ba2))
|
||||
* **refresher:** add correct fallbacks for native refreshers ([#20333](https://github.com/ionic-team/ionic/issues/20333)) ([fd55427](https://github.com/ionic-team/ionic/commit/fd55427991e94488d86971aaa10acb13d7fa1c23))
|
||||
* **refresher:** resolve undefined issues when updating component ([#20322](https://github.com/ionic-team/ionic/issues/20322)) ([59d8687](https://github.com/ionic-team/ionic/commit/59d86873a2ab913358b084bb05180ba176893a8f)), closes [#20320](https://github.com/ionic-team/ionic/issues/20320)
|
||||
|
||||
|
||||
|
||||
# [5.0.0-rc.1](https://github.com/ionic-team/ionic/compare/v4.11.10...v5.0.0-rc.1) (2020-01-27)
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/angular",
|
||||
"version": "5.0.0-rc.1",
|
||||
"version": "5.0.0-rc.3",
|
||||
"description": "Angular specific wrappers for @ionic/core",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -42,7 +42,7 @@
|
||||
"validate": "npm i && npm run lint && npm run test && npm run build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ionic/core": "5.0.0-rc.1",
|
||||
"@ionic/core": "5.0.0-rc.3",
|
||||
"tslib": "^1.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@@ -320,7 +320,7 @@ ion-datetime,prop,monthShortNames,string | string[] | undefined,undefined,false,
|
||||
ion-datetime,prop,monthValues,number | number[] | string | undefined,undefined,false,false
|
||||
ion-datetime,prop,name,string,this.inputId,false,false
|
||||
ion-datetime,prop,pickerFormat,string | undefined,undefined,false,false
|
||||
ion-datetime,prop,pickerOptions,undefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: "ios" | "md" | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; },undefined,false,false
|
||||
ion-datetime,prop,pickerOptions,undefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; showBackdrop?: boolean | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: "ios" | "md" | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; },undefined,false,false
|
||||
ion-datetime,prop,placeholder,null | string | undefined,undefined,false,false
|
||||
ion-datetime,prop,readonly,boolean,false,false,false
|
||||
ion-datetime,prop,value,null | string | undefined,undefined,false,false
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "5.0.0-rc.1",
|
||||
"version": "5.0.0-rc.3",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
|
||||
@@ -97,7 +97,7 @@ export const CardExample: React.FC = () => (
|
||||
</IonCard>
|
||||
|
||||
<IonCard>
|
||||
<IonItem href="#" class="ion-activated">
|
||||
<IonItem href="#" className="ion-activated">
|
||||
<IonIcon name="wifi" slot="start" />
|
||||
<IonLabel>Card Link Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
@@ -107,7 +107,7 @@ export const CardExample: React.FC = () => (
|
||||
<IonLabel>Card Link Item 2</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem class="ion-activated">
|
||||
<IonItem className="ion-activated">
|
||||
<IonIcon name="warning" slot="start" />
|
||||
<IonLabel>Card Button Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
@@ -30,7 +30,7 @@ export const CardExample: React.FC = () => (
|
||||
</IonCard>
|
||||
|
||||
<IonCard>
|
||||
<IonItem href="#" class="ion-activated">
|
||||
<IonItem href="#" className="ion-activated">
|
||||
<IonIcon name="wifi" slot="start" />
|
||||
<IonLabel>Card Link Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
@@ -40,7 +40,7 @@ export const CardExample: React.FC = () => (
|
||||
<IonLabel>Card Link Item 2</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem class="ion-activated">
|
||||
<IonItem className="ion-activated">
|
||||
<IonIcon name="warning" slot="start" />
|
||||
<IonLabel>Card Button Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
@@ -657,31 +657,31 @@ export const DateTimeExample: React.FC = () => (
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- |
|
||||
| `cancelText` | `cancel-text` | The text to display on the picker's cancel button. | `string` | `'Cancel'` |
|
||||
| `dayNames` | `day-names` | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
|
||||
| `dayShortNames` | `day-short-names` | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
|
||||
| `dayValues` | `day-values` | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. | `number \| number[] \| string \| undefined` | `undefined` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the datetime. | `boolean` | `false` |
|
||||
| `displayFormat` | `display-format` | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`. | `string` | `'MMM D, YYYY'` |
|
||||
| `displayTimezone` | `display-timezone` | The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone. | `string \| undefined` | `undefined` |
|
||||
| `doneText` | `done-text` | The text to display on the picker's "Done" button. | `string` | `'Done'` |
|
||||
| `hourValues` | `hour-values` | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers. | `number \| number[] \| string \| undefined` | `undefined` |
|
||||
| `max` | `max` | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year. | `string \| undefined` | `undefined` |
|
||||
| `min` | `min` | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today. | `string \| undefined` | `undefined` |
|
||||
| `minuteValues` | `minute-values` | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`. | `number \| number[] \| string \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
|
||||
| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
|
||||
| `monthValues` | `month-values` | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined` | `undefined` |
|
||||
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
|
||||
| `pickerFormat` | `picker-format` | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. | `string \| undefined` | `undefined` |
|
||||
| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../picker) for the picker options. | `undefined \| { columns?: PickerColumn[] \| undefined; buttons?: PickerButton[] \| undefined; cssClass?: string \| string[] \| undefined; backdropDismiss?: boolean \| undefined; animated?: boolean \| undefined; mode?: "ios" \| "md" \| undefined; keyboardClose?: boolean \| undefined; id?: string \| undefined; enterAnimation?: AnimationBuilder \| undefined; leaveAnimation?: AnimationBuilder \| undefined; }` | `undefined` |
|
||||
| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` | `undefined` |
|
||||
| `readonly` | `readonly` | If `true`, the datetime appears normal but is not interactive. | `boolean` | `false` |
|
||||
| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` | `undefined` |
|
||||
| `yearValues` | `year-values` | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number \| number[] \| string \| undefined` | `undefined` |
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
|
||||
| `cancelText` | `cancel-text` | The text to display on the picker's cancel button. | `string` | `'Cancel'` |
|
||||
| `dayNames` | `day-names` | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
|
||||
| `dayShortNames` | `day-short-names` | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
|
||||
| `dayValues` | `day-values` | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. | `number \| number[] \| string \| undefined` | `undefined` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the datetime. | `boolean` | `false` |
|
||||
| `displayFormat` | `display-format` | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`. | `string` | `'MMM D, YYYY'` |
|
||||
| `displayTimezone` | `display-timezone` | The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone. | `string \| undefined` | `undefined` |
|
||||
| `doneText` | `done-text` | The text to display on the picker's "Done" button. | `string` | `'Done'` |
|
||||
| `hourValues` | `hour-values` | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers. | `number \| number[] \| string \| undefined` | `undefined` |
|
||||
| `max` | `max` | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year. | `string \| undefined` | `undefined` |
|
||||
| `min` | `min` | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today. | `string \| undefined` | `undefined` |
|
||||
| `minuteValues` | `minute-values` | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`. | `number \| number[] \| string \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||
| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
|
||||
| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` |
|
||||
| `monthValues` | `month-values` | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined` | `undefined` |
|
||||
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
|
||||
| `pickerFormat` | `picker-format` | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. | `string \| undefined` | `undefined` |
|
||||
| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../picker) for the picker options. | `undefined \| { columns?: PickerColumn[] \| undefined; buttons?: PickerButton[] \| undefined; cssClass?: string \| string[] \| undefined; showBackdrop?: boolean \| undefined; backdropDismiss?: boolean \| undefined; animated?: boolean \| undefined; mode?: "ios" \| "md" \| undefined; keyboardClose?: boolean \| undefined; id?: string \| undefined; enterAnimation?: AnimationBuilder \| undefined; leaveAnimation?: AnimationBuilder \| undefined; }` | `undefined` |
|
||||
| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` | `undefined` |
|
||||
| `readonly` | `readonly` | If `true`, the datetime appears normal but is not interactive. | `boolean` | `false` |
|
||||
| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` | `undefined` |
|
||||
| `yearValues` | `year-values` | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number \| number[] \| string \| undefined` | `undefined` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// iOS Footer
|
||||
// --------------------------------------------------
|
||||
|
||||
.footer-ios ion-toolbar:first-child {
|
||||
.footer-ios ion-toolbar:first-of-type {
|
||||
--border-width: #{$hairlines-width} 0 0;
|
||||
}
|
||||
|
||||
@@ -21,6 +21,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.footer-ios.ion-no-border ion-toolbar:first-child {
|
||||
.footer-ios.ion-no-border ion-toolbar:first-of-type {
|
||||
--border-width: 0;
|
||||
}
|
||||
@@ -14,6 +14,6 @@ ion-footer {
|
||||
z-index: $z-index-toolbar;
|
||||
}
|
||||
|
||||
ion-footer ion-toolbar:last-child {
|
||||
ion-footer ion-toolbar:last-of-type {
|
||||
padding-bottom: var(--ion-safe-area-bottom, 0);
|
||||
}
|
||||
@@ -250,9 +250,9 @@ export const GridExample: React.FC = () => (
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol class="ion-align-self-start">ion-col start</IonCol>
|
||||
<IonCol class="ion-align-self-center">ion-col center</IonCol>
|
||||
<IonCol class="ion-align-self-end">ion-col end</IonCol>
|
||||
<IonCol className="ion-align-self-start">ion-col start</IonCol>
|
||||
<IonCol className="ion-align-self-center">ion-col center</IonCol>
|
||||
<IonCol className="ion-align-self-end">ion-col end</IonCol>
|
||||
<IonCol>
|
||||
ion-col
|
||||
<br />#
|
||||
@@ -260,10 +260,10 @@ export const GridExample: React.FC = () => (
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow class="ion-align-items-start">
|
||||
<IonRow className="ion-align-items-start">
|
||||
<IonCol>start ion-col</IonCol>
|
||||
<IonCol>start ion-col</IonCol>
|
||||
<IonCol class="ion-align-self-end">start ion-col end</IonCol>
|
||||
<IonCol className="ion-align-self-end">start ion-col end</IonCol>
|
||||
<IonCol>
|
||||
ion-col
|
||||
<br />#
|
||||
@@ -271,7 +271,7 @@ export const GridExample: React.FC = () => (
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow class="ion-align-items-center">
|
||||
<IonRow className="ion-align-items-center">
|
||||
<IonCol>center ion-col</IonCol>
|
||||
<IonCol>center ion-col</IonCol>
|
||||
<IonCol>center ion-col</IonCol>
|
||||
@@ -282,9 +282,9 @@ export const GridExample: React.FC = () => (
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow class="ion-align-items-end">
|
||||
<IonRow className="ion-align-items-end">
|
||||
<IonCol>end ion-col</IonCol>
|
||||
<IonCol class="ion-align-self-start">end ion-col start</IonCol>
|
||||
<IonCol className="ion-align-self-start">end ion-col start</IonCol>
|
||||
<IonCol>end ion-col</IonCol>
|
||||
<IonCol>
|
||||
ion-col
|
||||
|
||||
@@ -51,9 +51,9 @@ export const GridExample: React.FC = () => (
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol class="ion-align-self-start">ion-col start</IonCol>
|
||||
<IonCol class="ion-align-self-center">ion-col center</IonCol>
|
||||
<IonCol class="ion-align-self-end">ion-col end</IonCol>
|
||||
<IonCol className="ion-align-self-start">ion-col start</IonCol>
|
||||
<IonCol className="ion-align-self-center">ion-col center</IonCol>
|
||||
<IonCol className="ion-align-self-end">ion-col end</IonCol>
|
||||
<IonCol>
|
||||
ion-col
|
||||
<br />#
|
||||
@@ -61,10 +61,10 @@ export const GridExample: React.FC = () => (
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow class="ion-align-items-start">
|
||||
<IonRow className="ion-align-items-start">
|
||||
<IonCol>start ion-col</IonCol>
|
||||
<IonCol>start ion-col</IonCol>
|
||||
<IonCol class="ion-align-self-end">start ion-col end</IonCol>
|
||||
<IonCol className="ion-align-self-end">start ion-col end</IonCol>
|
||||
<IonCol>
|
||||
ion-col
|
||||
<br />#
|
||||
@@ -72,7 +72,7 @@ export const GridExample: React.FC = () => (
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow class="ion-align-items-center">
|
||||
<IonRow className="ion-align-items-center">
|
||||
<IonCol>center ion-col</IonCol>
|
||||
<IonCol>center ion-col</IonCol>
|
||||
<IonCol>center ion-col</IonCol>
|
||||
@@ -83,9 +83,9 @@ export const GridExample: React.FC = () => (
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow class="ion-align-items-end">
|
||||
<IonRow className="ion-align-items-end">
|
||||
<IonCol>end ion-col</IonCol>
|
||||
<IonCol class="ion-align-self-start">end ion-col start</IonCol>
|
||||
<IonCol className="ion-align-self-start">end ion-col start</IonCol>
|
||||
<IonCol>end ion-col</IonCol>
|
||||
<IonCol>
|
||||
ion-col
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// iOS Header
|
||||
// --------------------------------------------------
|
||||
|
||||
.header-ios ion-toolbar:last-child {
|
||||
.header-ios ion-toolbar:last-of-type {
|
||||
--border-width: 0 0 #{$hairlines-width};
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.header-ios.ion-no-border ion-toolbar:last-child {
|
||||
.header-ios.ion-no-border ion-toolbar:last-of-type {
|
||||
--border-width: 0;
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header-collapse-condense ion-toolbar:first-child {
|
||||
.header-collapse-condense ion-toolbar:first-of-type {
|
||||
padding-top: 7px;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
@@ -14,6 +14,6 @@ ion-header {
|
||||
z-index: $z-index-toolbar;
|
||||
}
|
||||
|
||||
ion-header ion-toolbar:first-child {
|
||||
ion-header ion-toolbar:first-of-type {
|
||||
padding-top: var(--ion-safe-area-top, 0);
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
--color-activated: var(--color);
|
||||
--color-focused: var(--color);
|
||||
--color-hover: var(--color);
|
||||
--ripple-color: var(--ion-item-background-activated, currentColor);
|
||||
--ripple-color: currentColor;
|
||||
|
||||
@include font-smoothing();
|
||||
|
||||
|
||||
@@ -778,14 +778,14 @@ const Example: React.FC<{}> = () => (
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel class="ion-text-wrap">
|
||||
<IonLabel className="ion-text-wrap">
|
||||
Multiline text that should wrap when it is too long
|
||||
to fit on one line in the item.
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel class="ion-text-wrap">
|
||||
<IonLabel className="ion-text-wrap">
|
||||
<IonText color="primary">
|
||||
<h3>H3 Primary Title</h3>
|
||||
</IonText>
|
||||
|
||||
@@ -67,14 +67,14 @@ const Example: React.FC<{}> = () => (
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel class="ion-text-wrap">
|
||||
<IonLabel className="ion-text-wrap">
|
||||
Multiline text that should wrap when it is too long
|
||||
to fit on one line in the item.
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel class="ion-text-wrap">
|
||||
<IonLabel className="ion-text-wrap">
|
||||
<IonText color="primary">
|
||||
<h3>H3 Primary Title</h3>
|
||||
</IonText>
|
||||
|
||||
@@ -90,7 +90,7 @@ export const LabelExample: React.FC = () => (
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel class="ion-text-wrap">
|
||||
<IonLabel className="ion-text-wrap">
|
||||
Multi-line text that should wrap when it is too long
|
||||
to fit on one line in the item.
|
||||
</IonLabel>
|
||||
|
||||
@@ -20,7 +20,7 @@ export const LabelExample: React.FC = () => (
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel class="ion-text-wrap">
|
||||
<IonLabel className="ion-text-wrap">
|
||||
Multi-line text that should wrap when it is too long
|
||||
to fit on one line in the item.
|
||||
</IonLabel>
|
||||
|
||||
@@ -228,7 +228,7 @@ export const MenuExample: React.FC = () => (
|
||||
</IonContent>
|
||||
</IonMenu>
|
||||
|
||||
<IonMenu side="start" menuId="custom" class="my-custom-menu">
|
||||
<IonMenu side="start" menuId="custom" className="my-custom-menu">
|
||||
<IonHeader>
|
||||
<IonToolbar color="tertiary">
|
||||
<IonTitle>Custom Menu</IonTitle>
|
||||
|
||||
@@ -21,7 +21,7 @@ export const MenuExample: React.FC = () => (
|
||||
</IonContent>
|
||||
</IonMenu>
|
||||
|
||||
<IonMenu side="start" menuId="custom" class="my-custom-menu">
|
||||
<IonMenu side="start" menuId="custom" className="my-custom-menu">
|
||||
<IonHeader>
|
||||
<IonToolbar color="tertiary">
|
||||
<IonTitle>Custom Menu</IonTitle>
|
||||
|
||||
@@ -21,6 +21,7 @@ export class Refresher implements ComponentInterface {
|
||||
private didStart = false;
|
||||
private progress = 0;
|
||||
private scrollEl?: HTMLElement;
|
||||
private backgroundContentEl?: HTMLElement;
|
||||
private scrollListenerCallback?: any;
|
||||
private gesture?: Gesture;
|
||||
|
||||
@@ -243,7 +244,7 @@ export class Refresher implements ComponentInterface {
|
||||
gestureName: 'refresher',
|
||||
gesturePriority: 10,
|
||||
direction: 'y',
|
||||
threshold: 0,
|
||||
threshold: 5,
|
||||
onStart: () => {
|
||||
this.pointerDown = true;
|
||||
|
||||
@@ -290,7 +291,7 @@ export class Refresher implements ComponentInterface {
|
||||
gestureName: 'refresher',
|
||||
gesturePriority: 10,
|
||||
direction: 'y',
|
||||
threshold: 0,
|
||||
threshold: 5,
|
||||
canStart: () => this.state !== RefresherState.Refreshing && this.state !== RefresherState.Completing && this.scrollEl!.scrollTop === 0,
|
||||
onStart: (ev: GestureDetail) => {
|
||||
ev.data = { animation: undefined, didStart: false, cancelled: false };
|
||||
@@ -394,6 +395,8 @@ export class Refresher implements ComponentInterface {
|
||||
}
|
||||
|
||||
this.scrollEl = await contentEl.getScrollElement();
|
||||
this.backgroundContentEl = contentEl.shadowRoot!.querySelector('#background-content') as HTMLElement;
|
||||
|
||||
if (shouldUseNativeRefresher(this.el, getIonMode(this))) {
|
||||
this.setupNativeRefresher(contentEl);
|
||||
} else {
|
||||
@@ -652,12 +655,13 @@ export class Refresher implements ComponentInterface {
|
||||
|
||||
this.appliedStyles = (y > 0);
|
||||
writeTask(() => {
|
||||
if (this.scrollEl) {
|
||||
const style = this.scrollEl.style;
|
||||
style.transform = ((y > 0) ? `translateY(${y}px) translateZ(0px)` : 'translateZ(0px)');
|
||||
style.transitionDuration = duration;
|
||||
style.transitionDelay = delay;
|
||||
style.overflow = (overflowVisible ? 'hidden' : '');
|
||||
if (this.scrollEl && this.backgroundContentEl) {
|
||||
const scrollStyle = this.scrollEl.style;
|
||||
const backgroundStyle = this.backgroundContentEl.style;
|
||||
scrollStyle.transform = backgroundStyle.transform = ((y > 0) ? `translateY(${y}px) translateZ(0px)` : 'translateZ(0px)');
|
||||
scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration;
|
||||
scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay;
|
||||
scrollStyle.overflow = (overflowVisible ? 'hidden' : '');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
// Default Segment, In a Toolbar
|
||||
:host(.in-toolbar:not(.ion-color)) {
|
||||
background: var(--ion-toolbar-segment-background, $segment-ios-background-color);
|
||||
background: var(--ion-toolbar-segment-background, var(--background));
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -4,12 +4,14 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Segment - Custom</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<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>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
@@ -88,9 +90,9 @@
|
||||
<ion-label>Disabled</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-segment class="custom-states-background" value="checked">
|
||||
<ion-segment-button value="checked">
|
||||
<ion-label>Checked</ion-label>
|
||||
@@ -102,7 +104,41 @@
|
||||
<ion-label>Disabled</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment class="custom-color" value="dining">
|
||||
<ion-segment-button value="dining">
|
||||
<ion-label>Dining</ion-label>
|
||||
<ion-icon name="cafe"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="travel">
|
||||
<ion-label>Travel</ion-label>
|
||||
<ion-icon name="airplane"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="entertainment">
|
||||
<ion-label>Entertainment</ion-label>
|
||||
<ion-icon name="radio"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment class="custom-color" color="danger" value="dining">
|
||||
<ion-segment-button value="dining">
|
||||
<ion-label>Dining</ion-label>
|
||||
<ion-icon name="cafe"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="travel">
|
||||
<ion-label>Travel</ion-label>
|
||||
<ion-icon name="airplane"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="entertainment">
|
||||
<ion-label>Entertainment</ion-label>
|
||||
<ion-icon name="radio"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding-top">
|
||||
@@ -134,6 +170,21 @@
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment class="custom-color" value="dining">
|
||||
<ion-segment-button value="dining">
|
||||
<ion-label>Dining</ion-label>
|
||||
<ion-icon name="cafe"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="travel">
|
||||
<ion-label>Travel</ion-label>
|
||||
<ion-icon name="airplane"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="entertainment">
|
||||
<ion-label>Entertainment</ion-label>
|
||||
<ion-icon name="radio"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment class="custom-color" color="danger" value="dining">
|
||||
<ion-segment-button value="dining">
|
||||
<ion-label>Dining</ion-label>
|
||||
@@ -341,6 +392,7 @@
|
||||
.custom-states-background ion-segment-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -46,7 +46,7 @@ $z-index-click-block: 99999;
|
||||
|
||||
$z-index-fixed-content: 999;
|
||||
$z-index-scroll-content: 1;
|
||||
$z-index-refresher: 0;
|
||||
$z-index-refresher: -1;
|
||||
|
||||
$z-index-page-container: 0;
|
||||
$z-index-toolbar: 10;
|
||||
|
||||
@@ -91,7 +91,6 @@
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-item-background: #1c1c1c;
|
||||
--ion-item-background-activated: #313131;
|
||||
|
||||
--ion-toolbar-background: #000;
|
||||
--ion-toolbar-color: #fff;
|
||||
|
||||
@@ -11,65 +11,65 @@
|
||||
|
||||
/* :root {
|
||||
--ion-color-primary: #3880ff;
|
||||
--ion-color-primary-rgb: 56,128,255;
|
||||
--ion-color-primary-rgb: 56, 128, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3171e0;
|
||||
--ion-color-primary-tint: #4c8dff;
|
||||
|
||||
--ion-color-secondary: #0cd1e8;
|
||||
--ion-color-secondary-rgb: 12,209,232;
|
||||
--ion-color-secondary: #3dc2ff;
|
||||
--ion-color-secondary-rgb: 61, 194, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||
--ion-color-secondary-shade: #0bb8cc;
|
||||
--ion-color-secondary-tint: #24d6ea;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #36abe0;
|
||||
--ion-color-secondary-tint: #50c8ff;
|
||||
|
||||
--ion-color-tertiary: #7044ff;
|
||||
--ion-color-tertiary-rgb: 112,68,255;
|
||||
--ion-color-tertiary: #5260ff;
|
||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||
--ion-color-tertiary-shade: #633ce0;
|
||||
--ion-color-tertiary-tint: #7e57ff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #4854e0;
|
||||
--ion-color-tertiary-tint: #6370ff;
|
||||
|
||||
--ion-color-success: #10dc60;
|
||||
--ion-color-success-rgb: 16,220,96;
|
||||
--ion-color-success: #2dd36f;
|
||||
--ion-color-success-rgb: 45, 211, 111;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255,255,255;
|
||||
--ion-color-success-shade: #0ec254;
|
||||
--ion-color-success-tint: #28e070;
|
||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-success-shade: #28ba62;
|
||||
--ion-color-success-tint: #42d77d;
|
||||
|
||||
--ion-color-warning: #ffce00;
|
||||
--ion-color-warning-rgb: 255,206,0;
|
||||
--ion-color-warning-contrast: #ffffff;
|
||||
--ion-color-warning-contrast-rgb: 255,255,255;
|
||||
--ion-color-warning-shade: #e0b500;
|
||||
--ion-color-warning-tint: #ffd31a;
|
||||
--ion-color-warning: #ffc409;
|
||||
--ion-color-warning-rgb: 255, 196, 9;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0ac08;
|
||||
--ion-color-warning-tint: #ffca22;
|
||||
|
||||
--ion-color-danger: #f04141;
|
||||
--ion-color-danger-rgb: 245,61,61;
|
||||
--ion-color-danger: #eb445a;
|
||||
--ion-color-danger-rgb: 235, 68, 90;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255,255,255;
|
||||
--ion-color-danger-shade: #d33939;
|
||||
--ion-color-danger-tint: #f25454;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #cf3c4f;
|
||||
--ion-color-danger-tint: #ed576b;
|
||||
|
||||
--ion-color-dark: #222428;
|
||||
--ion-color-dark-rgb: 34,34,34;
|
||||
--ion-color-dark-rgb: 34, 36, 40;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255,255,255;
|
||||
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-dark-shade: #1e2023;
|
||||
--ion-color-dark-tint: #383a3e;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152,154,162;
|
||||
--ion-color-medium: #92949c;
|
||||
--ion-color-medium-rgb: 146, 148, 156;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255,255,255;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-medium-shade: #808289;
|
||||
--ion-color-medium-tint: #9d9fa6;
|
||||
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244,244,244;
|
||||
--ion-color-light-rgb: 244, 245, 248;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--ion-color-light-contrast-rgb: 0,0,0;
|
||||
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-light-shade: #d7d8da;
|
||||
--ion-color-light-tint: #f5f6f9;
|
||||
} */
|
||||
|
||||
@@ -77,5 +77,4 @@
|
||||
--ion-background-color: #778899;
|
||||
--ion-item-background: #fff;
|
||||
--ion-item-border-color: #5bff76;
|
||||
--ion-item-background-activated: #5bff76;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/docs",
|
||||
"version": "5.0.0-rc.1",
|
||||
"version": "5.0.0-rc.3",
|
||||
"description": "Pre-packaged API documentation for the Ionic docs.",
|
||||
"main": "core.json",
|
||||
"types": "core.d.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/angular-server",
|
||||
"version": "5.0.0-rc.1",
|
||||
"version": "5.0.0-rc.3",
|
||||
"description": "Angular SSR Module for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -49,7 +49,7 @@
|
||||
"@angular/core": "8.2.13",
|
||||
"@angular/platform-browser": "8.2.13",
|
||||
"@angular/platform-server": "8.2.13",
|
||||
"@ionic/core": "5.0.0-rc.1",
|
||||
"@ionic/core": "5.0.0-rc.3",
|
||||
"ng-packagr": "5.7.1",
|
||||
"tslint": "^5.12.1",
|
||||
"tslint-ionic-rules": "0.0.21",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/react-router",
|
||||
"version": "5.0.0-rc.1",
|
||||
"version": "5.0.0-rc.3",
|
||||
"description": "React Router wrapper for @ionic/react",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -39,16 +39,16 @@
|
||||
"tslib": "*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ionic/core": "5.0.0-rc.1",
|
||||
"@ionic/react": "5.0.0-rc.1",
|
||||
"@ionic/core": "5.0.0-rc.3",
|
||||
"@ionic/react": "5.0.0-rc.3",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-router": "^5.0.1",
|
||||
"react-router-dom": "^5.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ionic/core": "5.0.0-rc.1",
|
||||
"@ionic/react": "5.0.0-rc.1",
|
||||
"@ionic/core": "5.0.0-rc.3",
|
||||
"@ionic/react": "5.0.0-rc.3",
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.3.2",
|
||||
"@testing-library/user-event": "^7.1.2",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/react",
|
||||
"version": "5.0.0-rc.1",
|
||||
"version": "5.0.0-rc.3",
|
||||
"description": "React specific wrapper for @ionic/core",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -39,7 +39,7 @@
|
||||
"css/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@ionic/core": "5.0.0-rc.1",
|
||||
"@ionic/core": "5.0.0-rc.3",
|
||||
"ionicons": "^5.0.0-13",
|
||||
"tslib": "*"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user