feat(components): improve button states and add new css properties (#19440)
Before users had to know the exact opacity that the MD/iOS spec called for in order to change the hover or focused background color. This allows them to change the background without having to know the opacity. - changes apply to Action Sheet (Buttons), Back Button, Button, FAB Button, Item, Menu Button, Segment Button, Tab Button - greatly reduces the requirement by users to set the background hover, focused states for dark modes and custom themes, also eliminates the need to know what the hover opacity is for each based on the spec - updates the MD dark theme per their spec - adds a component guide for internal use changing Ionic components references #18279 fixes #20213 fixes #19965 BREAKING CHANGE: *Activated Class* The `activated` class that is automatically added to buttons on press has been renamed to `ion-activated`. This will be more consistent with our `ion-focused` class we add and also will reduce conflicts with user's CSS. *CSS Variables* The `--background-hover`, `--background-focused` and `--background-activated` CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following: ``` --background-hover: rgba(44, 44, 44, 0.08); ``` You will likely not see a hover state anymore. It should be updated to only set the desired color: ``` --background-hover: rgba(44, 44, 44); ``` If the opacity desired is something other than what the spec asks for, use: ``` --background-hover: rgba(44, 44, 44); --background-hover-opacity: 1; ```
This commit is contained in:
Brandy Carney
GitHub
parent
445f129e2d
commit
94159291b2
|
|
@ -0,0 +1,443 @@
|
|||
# Ionic Component Implementation Guide
|
||||
|
||||
- [Button States](#button-states)
|
||||
* [Component Structure](#component-structure)
|
||||
* [Activated](#activated)
|
||||
* [Disabled](#disabled)
|
||||
* [Focused](#focused)
|
||||
* [Hover](#hover)
|
||||
* [Ripple Effect](#ripple-effect)
|
||||
* [Example Components](#example-components)
|
||||
* [References](#references)
|
||||
- [Rendering Anchor or Button](#rendering-anchor-or-button)
|
||||
* [Example Components](#example-components-1)
|
||||
* [Component Structure](#component-structure-1)
|
||||
- [Converting Scoped to Shadow](#converting-scoped-to-shadow)
|
||||
|
||||
## Button States
|
||||
|
||||
Any component that renders a button should have the following states: [`activated`](#activated), [`disabled`](#disabled), [`focused`](#focused), [`hover`](#hover). It should also have a [Ripple Effect](#ripple-effect) component added for Material Design.
|
||||
|
||||
### Component Structure
|
||||
|
||||
#### JavaScript
|
||||
|
||||
A component that renders a native button should use the following structure:
|
||||
|
||||
```jsx
|
||||
<Host>
|
||||
<button class="button-native">
|
||||
<span class="button-inner">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</button>
|
||||
</Host>
|
||||
```
|
||||
|
||||
Any other attributes and classes that are included are irrelevant to the button states, but it's important that this structure is followed and the classes above exist. In some cases they may be named something else that makes more sense, such as in item.
|
||||
|
||||
|
||||
#### CSS
|
||||
|
||||
A mixin called `button-state()` has been added to make it easier to setup the states in each component.
|
||||
|
||||
```scss
|
||||
@mixin button-state() {
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
content: "";
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
```
|
||||
|
||||
The following styles should be set for the CSS to work properly. Note that the `button-state()` mixin is included in the `::after` pseudo element of the native button.
|
||||
|
||||
```scss
|
||||
.button-native {
|
||||
/**
|
||||
* All other CSS in this selector is irrelevant to button states
|
||||
* but the following are required styles
|
||||
*/
|
||||
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button-native::after {
|
||||
@include button-state();
|
||||
}
|
||||
|
||||
.button-inner {
|
||||
/**
|
||||
* All other CSS in this selector is irrelevant to button states
|
||||
* but the following are required styles
|
||||
*/
|
||||
|
||||
position: relative;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Activated
|
||||
|
||||
The activated state should be enabled for elements with actions on "press". It usually changes the opacity or background of an element.
|
||||
|
||||
> Make sure the component has the correct [component structure](#component-structure) before continuing.
|
||||
|
||||
#### JavaScript
|
||||
|
||||
The `ion-activatable` class needs to be set on an element that can be activated:
|
||||
|
||||
```jsx
|
||||
render() {
|
||||
return (
|
||||
<Host class='ion-activatable'>
|
||||
<slot></slot>
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Once that is done, the element will get the `ion-activated` class added on press.
|
||||
|
||||
In addition to setting that class, `ion-activatable-instant` can be set in order to have an instant press with no delay:
|
||||
|
||||
```jsx
|
||||
<Host class='ion-activatable ion-activatable-instant'>
|
||||
```
|
||||
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
/**
|
||||
* @prop --color-activated: Color of the button when pressed
|
||||
* @prop --background-activated: Background of the button when pressed
|
||||
* @prop --background-activated-opacity: Opacity of the background when pressed
|
||||
*/
|
||||
```
|
||||
|
||||
Style the `ion-activated` class based on the spec for that element:
|
||||
|
||||
```scss
|
||||
:host(.ion-activated) .button-native {
|
||||
color: var(--color-activated);
|
||||
|
||||
&::after {
|
||||
background: var(--background-activated);
|
||||
|
||||
opacity: var(--background-activated-opacity);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> Order is important! Activated should be before the focused & hover states.
|
||||
|
||||
|
||||
#### User Customization
|
||||
|
||||
Setting the activated state on the `::after` pseudo-element allows the user to customize the activated state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on press, or they can leave out `--background-activated-opacity` and the button will use the default activated opacity to match the spec.
|
||||
|
||||
```css
|
||||
ion-button {
|
||||
--background-activated: red;
|
||||
--background-activated-opacity: 1;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Disabled
|
||||
|
||||
The disabled state should be set via prop on all components that render a native button. Setting a disabled state will change the opacity or color of the button and remove click events from firing.
|
||||
|
||||
#### JavaScript
|
||||
|
||||
The `disabled` property should be set on the component:
|
||||
|
||||
```jsx
|
||||
/**
|
||||
* If `true`, the user cannot interact with the button.
|
||||
*/
|
||||
@Prop({ reflectToAttr: true }) disabled = false;
|
||||
```
|
||||
|
||||
Then, the render function should add the [`aria-disabled`](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-disabled) role to the host, a class that is the element tag name followed by `disabled`, and pass the `disabled` attribute to the native button:
|
||||
|
||||
```jsx
|
||||
render() {
|
||||
const { disabled } = this;
|
||||
|
||||
return (
|
||||
<Host
|
||||
aria-disabled={disabled ? 'true' : null}
|
||||
class={{
|
||||
'button-disabled': disabled
|
||||
}}
|
||||
>
|
||||
<button disabled={disabled}>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
> Note: if the class being added was for `ion-back-button` it would be `back-button-disabled`.
|
||||
|
||||
#### CSS
|
||||
|
||||
The following CSS _at the bare minimum_ should be added for the disabled class, but it should be styled to match the spec:
|
||||
|
||||
```css
|
||||
:host(.button-disabled) {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
```
|
||||
|
||||
#### User Customization
|
||||
|
||||
TODO
|
||||
|
||||
### Focused
|
||||
|
||||
The focused state should be enabled for elements with actions when tabbed to via the keyboard. This will only work inside of an `ion-app`. It usually changes the opacity or background of an element.
|
||||
|
||||
> Make sure the component has the correct [component structure](#component-structure) before continuing.
|
||||
|
||||
#### JavaScript
|
||||
|
||||
The `ion-focusable` class needs to be set on an element that can be focused:
|
||||
|
||||
```jsx
|
||||
render() {
|
||||
return (
|
||||
<Host class='ion-focusable'>
|
||||
<slot></slot>
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Once that is done, the element will get the `ion-focused` class added when the element is tabbed to.
|
||||
|
||||
#### CSS
|
||||
|
||||
Components should be written to include the following focused variables for styling:
|
||||
|
||||
```css
|
||||
/**
|
||||
* @prop --color-focused: Color of the button when tabbed to with the keyboard
|
||||
* @prop --background-focused: Background of the button when tabbed to with the keyboard
|
||||
* @prop --background-focused-opacity: Opacity of the background when tabbed to with the keyboard
|
||||
*/
|
||||
```
|
||||
|
||||
Style the `ion-focused` class based on the spec for that element:
|
||||
|
||||
```scss
|
||||
:host(.ion-focused) .button-native {
|
||||
color: var(--color-focused);
|
||||
|
||||
&::after {
|
||||
background: var(--background-focused);
|
||||
|
||||
opacity: var(--background-focused-opacity);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> Order is important! Focused should be after the activated and before the hover state.
|
||||
|
||||
|
||||
#### User Customization
|
||||
|
||||
Setting the focused state on the `::after` pseudo-element allows the user to customize the focused state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on focus, or they can leave out `--background-focused-opacity` and the button will use the default focus opacity to match the spec.
|
||||
|
||||
```css
|
||||
ion-button {
|
||||
--background-focused: red;
|
||||
--background-focused-opacity: 1;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Hover
|
||||
|
||||
The [hover state](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) happens when a user moves their cursor on top of an element without pressing on it. It should not happen on mobile, only on desktop devices that support hover.
|
||||
|
||||
> Make sure the component has the correct [component structure](#component-structure) before continuing.
|
||||
|
||||
#### CSS
|
||||
|
||||
Components should be written to include the following hover variables for styling:
|
||||
|
||||
```css
|
||||
/**
|
||||
* @prop --color-hover: Color of the button on hover
|
||||
* @prop --background-hover: Background of the button on hover
|
||||
* @prop --background-hover-opacity: Opacity of the background on hover
|
||||
*/
|
||||
```
|
||||
|
||||
Style the `:hover` based on the spec for that element:
|
||||
|
||||
```scss
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) .button-native {
|
||||
color: var(--color-hover);
|
||||
|
||||
&::after {
|
||||
background: var(--background-hover);
|
||||
|
||||
opacity: var(--background-hover-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> Order is important! Hover should be after the activated and focused states.
|
||||
|
||||
|
||||
#### User Customization
|
||||
|
||||
Setting the hover state on the `::after` pseudo-element allows the user to customize the hover state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on hover, or they can leave out `--background-hover-opacity` and the button will use the default hover opacity to match the spec.
|
||||
|
||||
```css
|
||||
ion-button {
|
||||
--background-hover: red;
|
||||
--background-hover-opacity: 1;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Ripple Effect
|
||||
|
||||
The ripple effect should be added to elements for Material Design. It *requires* the `ion-activatable` class to be set on the parent element to work, and relative positioning on the parent.
|
||||
|
||||
```jsx
|
||||
render() {
|
||||
const mode = getIonMode(this);
|
||||
|
||||
return (
|
||||
<Host
|
||||
class={{
|
||||
'ion-activatable': true,
|
||||
}}
|
||||
>
|
||||
<button>
|
||||
<slot></slot>
|
||||
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
|
||||
</button>
|
||||
</Host>
|
||||
);
|
||||
```
|
||||
|
||||
The ripple effect can also accept a different `type`. By default it is `"bounded"` which will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, set the type to `"unbounded"`. An unbounded ripple will exceed the container, so add `overflow: hidden` to the parent to prevent this.
|
||||
|
||||
Make sure to style the ripple effect for that component to accept a color:
|
||||
|
||||
```css
|
||||
ion-ripple-effect {
|
||||
color: var(--ripple-color);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Example Components
|
||||
|
||||
- [ion-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/button)
|
||||
- [ion-back-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/back-button)
|
||||
- [ion-menu-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/menu-button)
|
||||
|
||||
### References
|
||||
|
||||
- [Material Design States](https://material.io/design/interaction/states.html)
|
||||
- [iOS Buttons](https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/)
|
||||
|
||||
|
||||
## Rendering Anchor or Button
|
||||
|
||||
Certain components can render an `<a>` or a `<button>` depending on the presence of an `href` attribute.
|
||||
|
||||
### Example Components
|
||||
|
||||
- [ion-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/button)
|
||||
- [ion-card](https://github.com/ionic-team/ionic/tree/master/core/src/components/card)
|
||||
- [ion-fab-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/fab-button)
|
||||
- [ion-item-option](https://github.com/ionic-team/ionic/tree/master/core/src/components/item-option)
|
||||
- [ion-item](https://github.com/ionic-team/ionic/tree/master/core/src/components/item)
|
||||
|
||||
### Component Structure
|
||||
|
||||
#### JavaScript
|
||||
|
||||
In order to implement a component with a dynamic tag type, set the property that it uses to switch between them, we use `href`:
|
||||
|
||||
```jsx
|
||||
/**
|
||||
* Contains a URL or a URL fragment that the hyperlink points to.
|
||||
* If this property is set, an anchor tag will be rendered.
|
||||
*/
|
||||
@Prop() href: string | undefined;
|
||||
```
|
||||
|
||||
Then use that in order to render the tag:
|
||||
|
||||
```jsx
|
||||
render() {
|
||||
const TagType = href === undefined ? 'button' : 'a' as any;
|
||||
|
||||
return (
|
||||
<Host>
|
||||
<TagType>
|
||||
<slot></slot>
|
||||
</TagType>
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
If the component can render an `<a>`, `<button>` or a `<div>` add in more properties such as a `button` attribute in order to check if it should render a button.
|
||||
|
||||
## Converting Scoped to Shadow
|
||||
|
||||
### CSS
|
||||
|
||||
There will be some CSS issues when converting to shadow. Below are some of the differences.
|
||||
|
||||
**Targeting host + slotted child**
|
||||
|
||||
```css
|
||||
/* IN SCOPED */
|
||||
:host(.ion-color)::slotted(ion-segment-button)
|
||||
|
||||
/* IN SHADOW*/
|
||||
:host(.ion-color) ::slotted(ion-segment-button)
|
||||
```
|
||||
|
||||
**Targeting host-context + host (with a :not)**
|
||||
|
||||
```css
|
||||
/* IN SCOPED */
|
||||
:host-context(ion-toolbar.ion-color):not(.ion-color) {
|
||||
|
||||
/* IN SHADOW */
|
||||
:host-context(ion-toolbar.ion-color):host(:not(.ion-color)) {
|
||||
```
|
||||
|
||||
**Targeting host-context + host (with a :not) > slotted child**
|
||||
|
||||
```css
|
||||
/* IN SCOPED */
|
||||
:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) {
|
||||
|
||||
/* IN SHADOW*/
|
||||
:host-context(ion-toolbar:not(.ion-color)):host(:not(.ion-color)) ::slotted(ion-segment-button) {
|
||||
```
|
||||
234
BREAKING.md
234
BREAKING.md
|
|
@ -14,16 +14,21 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
|||
- [CSS](#css)
|
||||
* [CSS Utilities](#css-utilities)
|
||||
* [Display Classes](#display-classes)
|
||||
* [Activated, Focused, Hover States](#activated--focused--hover-states)
|
||||
* [Activated, Focused, Hover States](#activated-focused-hover-states)
|
||||
* [Distributed Sass](#distributed-sass)
|
||||
- [Components](#components)
|
||||
* [Action Sheet](#action-sheet)
|
||||
* [Anchor](#anchor)
|
||||
* [Back Button](#back-button)
|
||||
* [Button](#button)
|
||||
* [Card](#card)
|
||||
* [Controllers](#controllers)
|
||||
* [FAB Button](#fab-button)
|
||||
* [Item](#item)
|
||||
* [Header / Footer](#header---footer)
|
||||
* [List Header](#list-header)
|
||||
* [Menu](#menu)
|
||||
* [Menu Button](#menu-button)
|
||||
* [Nav Link](#nav-link)
|
||||
* [Radio](#radio)
|
||||
* [Searchbar](#searchbar)
|
||||
|
|
@ -33,6 +38,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
|||
* [Skeleton Text](#skeleton-text)
|
||||
* [Split Pane](#split-pane)
|
||||
* [Toast](#toast)
|
||||
* [Tabs](#tabs)
|
||||
- [Colors](#colors)
|
||||
- [Events](#events)
|
||||
- [Mode](#mode)
|
||||
|
|
@ -43,7 +49,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
|||
|
||||
#### CSS Utilities
|
||||
|
||||
We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes & user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities.
|
||||
We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes and user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities.
|
||||
|
||||
Some examples of what's changed are below. *This is not all-inclusive, see the documentation linked above for all of the available CSS utility classes.*
|
||||
|
||||
|
|
@ -98,9 +104,101 @@ See the [CSS Utilities responsive display documentation](https://ionicframework.
|
|||
|
||||
#### Activated, Focused, Hover States
|
||||
|
||||
The `.activated` class that gets added has been renamed to `.ion-activated` for consistency with how we add focused to elements and to avoid conflicts in users' CSS.
|
||||
The `.activated` class that is automatically added to clickable components has been renamed to `.ion-activated`.
|
||||
|
||||
The way the CSS variables are used for targeting the activated, focused and hover backgrounds have been updated on the following components:
|
||||
|
||||
- Action Sheet
|
||||
- Back Button
|
||||
- Button
|
||||
- FAB Button
|
||||
- Item
|
||||
- Menu Button
|
||||
- Segment 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:
|
||||
|
||||
```css
|
||||
--background-hover: rgba(255, 255, 255, 0.08);
|
||||
```
|
||||
|
||||
If you wanted to change the hover overlay to use black but still match the spec, you'd have to set it to:
|
||||
|
||||
```css
|
||||
--background-hover: rgba(0, 0, 0, 0.08);
|
||||
```
|
||||
|
||||
The new way adds the following variables:
|
||||
|
||||
```css
|
||||
--background-activated-opacity
|
||||
--background-focused-opacity
|
||||
--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.
|
||||
|
||||
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 */
|
||||
ion-button {
|
||||
--background-hover: red;
|
||||
--background-hover-opacity: 1;
|
||||
}
|
||||
|
||||
/* Setting the action sheet button background on hover to an opaque green */
|
||||
ion-action-sheet {
|
||||
--button-background-hover: green;
|
||||
--button-background-hover-opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Setting the fab button background to use the text color with the default 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
|
||||
|
||||
Some variables were renamed, removed or added. See the chart below for the changes.
|
||||
|
||||
| Old variable | Status | New variable |
|
||||
| ----------------------------------------| --------|-------------------------------------------|
|
||||
| `--ion-toolbar-color-unchecked` | renamed | `--ion-toolbar-segment-color` |
|
||||
| `--ion-toolbar-color-checked` | renamed | `--ion-toolbar-segment-color-checked` |
|
||||
| `--ion-toolbar-background-unchecked` | renamed | `--ion-toolbar-segment-background` |
|
||||
| `--ion-toolbar-background-checked` | renamed | `--ion-toolbar-segment-background-checked`|
|
||||
| `--ion-tab-bar-color-activated` | renamed | `--ion-tab-bar-color-selected` |
|
||||
| | added | `--ion-toolbar-segment-indicator-color` |
|
||||
| `--ion-toolbar-color-activated` | removed | |
|
||||
| `--ion-item-background-activated` | removed | |
|
||||
| `--ion-item-background-focused` | removed | |
|
||||
| `--ion-item-background-hover` | removed | |
|
||||
|
||||
<!-- TODO mention some of the changes to the hover values: https://github.com/ionic-team/ionic/pull/19440 -->
|
||||
|
||||
#### Distributed Sass
|
||||
|
||||
|
|
@ -109,20 +207,50 @@ The `scss` files have been removed from `dist/`. CSS variables should be used to
|
|||
|
||||
### Components
|
||||
|
||||
#### Action Sheet
|
||||
|
||||
The following CSS variables have been renamed or added:
|
||||
|
||||
| Old | New |
|
||||
|--------------------------| -------------------------------------------|
|
||||
| | `--button-background` |
|
||||
| `--background-activated` | `--button-background-activated` |
|
||||
| | `--button-background-activated-opacity` |
|
||||
| `--background-selected` | `--button-background-selected` |
|
||||
| | `--button-background-focused` |
|
||||
| | `--button-background-focused-opacity` |
|
||||
| | `--button-background-hover` |
|
||||
| | `--button-background-hover-opacity` |
|
||||
| | `--button-background-selected` |
|
||||
| | `--button-background-selected-opacity` |
|
||||
| | `--button-color` |
|
||||
| | `--button-color-activated` |
|
||||
| | `--button-color-focused` |
|
||||
| | `--button-color-hover` |
|
||||
| | `--button-color-selected` |
|
||||
|
||||
See the [Action Sheet CSS Custom Properties](https://ionicframework.com/docs/api/action-sheet#css-custom-properties) documentation for descriptions.
|
||||
|
||||
|
||||
#### Anchor
|
||||
|
||||
The `ion-anchor` component has been renamed to `ion-router-link` as this is a better description of which component it should be used with. This component should still only be used in vanilla and Stencil JavaScript projects. Angular projects should use an `<a>` and `routerLink` with the Angular router. See the [documentation for router-link](https://ionicframework.com/docs/api/router-link) for more information.
|
||||
|
||||
#### Back Button
|
||||
|
||||
Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
|
||||
- Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
|
||||
- [Focused, Hover States](#activated-focused-hover-states) have been updated.
|
||||
|
||||
#### Button
|
||||
|
||||
- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
|
||||
|
||||
#### Card
|
||||
|
||||
Converted `ion-card` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
|
||||
|
||||
|
||||
### Controllers
|
||||
#### Controllers
|
||||
|
||||
The controller components (`ion-action-sheet-controller`, `ion-alert-controller`, `ion-loading-controller`, `ion-menu-controller`, `ion-modal-controller`, `ion-picker-controller`, `ion-popover-controller`, `ion-toast-controller`) have been removed from Ionic core as elements. They should be imported from `@ionic/core` instead. This will not affect projects that use Angular or React. Below is an example of the loading controller change in a JavaScript project, but this change applies to all controller elements.
|
||||
|
||||
|
|
@ -163,6 +291,15 @@ becomes
|
|||
</script>
|
||||
```
|
||||
|
||||
#### FAB Button
|
||||
|
||||
- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
|
||||
|
||||
|
||||
#### Item
|
||||
|
||||
- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
|
||||
|
||||
|
||||
#### Header / Footer
|
||||
|
||||
|
|
@ -192,6 +329,12 @@ The list header has been redesigned to match the latest iOS spec. This may break
|
|||
```
|
||||
- The presentation type in `ios` now defaults to `"overlay"`.
|
||||
|
||||
|
||||
#### Menu Button
|
||||
|
||||
- [Focused, Hover States](#activated-focused-hover-states) have been updated.
|
||||
|
||||
|
||||
#### Nav Link
|
||||
|
||||
The `ion-nav-push`, `ion-nav-back`, and `ion-nav-set-root` components have been removed in favor of using `ion-nav-link` with a `router-direction` property which accepts `”root”`, `“forward”`, and `“back”`. This reduces the need for maintaining multiple components when they all do the same thing with different transition directions. See the [documentation for nav-link](https://ionicframework.com/docs/api/nav-link) for more information.
|
||||
|
|
@ -254,7 +397,78 @@ The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get
|
|||
|
||||
#### Segment
|
||||
|
||||
<!-- TODO https://gist.github.com/brandyscarney/e6cfe43c359bb2c932e12f8d615e1669 -->
|
||||
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.
|
||||
|
||||
##### 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:
|
||||
```
|
||||
--color-activated
|
||||
--background-activated
|
||||
```
|
||||
- The [Focused & Hover States](#activated-focused-hover-states) have been updated.
|
||||
|
||||
##### Indicator Color
|
||||
|
||||
- `--indicator-color` now applies to the checked segment button (for both `ios` and `md`)
|
||||
- `--indicator-color-checked` has been removed
|
||||
- The Material Design spec does not include an indicator color on non-checked buttons: https://material.io/components/tabs/
|
||||
- In order to style the Segment to match the old spec, please use custom CSS. For example, to update Material Design to include a bottom line all of the time:
|
||||
```css
|
||||
.md ion-segment::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
content: '';
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
|
||||
##### Background & Color
|
||||
|
||||
A `--background` variable has been added to style the `ion-segment` component. As a result of this, the following background variables for a child segment button must now be set on the `ion-segment-button`:
|
||||
|
||||
```
|
||||
--background: Background of the segment button
|
||||
--background-checked: Background of the checked segment button
|
||||
--background-disabled: Background of the disabled segment button
|
||||
--background-hover: Background of the segment button on hover
|
||||
```
|
||||
|
||||
> Note: iOS no longer checks the button background, so setting the `--background-checked` variable may have an undesired outcome. Instead, Segment uses an indicator to slide between the buttons, showing which one is checked. See the previous section on the indicator color variables.
|
||||
|
||||
The above variables *will not* be inherited in the button if set on the `ion-segment`. In addition to this, all color variables should also be set on the button for consistency:
|
||||
|
||||
```
|
||||
--color: Color of the segment button
|
||||
--color-checked: Color of the checked segment button
|
||||
--color-disabled: Color of the disabled segment button
|
||||
--color-hover: Color of the segment button on hover
|
||||
```
|
||||
|
||||
###### Removed variables
|
||||
|
||||
The following variables were removed due to the current spec no longer using them.
|
||||
|
||||
- `--color-checked-disabled`
|
||||
- `--background-disabled`
|
||||
- `--color-disabled`
|
||||
- `--background-activated`
|
||||
- `--color-activated`
|
||||
|
||||
##### Global CSS Properties
|
||||
|
||||
Some variables were renamed or added. See the chart below for the new names.
|
||||
|
||||
| Old variable | Status | New variable |
|
||||
| ----------------------------------------| --------|-------------------------------------------|
|
||||
| `--ion-toolbar-color-unchecked` | renamed | `--ion-toolbar-segment-color` |
|
||||
| `--ion-toolbar-color-checked` | renamed | `--ion-toolbar-segment-color-checked` |
|
||||
| `--ion-toolbar-background-unchecked` | renamed | `--ion-toolbar-segment-background` |
|
||||
| `--ion-toolbar-background-checked` | renamed | `--ion-toolbar-segment-background-checked`|
|
||||
| | added | `--ion-toolbar-segment-indicator-color` |
|
||||
|
||||
|
||||
#### Segment Button
|
||||
|
|
@ -329,6 +543,10 @@ The `width` property has been removed in favor of using CSS styling.
|
|||
</ion-split-pane>
|
||||
```
|
||||
|
||||
#### Tabs
|
||||
|
||||
- [Focused State](#activated-focused-hover-states) have been updated.
|
||||
|
||||
#### Toast
|
||||
|
||||
The close button properties (`showCloseButton` and `closeButtonText`) have been removed. Use the `buttons` array instead with `role: 'cancel'`. See the [usage documentation](https://ionicframework.com/docs/api/toast#usage) for more information.
|
||||
|
|
@ -382,7 +600,7 @@ dark: #222428
|
|||
|
||||
`primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`.
|
||||
|
||||
This will only be a breaking change in your app if you are not using one of our starters & not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired.
|
||||
This will only be a breaking change in your app if you are not using one of our starters and not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired.
|
||||
|
||||
|
||||
### Events
|
||||
|
|
|
|||
37
core/api.txt
37
core/api.txt
|
|
@ -21,8 +21,20 @@ ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail<any>,true
|
|||
ion-action-sheet,event,ionActionSheetWillPresent,void,true
|
||||
ion-action-sheet,css-prop,--backdrop-opacity
|
||||
ion-action-sheet,css-prop,--background
|
||||
ion-action-sheet,css-prop,--background-activated
|
||||
ion-action-sheet,css-prop,--background-selected
|
||||
ion-action-sheet,css-prop,--button-background
|
||||
ion-action-sheet,css-prop,--button-background-activated
|
||||
ion-action-sheet,css-prop,--button-background-activated-opacity
|
||||
ion-action-sheet,css-prop,--button-background-focused
|
||||
ion-action-sheet,css-prop,--button-background-focused-opacity
|
||||
ion-action-sheet,css-prop,--button-background-hover
|
||||
ion-action-sheet,css-prop,--button-background-hover-opacity
|
||||
ion-action-sheet,css-prop,--button-background-selected
|
||||
ion-action-sheet,css-prop,--button-background-selected-opacity
|
||||
ion-action-sheet,css-prop,--button-color
|
||||
ion-action-sheet,css-prop,--button-color-activated
|
||||
ion-action-sheet,css-prop,--button-color-focused
|
||||
ion-action-sheet,css-prop,--button-color-hover
|
||||
ion-action-sheet,css-prop,--button-color-selected
|
||||
ion-action-sheet,css-prop,--color
|
||||
ion-action-sheet,css-prop,--height
|
||||
ion-action-sheet,css-prop,--max-height
|
||||
|
|
@ -77,7 +89,9 @@ ion-back-button,prop,text,null | string | undefined,undefined,false,false
|
|||
ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false
|
||||
ion-back-button,css-prop,--background
|
||||
ion-back-button,css-prop,--background-focused
|
||||
ion-back-button,css-prop,--background-focused-opacity
|
||||
ion-back-button,css-prop,--background-hover
|
||||
ion-back-button,css-prop,--background-hover-opacity
|
||||
ion-back-button,css-prop,--border-radius
|
||||
ion-back-button,css-prop,--color
|
||||
ion-back-button,css-prop,--color-focused
|
||||
|
|
@ -142,8 +156,11 @@ ion-button,event,ionBlur,void,true
|
|||
ion-button,event,ionFocus,void,true
|
||||
ion-button,css-prop,--background
|
||||
ion-button,css-prop,--background-activated
|
||||
ion-button,css-prop,--background-activated-opacity
|
||||
ion-button,css-prop,--background-focused
|
||||
ion-button,css-prop,--background-focused-opacity
|
||||
ion-button,css-prop,--background-hover
|
||||
ion-button,css-prop,--background-hover-opacity
|
||||
ion-button,css-prop,--border-color
|
||||
ion-button,css-prop,--border-radius
|
||||
ion-button,css-prop,--border-style
|
||||
|
|
@ -344,8 +361,11 @@ ion-fab-button,event,ionBlur,void,true
|
|||
ion-fab-button,event,ionFocus,void,true
|
||||
ion-fab-button,css-prop,--background
|
||||
ion-fab-button,css-prop,--background-activated
|
||||
ion-fab-button,css-prop,--background-activated-opacity
|
||||
ion-fab-button,css-prop,--background-focused
|
||||
ion-fab-button,css-prop,--background-focused-opacity
|
||||
ion-fab-button,css-prop,--background-hover
|
||||
ion-fab-button,css-prop,--background-hover-opacity
|
||||
ion-fab-button,css-prop,--border-color
|
||||
ion-fab-button,css-prop,--border-radius
|
||||
ion-fab-button,css-prop,--border-style
|
||||
|
|
@ -469,8 +489,11 @@ ion-item,prop,target,string | undefined,undefined,false,false
|
|||
ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
|
||||
ion-item,css-prop,--background
|
||||
ion-item,css-prop,--background-activated
|
||||
ion-item,css-prop,--background-activated-opacity
|
||||
ion-item,css-prop,--background-focused
|
||||
ion-item,css-prop,--background-focused-opacity
|
||||
ion-item,css-prop,--background-hover
|
||||
ion-item,css-prop,--background-hover-opacity
|
||||
ion-item,css-prop,--border-color
|
||||
ion-item,css-prop,--border-radius
|
||||
ion-item,css-prop,--border-style
|
||||
|
|
@ -632,7 +655,9 @@ ion-menu-button,prop,menu,string | undefined,undefined,false,false
|
|||
ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false
|
||||
ion-menu-button,css-prop,--background
|
||||
ion-menu-button,css-prop,--background-focused
|
||||
ion-menu-button,css-prop,--background-focused-opacity
|
||||
ion-menu-button,css-prop,--background-hover
|
||||
ion-menu-button,css-prop,--background-hover-opacity
|
||||
ion-menu-button,css-prop,--border-radius
|
||||
ion-menu-button,css-prop,--color
|
||||
ion-menu-button,css-prop,--color-focused
|
||||
|
|
@ -957,15 +982,17 @@ ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
|
|||
ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false
|
||||
ion-segment-button,css-prop,--background
|
||||
ion-segment-button,css-prop,--background-checked
|
||||
ion-segment-button,css-prop,--background-disabled
|
||||
ion-segment-button,css-prop,--background-focused
|
||||
ion-segment-button,css-prop,--background-focused-opacity
|
||||
ion-segment-button,css-prop,--background-hover
|
||||
ion-segment-button,css-prop,--background-hover-opacity
|
||||
ion-segment-button,css-prop,--border-color
|
||||
ion-segment-button,css-prop,--border-radius
|
||||
ion-segment-button,css-prop,--border-style
|
||||
ion-segment-button,css-prop,--border-width
|
||||
ion-segment-button,css-prop,--color
|
||||
ion-segment-button,css-prop,--color-checked
|
||||
ion-segment-button,css-prop,--color-disabled
|
||||
ion-segment-button,css-prop,--color-focused
|
||||
ion-segment-button,css-prop,--color-hover
|
||||
ion-segment-button,css-prop,--indicator-box-shadow
|
||||
ion-segment-button,css-prop,--indicator-color
|
||||
|
|
@ -1106,7 +1133,9 @@ ion-tab-button,prop,tab,string | undefined,undefined,false,false
|
|||
ion-tab-button,prop,target,string | undefined,undefined,false,false
|
||||
ion-tab-button,css-prop,--background
|
||||
ion-tab-button,css-prop,--background-focused
|
||||
ion-tab-button,css-prop,--background-focused-opacity
|
||||
ion-tab-button,css-prop,--color
|
||||
ion-tab-button,css-prop,--color-focused
|
||||
ion-tab-button,css-prop,--color-selected
|
||||
ion-tab-button,css-prop,--padding-bottom
|
||||
ion-tab-button,css-prop,--padding-end
|
||||
|
|
|
|||
|
|
@ -6,9 +6,18 @@
|
|||
|
||||
:host {
|
||||
--background: #{$action-sheet-ios-background-color};
|
||||
--background-selected: #{$action-sheet-ios-button-background-selected};
|
||||
--background-activated: #{$action-sheet-ios-button-background-activated};
|
||||
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
|
||||
--button-background: #{$action-sheet-ios-button-background};
|
||||
--button-background-activated: #{$text-color};
|
||||
--button-background-activated-opacity: .08;
|
||||
--button-background-hover: currentColor;
|
||||
--button-background-hover-opacity: .04;
|
||||
--button-background-focused: currentColor;
|
||||
--button-background-focused-opacity: .12;
|
||||
--button-background-selected: #{$action-sheet-ios-button-background-selected};
|
||||
--button-background-selected-opacity: 1;
|
||||
--button-color: #{$action-sheet-ios-button-text-color};
|
||||
--color: #{$action-sheet-ios-title-color};
|
||||
|
||||
text-align: $action-sheet-ios-text-align;
|
||||
}
|
||||
|
|
@ -67,13 +76,13 @@
|
|||
backdrop-filter: $action-sheet-ios-button-translucent-filter;
|
||||
}
|
||||
|
||||
:host(.action-sheet-translucent) .action-sheet-button.activated {
|
||||
:host(.action-sheet-translucent) .action-sheet-button.ion-activated {
|
||||
background-color: $action-sheet-ios-translucent-background-color-activated;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
:host(.action-sheet-translucent) .action-sheet-cancel {
|
||||
background: var(--background-selected);
|
||||
background: var(--button-background-selected);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,16 +91,8 @@
|
|||
// Border is made with a linear gradient in order
|
||||
// to get the proper color and iOS blur effect
|
||||
|
||||
.action-sheet-title,
|
||||
.action-sheet-button {
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%);
|
||||
background-repeat: no-repeat;
|
||||
|
||||
/* stylelint-disable-next-line all */
|
||||
background-position: bottom;
|
||||
|
||||
background-size: 100% 1px;
|
||||
.action-sheet-title {
|
||||
background: $action-sheet-ios-button-background;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -124,8 +125,6 @@
|
|||
|
||||
height: $action-sheet-ios-button-height;
|
||||
|
||||
color: var(--color, $action-sheet-ios-button-text-color);
|
||||
|
||||
font-size: $action-sheet-ios-button-font-size;
|
||||
|
||||
contain: strict;
|
||||
|
|
@ -142,17 +141,30 @@
|
|||
}
|
||||
|
||||
.action-sheet-selected {
|
||||
background: var(--background-selected);
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.action-sheet-destructive {
|
||||
.action-sheet-cancel {
|
||||
font-weight: $action-sheet-ios-button-cancel-font-weight;
|
||||
|
||||
&::after {
|
||||
background: var(--button-background-selected);
|
||||
|
||||
opacity: var(--button-background-selected-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
// iOS Action Sheet Button: Destructive
|
||||
// ---------------------------------------------------
|
||||
|
||||
.action-sheet-destructive,
|
||||
.action-sheet-destructive.ion-activated,
|
||||
.action-sheet-destructive.ion-focused {
|
||||
color: $action-sheet-ios-button-destructive-text-color;
|
||||
}
|
||||
|
||||
.action-sheet-cancel {
|
||||
background: var(--background-selected);
|
||||
|
||||
font-weight: $action-sheet-ios-button-cancel-font-weight;
|
||||
@media (any-hover: hover) {
|
||||
.action-sheet-destructive:hover {
|
||||
color: $action-sheet-ios-button-destructive-text-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ $action-sheet-ios-button-border-color-alpha: .08 !default;
|
|||
$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default;
|
||||
|
||||
/// @prop - Background color of the action sheet button
|
||||
$action-sheet-ios-button-background: transparent !default;
|
||||
$action-sheet-ios-button-background: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent !default;
|
||||
|
||||
/// @prop - Background color alpha of the activated action sheet button
|
||||
$action-sheet-ios-button-background-alpha-activated: .08 !default;
|
||||
|
|
|
|||
|
|
@ -6,9 +6,18 @@
|
|||
|
||||
:host {
|
||||
--background: #{$action-sheet-md-background-color};
|
||||
--background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
|
||||
--background-activated: var(--background);
|
||||
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
|
||||
--button-background: transparent;
|
||||
--button-background-selected: currentColor;
|
||||
--button-background-selected-opacity: 0;
|
||||
--button-background-activated: transparent;
|
||||
--button-background-activated-opacity: 0;
|
||||
--button-background-hover: currentColor;
|
||||
--button-background-hover-opacity: .04;
|
||||
--button-background-focused: currentColor;
|
||||
--button-background-focused-opacity: .12;
|
||||
--button-color: #{var(--color, $action-sheet-md-button-text-color)};
|
||||
--color: #{$action-sheet-md-button-text-color};
|
||||
}
|
||||
|
||||
.action-sheet-title {
|
||||
|
|
@ -52,9 +61,6 @@
|
|||
|
||||
height: $action-sheet-md-button-height;
|
||||
|
||||
background: transparent;
|
||||
color: var(--color, $action-sheet-md-button-text-color);
|
||||
|
||||
font-size: $action-sheet-md-button-font-size;
|
||||
|
||||
text-align: $action-sheet-md-text-align;
|
||||
|
|
@ -67,7 +73,7 @@
|
|||
@include padding(null, null, 4px, null);
|
||||
@include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
|
||||
|
||||
color: var(--color, $action-sheet-md-icon-color);
|
||||
color: #{$action-sheet-md-icon-color};
|
||||
|
||||
font-size: $action-sheet-md-icon-font-size;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,13 +87,6 @@ $action-sheet-md-button-padding-start: $action-sheet-md-button-
|
|||
/// @prop - Background color of the action sheet button
|
||||
$action-sheet-md-button-background: transparent !default;
|
||||
|
||||
/// @prop - Background color of the action sheet activated button
|
||||
$action-sheet-md-button-background-activated: $background-color-step-50 !default;
|
||||
|
||||
/// @prop - Background color of the selected action sheet button
|
||||
$action-sheet-md-button-background-selected: null !default;
|
||||
|
||||
|
||||
// Action Sheet Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -6,9 +6,6 @@
|
|||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the action sheet group
|
||||
* @prop --background-activated: Background of the action sheet button when pressed
|
||||
* @prop --background-selected: Background of the selected action sheet button
|
||||
*
|
||||
* @prop --color: Color of the action sheet text
|
||||
*
|
||||
* @prop --min-width: Minimum width of the action sheet
|
||||
|
|
@ -20,8 +17,28 @@
|
|||
* @prop --max-height: Maximum height of the action sheet
|
||||
*
|
||||
* @prop --backdrop-opacity: Opacity of the backdrop
|
||||
*
|
||||
* @prop --button-background: Background of the action sheet button
|
||||
* @prop --button-background-activated: Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.
|
||||
* @prop --button-background-activated-opacity: Opacity of the action sheet button background when pressed
|
||||
* @prop --button-background-hover: Background of the action sheet button on hover
|
||||
* @prop --button-background-hover-opacity: Opacity of the action sheet button background on hover
|
||||
* @prop --button-background-focused: Background of the action sheet button when tabbed to
|
||||
* @prop --button-background-focused-opacity: Opacity of the action sheet button background when tabbed to
|
||||
* @prop --button-background-selected: Background of the selected action sheet button
|
||||
* @prop --button-background-selected-opacity: Opacity of the selected action sheet button background
|
||||
*
|
||||
* @prop --button-color: Color of the action sheet button
|
||||
* @prop --button-color-activated: Color of the action sheet button when pressed
|
||||
* @prop --button-color-hover: Color of the action sheet button on hover
|
||||
* @prop --button-color-focused: Color of the action sheet button when tabbed to
|
||||
* @prop --button-color-selected: Color of the selected action sheet button
|
||||
*/
|
||||
--color: initial;
|
||||
--button-color-activated: var(--button-color);
|
||||
--button-color-focused: var(--button-color);
|
||||
--button-color-hover: var(--button-color);
|
||||
--button-color-selected: var(--button-color);
|
||||
--min-width: auto;
|
||||
--width: #{$action-sheet-width};
|
||||
--max-width: #{$action-sheet-max-width};
|
||||
|
|
@ -68,6 +85,7 @@
|
|||
|
||||
.action-sheet-button {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -75,16 +93,19 @@
|
|||
|
||||
outline: none;
|
||||
|
||||
font-family: inherit;
|
||||
}
|
||||
background: var(--button-background);
|
||||
color: var(--button-color);
|
||||
|
||||
.action-sheet-button.activated {
|
||||
background: var(--background-activated);
|
||||
font-family: inherit;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.action-sheet-button-inner {
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
flex-flow: row nowrap;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
|
|
@ -92,6 +113,8 @@
|
|||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.action-sheet-container {
|
||||
|
|
@ -124,6 +147,67 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
// Action Sheet: States
|
||||
// --------------------------------------------------
|
||||
|
||||
.action-sheet-button::after {
|
||||
@include button-state();
|
||||
}
|
||||
|
||||
|
||||
// Action Sheet: Selected
|
||||
// --------------------------------------------------
|
||||
|
||||
.action-sheet-selected {
|
||||
background: var(--background-selected);
|
||||
color: var(--button-color-selected);
|
||||
|
||||
&::after {
|
||||
background: var(--button-background-selected);
|
||||
|
||||
opacity: var(--button-background-selected-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Action Sheet: Activated
|
||||
// --------------------------------------------------
|
||||
|
||||
.action-sheet-button.ion-activated {
|
||||
color: var(--button-color-activated);
|
||||
|
||||
&::after {
|
||||
background: var(--button-background-activated);
|
||||
|
||||
opacity: var(--button-background-activated-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Action Sheet: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
.action-sheet-button.ion-focused {
|
||||
color: var(--button-color-focused);
|
||||
|
||||
&::after {
|
||||
background: var(--button-background-focused);
|
||||
|
||||
opacity: var(--button-background-focused-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
// Action Sheet: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.action-sheet-button:hover {
|
||||
color: var(--button-color-hover);
|
||||
|
||||
&::after {
|
||||
background: var(--button-background-hover);
|
||||
|
||||
opacity: var(--button-background-hover-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -226,7 +226,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
|||
</div>
|
||||
}
|
||||
{buttons.map(b =>
|
||||
<button type="button" ion-activatable class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
|
||||
<button type="button" class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
|
||||
<span class="action-sheet-button-inner">
|
||||
{b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
|
||||
{b.text}
|
||||
|
|
@ -252,6 +252,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
|||
/>}
|
||||
{cancelButton.text}
|
||||
</span>
|
||||
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -266,6 +267,7 @@ const buttonClass = (button: ActionSheetButton): CssClassMap => {
|
|||
return {
|
||||
'action-sheet-button': true,
|
||||
'ion-activatable': true,
|
||||
'ion-focusable': true,
|
||||
[`action-sheet-${button.role}`]: button.role !== undefined,
|
||||
...getClassMap(button.cssClass),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -319,19 +319,31 @@ Type: `Promise<void>`
|
|||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ------------------------ | -------------------------------------------------- |
|
||||
| `--backdrop-opacity` | Opacity of the backdrop |
|
||||
| `--background` | Background of the action sheet group |
|
||||
| `--background-activated` | Background of the action sheet button when pressed |
|
||||
| `--background-selected` | Background of the selected action sheet button |
|
||||
| `--color` | Color of the action sheet text |
|
||||
| `--height` | height of the action sheet |
|
||||
| `--max-height` | Maximum height of the action sheet |
|
||||
| `--max-width` | Maximum width of the action sheet |
|
||||
| `--min-height` | Minimum height of the action sheet |
|
||||
| `--min-width` | Minimum width of the action sheet |
|
||||
| `--width` | Width of the action sheet |
|
||||
| Name | Description |
|
||||
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--backdrop-opacity` | Opacity of the backdrop |
|
||||
| `--background` | Background of the action sheet group |
|
||||
| `--button-background` | Background of the action sheet button |
|
||||
| `--button-background-activated` | Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple. |
|
||||
| `--button-background-activated-opacity` | Opacity of the action sheet button background when pressed |
|
||||
| `--button-background-focused` | Background of the action sheet button when tabbed to |
|
||||
| `--button-background-focused-opacity` | Opacity of the action sheet button background when tabbed to |
|
||||
| `--button-background-hover` | Background of the action sheet button on hover |
|
||||
| `--button-background-hover-opacity` | Opacity of the action sheet button background on hover |
|
||||
| `--button-background-selected` | Background of the selected action sheet button |
|
||||
| `--button-background-selected-opacity` | Opacity of the selected action sheet button background |
|
||||
| `--button-color` | Color of the action sheet button |
|
||||
| `--button-color-activated` | Color of the action sheet button when pressed |
|
||||
| `--button-color-focused` | Color of the action sheet button when tabbed to |
|
||||
| `--button-color-hover` | Color of the action sheet button on hover |
|
||||
| `--button-color-selected` | Color of the selected action sheet button |
|
||||
| `--color` | Color of the action sheet text |
|
||||
| `--height` | height of the action sheet |
|
||||
| `--max-height` | Maximum height of the action sheet |
|
||||
| `--max-width` | Maximum width of the action sheet |
|
||||
| `--min-height` | Minimum height of the action sheet |
|
||||
| `--min-width` | Minimum width of the action sheet |
|
||||
| `--width` | Width of the action sheet |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
|
|
|||
|
|
@ -40,10 +40,10 @@
|
|||
<style>
|
||||
.my-color-class {
|
||||
--background: #292929;
|
||||
--background-selected: #222222;
|
||||
--button-background-selected: #222222;
|
||||
|
||||
--color: #dfdfdf;
|
||||
;
|
||||
--button-color: #dfdfdf;
|
||||
}
|
||||
|
||||
.my-custom-class {
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
const actionSheet = await actionSheetController.create(opts);
|
||||
await actionSheet.present();
|
||||
}
|
||||
|
||||
|
||||
async function presentBasic() {
|
||||
const mode = Ionic.mode;
|
||||
await openActionSheet({
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
}, {
|
||||
text: 'Share',
|
||||
icon: 'share',
|
||||
cssClass: 'activated',
|
||||
cssClass: 'ion-activated',
|
||||
handler: () => {
|
||||
console.log('Share clicked');
|
||||
}
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
async function presentWithCssClass(classList) {
|
||||
async function presentWithCssClass(classList) {
|
||||
await openActionSheet({
|
||||
header: "Custom Css Class",
|
||||
cssClass: classList ? classList : "my-color-class my-custom-class",
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
{
|
||||
text: 'Add to Favorites',
|
||||
icon: 'star',
|
||||
cssClass: 'my-custom-button customClass activated',
|
||||
cssClass: 'my-custom-button customClass ion-activated',
|
||||
handler: () => {
|
||||
console.log('Add to Favorites clicked');
|
||||
}
|
||||
|
|
@ -272,7 +272,7 @@
|
|||
}
|
||||
}, {
|
||||
text: 'Copy Text',
|
||||
cssClass: 'activated',
|
||||
cssClass: 'ion-activated',
|
||||
handler: () => {
|
||||
console.log('Copy Text clicked');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@
|
|||
}
|
||||
}, {
|
||||
text: 'Copy Text',
|
||||
cssClass: 'activated',
|
||||
cssClass: 'ion-activated',
|
||||
handler: () => {
|
||||
console.log('Copy Text clicked');
|
||||
}
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
}
|
||||
}, {
|
||||
text: 'Edit Title',
|
||||
cssClass: 'activated',
|
||||
cssClass: 'ion-activated',
|
||||
handler: () => {
|
||||
console.log('Edit Title clicked');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -298,6 +298,6 @@
|
|||
font-weight: $alert-ios-button-main-font-weight;
|
||||
}
|
||||
|
||||
.alert-button.activated {
|
||||
.alert-button.ion-activated {
|
||||
background-color: $alert-ios-button-background-color-activated;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--background-focused: #{ion-color(primary, base, .1)};
|
||||
--background-hover: transparent;
|
||||
--background-hover-opacity: 1;
|
||||
--background-focused: currentColor;
|
||||
--background-focused-opacity: .1;
|
||||
--border-radius: 4px;
|
||||
--color: #{$back-button-ios-color};
|
||||
--icon-margin-end: -5px;
|
||||
|
|
@ -26,21 +29,20 @@
|
|||
// Back Button States
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.activated) .button-native {
|
||||
:host(.ion-activated) .button-native {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) {
|
||||
--opacity: .6;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Back Button Color: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
background: #{current-color(base, .1)};
|
||||
:host(.ion-color.ion-focused) .button-native::after {
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@
|
|||
|
||||
:host {
|
||||
--border-radius: 4px;
|
||||
--background-focused: rgba(66, 66, 66, 0.24);
|
||||
--background-hover: rgba(66, 66, 66, 0.08);
|
||||
--background-focused: currentColor;
|
||||
--background-focused-opacity: .12;
|
||||
--background-hover: currentColor;
|
||||
--background-hover-opacity: 0.04;
|
||||
--color: #{$back-button-md-color};
|
||||
--icon-margin-end: 0;
|
||||
--icon-margin-start: 0;
|
||||
|
|
@ -50,8 +52,8 @@ ion-icon {
|
|||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.ion-color:hover) .button-native {
|
||||
background: #{current-color(base, .08)};
|
||||
:host(.ion-color:hover) .button-native::after {
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,6 +61,6 @@ ion-icon {
|
|||
// Back Button Color: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
background: #{current-color(base, .24)};
|
||||
:host(.ion-color.ion-focused) .button-native::after {
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,13 @@
|
|||
/**
|
||||
* @prop --background: Background of the button
|
||||
* @prop --background-focused: Background of the button when focused with the tab key
|
||||
* @prop --background-hover: Background of the button when hover
|
||||
* @prop --background-focused-opacity: Opacity of the button background when focused with the tab key
|
||||
* @prop --background-hover: Background of the button on hover
|
||||
* @prop --background-hover-opacity: Opacity of the background on hover
|
||||
*
|
||||
* @prop --color: Text color of the button
|
||||
* @prop --color-focused: Text color of the button when focused with the tab key
|
||||
* @prop --color-hover: Text color of the button when hover
|
||||
* @prop --color-hover: Text color of the button on hover
|
||||
*
|
||||
* @prop --min-width: Minimum width of the button
|
||||
* @prop --min-height: Minimum height of the button
|
||||
|
|
@ -48,8 +50,8 @@
|
|||
* @prop --icon-font-weight: Font weight of the button icon
|
||||
*/
|
||||
--background: transparent;
|
||||
--color-focused: var(--color);
|
||||
--color-hover: var(--color);
|
||||
--color-focused: currentColor;
|
||||
--color-hover: currentColor;
|
||||
--icon-margin-top: 0;
|
||||
--icon-margin-bottom: 0;
|
||||
--icon-padding-top: 0;
|
||||
|
|
@ -143,6 +145,8 @@
|
|||
cursor: pointer;
|
||||
|
||||
opacity: var(--opacity);
|
||||
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
appearance: none;
|
||||
|
|
@ -150,6 +154,7 @@
|
|||
|
||||
.button-inner {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex-flow: row nowrap;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -158,6 +163,8 @@
|
|||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -177,22 +184,45 @@ ion-icon {
|
|||
}
|
||||
|
||||
|
||||
// Back Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) .button-native {
|
||||
background: var(--background-hover);
|
||||
color: var(--color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Back Button: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused) .button-native {
|
||||
background: var(--background-focused);
|
||||
color: var(--color-focused);
|
||||
|
||||
&::after {
|
||||
background: var(--background-focused);
|
||||
|
||||
opacity: var(--background-focused-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Back Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-native::after {
|
||||
@include button-state();
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) .button-native {
|
||||
color: var(--color-hover);
|
||||
|
||||
&::after {
|
||||
background: var(--background-hover);
|
||||
|
||||
opacity: var(--background-hover-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Back Button Color: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -206,17 +236,9 @@ ion-icon {
|
|||
}
|
||||
|
||||
|
||||
// Back Button Color: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
||||
|
||||
// Back Button in Toolbar: Global Theming
|
||||
// --------------------------------------------------
|
||||
|
||||
:host-context(ion-toolbar:not(.ion-color)):not(.ion-color) {
|
||||
:host(.in-toolbar) {
|
||||
color: #{var(--ion-toolbar-color, var(--color))};
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ import { config } from '../../global/config';
|
|||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { Color } from '../../interface';
|
||||
import { ButtonInterface } from '../../utils/element-interface';
|
||||
import { createColorClasses, openURL } from '../../utils/theme';
|
||||
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
|
||||
|
||||
/**
|
||||
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
||||
|
|
@ -113,6 +113,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
|
|||
'button': true, // ion-buttons target .button
|
||||
'back-button-disabled': disabled,
|
||||
'back-button-has-icon-only': hasIconOnly,
|
||||
'in-toolbar': hostContext('ion-toolbar', this.el),
|
||||
'ion-activatable': true,
|
||||
'ion-focusable': true,
|
||||
'show-back-button': showBackButton
|
||||
|
|
|
|||
|
|
@ -245,38 +245,40 @@ export const BackButtonExample: React.FC = () => (
|
|||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--background-focused` | Background of the button when focused with the tab key |
|
||||
| `--background-hover` | Background of the button when hover |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-focused` | Text color of the button when focused with the tab key |
|
||||
| `--color-hover` | Text color of the button when hover |
|
||||
| `--icon-font-size` | Font size of the button icon |
|
||||
| `--icon-font-weight` | Font weight of the button icon |
|
||||
| `--icon-margin-bottom` | Bottom margin of the button icon |
|
||||
| `--icon-margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon |
|
||||
| `--icon-margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon |
|
||||
| `--icon-margin-top` | Top margin of the button icon |
|
||||
| `--icon-padding-bottom` | Bottom padding of the button icon |
|
||||
| `--icon-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
|
||||
| `--icon-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
|
||||
| `--icon-padding-top` | Top padding of the button icon |
|
||||
| `--margin-bottom` | Bottom margin of the button |
|
||||
| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button |
|
||||
| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button |
|
||||
| `--margin-top` | Top margin of the button |
|
||||
| `--min-height` | Minimum height of the button |
|
||||
| `--min-width` | Minimum width of the button |
|
||||
| `--opacity` | Opacity of the button |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
| Name | Description |
|
||||
| ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--background-focused` | Background of the button when focused with the tab key |
|
||||
| `--background-focused-opacity` | Opacity of the button background when focused with the tab key |
|
||||
| `--background-hover` | Background of the button on hover |
|
||||
| `--background-hover-opacity` | Opacity of the background on hover |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-focused` | Text color of the button when focused with the tab key |
|
||||
| `--color-hover` | Text color of the button on hover |
|
||||
| `--icon-font-size` | Font size of the button icon |
|
||||
| `--icon-font-weight` | Font weight of the button icon |
|
||||
| `--icon-margin-bottom` | Bottom margin of the button icon |
|
||||
| `--icon-margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon |
|
||||
| `--icon-margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon |
|
||||
| `--icon-margin-top` | Top margin of the button icon |
|
||||
| `--icon-padding-bottom` | Bottom padding of the button icon |
|
||||
| `--icon-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
|
||||
| `--icon-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
|
||||
| `--icon-padding-top` | Top padding of the button icon |
|
||||
| `--margin-bottom` | Bottom margin of the button |
|
||||
| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button |
|
||||
| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button |
|
||||
| `--margin-top` | Top margin of the button |
|
||||
| `--min-height` | Minimum height of the button |
|
||||
| `--min-width` | Minimum width of the button |
|
||||
| `--opacity` | Opacity of the button |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
<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>
|
||||
|
|
@ -75,19 +76,63 @@
|
|||
<p>
|
||||
<ion-back-button class="custom"></ion-back-button>
|
||||
<ion-back-button color="secondary" class="custom"></ion-back-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-back-button class="custom ion-focused"></ion-back-button>
|
||||
<ion-back-button color="secondary" class="custom ion-focused"></ion-back-button>
|
||||
</p>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
<ion-back-button class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Default</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="primary">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
<ion-back-button class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Primary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="light">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
<ion-back-button class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Light</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="success">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
<ion-back-button class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Success</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar class="themed">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
<ion-back-button class="ion-focused"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Themed</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="dark">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button class="ion-hide"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Hidden</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
var buttons = document.querySelectorAll('ion-back-button');
|
||||
|
||||
for(var i = 0; i < buttons.length; i++) {
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].addEventListener('click', (event) => onClick(event));
|
||||
}
|
||||
|
||||
|
|
@ -113,7 +158,9 @@
|
|||
.wide {
|
||||
--background: #d1f3ff;
|
||||
--background-hover: #add8e6;
|
||||
--background-hover-opacity: 1;
|
||||
--background-focused: #84c5db;
|
||||
--background-focused-opacity: 1;
|
||||
|
||||
height: 50px;
|
||||
width: 150px;
|
||||
|
|
@ -140,6 +187,14 @@
|
|||
--padding-end: 10px;
|
||||
}
|
||||
|
||||
.custom:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.themed {
|
||||
--ion-toolbar-background: #222;
|
||||
--ion-toolbar-color: #ddd;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,15 +34,15 @@
|
|||
<ion-back-button color="dark"></ion-back-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-back-button color="primary" class="activated"></ion-back-button>
|
||||
<ion-back-button color="secondary" class="activated"></ion-back-button>
|
||||
<ion-back-button color="tertiary" class="activated"></ion-back-button>
|
||||
<ion-back-button color="success" class="activated"></ion-back-button>
|
||||
<ion-back-button color="warning" class="activated"></ion-back-button>
|
||||
<ion-back-button color="danger" class="activated"></ion-back-button>
|
||||
<ion-back-button color="light" class="activated"></ion-back-button>
|
||||
<ion-back-button color="medium" class="activated"></ion-back-button>
|
||||
<ion-back-button color="dark" class="activated"></ion-back-button>
|
||||
<ion-back-button color="primary" class="ion-activated"></ion-back-button>
|
||||
<ion-back-button color="secondary" class="ion-activated"></ion-back-button>
|
||||
<ion-back-button color="tertiary" class="ion-activated"></ion-back-button>
|
||||
<ion-back-button color="success" class="ion-activated"></ion-back-button>
|
||||
<ion-back-button color="warning" class="ion-activated"></ion-back-button>
|
||||
<ion-back-button color="danger" class="ion-activated"></ion-back-button>
|
||||
<ion-back-button color="light" class="ion-activated"></ion-back-button>
|
||||
<ion-back-button color="medium" class="ion-activated"></ion-back-button>
|
||||
<ion-back-button color="dark" class="ion-activated"></ion-back-button>
|
||||
</p>
|
||||
|
||||
<h3>Custom</h3>
|
||||
|
|
@ -54,13 +54,13 @@
|
|||
|
||||
<!-- Custom Colors -->
|
||||
<ion-back-button class="custom"></ion-back-button>
|
||||
<ion-back-button class="custom activated"></ion-back-button>
|
||||
<ion-back-button class="custom ion-activated"></ion-back-button>
|
||||
<ion-back-button color="secondary" class="custom"></ion-back-button>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
<ion-back-button class="activated"></ion-back-button>
|
||||
<ion-back-button class="ion-activated"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Default</ion-title>
|
||||
</ion-toolbar>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button class="custom"></ion-back-button>
|
||||
<ion-back-button class="custom activated"></ion-back-button>
|
||||
<ion-back-button class="custom ion-activated"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Custom</ion-title>
|
||||
</ion-toolbar>
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button color="secondary"></ion-back-button>
|
||||
<ion-back-button color="secondary" class="activated"></ion-back-button>
|
||||
<ion-back-button color="secondary" class="ion-activated"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Secondary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
<ion-toolbar color="danger">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
<ion-back-button class="activated"></ion-back-button>
|
||||
<ion-back-button class="ion-activated"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Danger</ion-title>
|
||||
</ion-toolbar>
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
<ion-toolbar color="dark">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="Back" icon=""></ion-back-button>
|
||||
<ion-back-button text="Back" icon="" class="activated"></ion-back-button>
|
||||
<ion-back-button text="Back" icon="" class="ion-activated"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Dark</ion-title>
|
||||
</ion-toolbar>
|
||||
|
|
|
|||
|
|
@ -23,20 +23,19 @@
|
|||
letter-spacing: #{$button-ios-letter-spacing};
|
||||
}
|
||||
|
||||
|
||||
// iOS Solid Button
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-solid) {
|
||||
--background-activated: #{ion-color(primary, shade)};
|
||||
--background-focused: #{ion-color(primary, shade)};
|
||||
--background-hover: #{ion-color(primary, tint)};
|
||||
--background-activated-opacity: 1;
|
||||
--background-focused-opacity: 1;
|
||||
--background-hover-opacity: 1;
|
||||
}
|
||||
|
||||
:host(.button-solid.activated) {
|
||||
--opacity: #{$button-ios-opacity-activated};
|
||||
}
|
||||
|
||||
:host(.button-solid.activated.ion-color) .button-native {
|
||||
background: current-color(shade);
|
||||
}
|
||||
|
||||
// iOS Outline Button
|
||||
// --------------------------------------------------
|
||||
|
|
@ -46,28 +45,21 @@
|
|||
--border-width: #{$button-ios-outline-border-width};
|
||||
--border-style: #{$button-ios-outline-border-style};
|
||||
--background-activated: #{ion-color(primary, base)};
|
||||
--background-focused: #{ion-color(primary, base, .1)};
|
||||
--background-focused: #{ion-color(primary, base)};
|
||||
--background-hover: transparent;
|
||||
--background-focused-opacity: .1;
|
||||
--color-activated: #{ion-color(primary, contrast)};
|
||||
}
|
||||
|
||||
:host(.button-outline.activated.ion-color) .button-native {
|
||||
background: current-color(base);
|
||||
color: current-color(contrast);
|
||||
}
|
||||
|
||||
|
||||
// iOS Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-clear.activated) {
|
||||
--opacity: #{$button-ios-clear-opacity-activated};
|
||||
}
|
||||
|
||||
:host(.button-clear) {
|
||||
--background-activated: transparent;
|
||||
--background-focused: #{ion-color(primary, base, .1)};
|
||||
--color-activated: #{ion-color(primary, base)};
|
||||
--color-focused: #{ion-color(primary, base)};
|
||||
--background-focused: #{ion-color(primary, base)};
|
||||
--background-hover: transparent;
|
||||
--background-focused-opacity: .1;
|
||||
|
||||
font-size: #{$button-ios-clear-font-size};
|
||||
font-weight: #{$button-ios-clear-font-weight};
|
||||
|
|
@ -124,29 +116,63 @@
|
|||
}
|
||||
|
||||
|
||||
// iOS Button Focus
|
||||
// iOS Button Activated
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-clear.ion-activated) {
|
||||
opacity: #{$button-ios-clear-opacity-activated};
|
||||
}
|
||||
|
||||
:host(.button-outline.ion-activated.ion-color) .button-native {
|
||||
color: current-color(contrast);
|
||||
|
||||
&::after {
|
||||
background: current-color(base);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.button-solid.ion-color.ion-activated) .button-native::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
// iOS Button Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-outline.ion-focused.ion-color) .button-native,
|
||||
:host(.button-clear.ion-focused.ion-color) .button-native {
|
||||
color: current-color(base);
|
||||
|
||||
&::after {
|
||||
background: current-color(base);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.button-solid.ion-color.ion-focused) .button-native::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
// iOS Button Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.button-solid:hover) {
|
||||
--opacity: #{$button-ios-opacity-hover};
|
||||
}
|
||||
|
||||
// Clear and outline buttons use opacity so set
|
||||
// background to transparent
|
||||
:host(.button-clear:hover),
|
||||
:host(.button-outline:hover) {
|
||||
--opacity: #{$button-ios-clear-opacity-hover};
|
||||
opacity: #{$button-ios-clear-opacity-hover};
|
||||
}
|
||||
|
||||
// Since iOS changes the opacity on hover,
|
||||
// we want to keep the background if focused
|
||||
// or activated
|
||||
:host(.ion-focused:hover) {
|
||||
--background-hover: var(--background-focused);
|
||||
--color-hover: var(--color-focused);
|
||||
:host(.button-clear.ion-color:hover) .button-native,
|
||||
:host(.button-outline.ion-color:hover) .button-native {
|
||||
color: #{current-color(base)};
|
||||
|
||||
&::after {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
:host(.activated:hover) {
|
||||
--background-hover: var(--background-activated);
|
||||
--color-hover: var(--color-activated);
|
||||
// Solid buttons use the tint background
|
||||
:host(.button-solid.ion-color:hover) .button-native::after {
|
||||
background: #{current-color(tint)};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,11 +30,16 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
:host(.button-solid) {
|
||||
--background-activated: var(--background);
|
||||
--background-activated: transparent;
|
||||
--background-hover: #{ion-color(primary, contrast)};
|
||||
--background-focused: #{ion-color(primary, contrast)};
|
||||
--background-activated-opacity: 0;
|
||||
--background-focused-opacity: .24;
|
||||
--background-hover-opacity: .08;
|
||||
--box-shadow: #{$button-md-box-shadow};
|
||||
}
|
||||
|
||||
:host(.button-solid.activated) {
|
||||
:host(.button-solid.ion-activated) {
|
||||
--box-shadow: #{$button-md-box-shadow-activated};
|
||||
}
|
||||
|
||||
|
|
@ -46,12 +51,14 @@
|
|||
--border-style: solid;
|
||||
--box-shadow: none;
|
||||
--background-activated: transparent;
|
||||
--background-focused: #{ion-color(primary, base, .1)};
|
||||
--background-hover: #{ion-color(primary, base, .04)};
|
||||
--color-activated: #{ion-color(primary, base)};
|
||||
--background-focused: #{ion-color(primary, base)};
|
||||
--background-hover: #{ion-color(primary, base)};
|
||||
--background-activated-opacity: 0;
|
||||
--background-focused-opacity: .12;
|
||||
--background-hover-opacity: .04;
|
||||
}
|
||||
|
||||
:host(.button-outline.activated.ion-color) .button-native {
|
||||
:host(.button-outline.ion-activated.ion-color) .button-native {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -61,10 +68,11 @@
|
|||
|
||||
:host(.button-clear) {
|
||||
--background-activated: transparent;
|
||||
--background-focused: #{ion-color(primary, base, .1)};
|
||||
--background-hover: #{ion-color(primary, base, .04)};
|
||||
--color-activated: #{ion-color(primary, base)};
|
||||
--color-focused: #{ion-color(primary, base)};
|
||||
--background-focused: #{ion-color(primary, base)};
|
||||
--background-hover: #{ion-color(primary, base)};
|
||||
--background-activated-opacity: 0;
|
||||
--background-focused-opacity: .12;
|
||||
--background-hover-opacity: .04;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -121,13 +129,33 @@
|
|||
// Material Design Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-solid.ion-color.ion-activated) .button-native::after,
|
||||
:host(.button-solid.ion-color.ion-focused) .button-native::after {
|
||||
background: #{current-color(contrast)};
|
||||
|
||||
opacity: .24;
|
||||
}
|
||||
|
||||
:host(.button-clear.ion-color.ion-activated) .button-native::after,
|
||||
:host(.button-clear.ion-color.ion-focused) .button-native::after,
|
||||
:host(.button-outline.ion-color.ion-activated) .button-native::after,
|
||||
:host(.button-outline.ion-color.ion-focused) .button-native::after {
|
||||
background: #{current-color(base)};
|
||||
|
||||
opacity: .12;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.button-solid.ion-color:hover) .button-native {
|
||||
background: #{current-color(tint)};
|
||||
:host(.button-solid.ion-color:hover) .button-native::after {
|
||||
background: #{current-color(contrast)};
|
||||
|
||||
opacity: .08;
|
||||
}
|
||||
|
||||
:host(.button-clear.ion-color:hover) .button-native,
|
||||
:host(.button-outline.ion-color:hover) .button-native {
|
||||
background: #{current-color(base, .04)};
|
||||
:host(.button-clear.ion-color:hover) .button-native::after,
|
||||
:host(.button-outline.ion-color:hover) .button-native::after {
|
||||
background: #{current-color(base)};
|
||||
|
||||
opacity: .04;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,12 @@
|
|||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the button
|
||||
* @prop --background-activated: Background of the button when pressed
|
||||
* @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
|
||||
* @prop --background-activated-opacity: Opacity of the button when pressed
|
||||
* @prop --background-focused: Background of the button when focused with the tab key
|
||||
* @prop --background-focused-opacity: Opacity of the button when focused with the tab key
|
||||
* @prop --background-hover: Background of the button on hover
|
||||
* @prop --background-hover-opacity: Opacity of the background on hover
|
||||
*
|
||||
* @prop --color: Text color of the button
|
||||
* @prop --color-activated: Text color of the button when pressed
|
||||
|
|
@ -37,7 +40,9 @@
|
|||
--border-width: initial;
|
||||
--border-color: initial;
|
||||
--border-style: initial;
|
||||
--color-hover: initial;
|
||||
--color-activated: var(--color);
|
||||
--color-focused: var(--color);
|
||||
--color-hover: var(--color);
|
||||
--box-shadow: none;
|
||||
|
||||
display: inline-block;
|
||||
|
|
@ -63,12 +68,8 @@
|
|||
}
|
||||
|
||||
:host(.button-disabled) {
|
||||
--opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host(.button-disabled) .button-native {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -78,22 +79,7 @@
|
|||
// Default Solid Color
|
||||
:host(.button-solid) {
|
||||
--background: #{ion-color(primary, base)};
|
||||
--background-focused: #{ion-color(primary, shade)};
|
||||
--background-hover: #{ion-color(primary, tint)};
|
||||
--color: #{ion-color(primary, contrast)};
|
||||
--color-activated: #{ion-color(primary, contrast)};
|
||||
--color-focused: #{ion-color(primary, contrast)};
|
||||
}
|
||||
|
||||
// Solid Button with Color
|
||||
:host(.button-solid.ion-color) .button-native {
|
||||
background: current-color(base);
|
||||
color: current-color(contrast);
|
||||
}
|
||||
|
||||
// Focused/Activated Solid Button with Color
|
||||
:host(.button-solid.ion-color.ion-focused) .button-native {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -105,20 +91,6 @@
|
|||
--border-color: #{ion-color(primary, base)};
|
||||
--background: transparent;
|
||||
--color: #{ion-color(primary, base)};
|
||||
--color-focused: #{ion-color(primary, base)};
|
||||
}
|
||||
|
||||
// Outline Button with Color
|
||||
:host(.button-outline.ion-color) .button-native {
|
||||
border-color: current-color(base);
|
||||
|
||||
background: transparent;
|
||||
color: current-color(base);
|
||||
}
|
||||
|
||||
:host(.button-outline.ion-focused.ion-color) .button-native {
|
||||
background: current-color(base, .1);
|
||||
color: current-color(base);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -132,23 +104,6 @@
|
|||
--color: #{ion-color(primary, base)};
|
||||
}
|
||||
|
||||
// Clear Button with Color
|
||||
:host(.button-clear.ion-color) .button-native {
|
||||
background: transparent;
|
||||
color: current-color(base);
|
||||
}
|
||||
|
||||
// Focused Clear Button with Color
|
||||
:host(.button-clear.ion-focused.ion-color) .button-native {
|
||||
background: current-color(base, .1);
|
||||
color: current-color(base);
|
||||
}
|
||||
|
||||
// Activated Clear Button with Color
|
||||
:host(.button-clear.activated.ion-color) .button-native {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
// Block Button
|
||||
// --------------------------------------------------
|
||||
|
|
@ -229,6 +184,8 @@
|
|||
opacity: var(--opacity);
|
||||
overflow: var(--overflow);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
z-index: 0;
|
||||
box-sizing: border-box;
|
||||
appearance: none;
|
||||
|
|
@ -240,6 +197,7 @@
|
|||
|
||||
.button-inner {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex-flow: row nowrap;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -248,6 +206,8 @@
|
|||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -279,22 +239,69 @@ ion-ripple-effect {
|
|||
color: var(--ripple-color);
|
||||
}
|
||||
|
||||
// Button: Hover
|
||||
|
||||
// Button: States
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused) .button-native {
|
||||
background: var(--background-focused);
|
||||
color: var(--color-focused);
|
||||
.button-native::after {
|
||||
@include button-state();
|
||||
}
|
||||
|
||||
:host(.activated) .button-native {
|
||||
background: var(--background-activated);
|
||||
// Button Activated
|
||||
:host(.ion-activated) {
|
||||
color: var(--color-activated);
|
||||
}
|
||||
|
||||
:host(.ion-activated) .button-native::after {
|
||||
background: var(--background-activated);
|
||||
|
||||
opacity: var(--background-activated-opacity);
|
||||
}
|
||||
|
||||
// Button Focused
|
||||
:host(.ion-focused) {
|
||||
color: var(--color-focused);
|
||||
}
|
||||
|
||||
:host(.ion-focused) .button-native::after {
|
||||
background: var(--background-focused);
|
||||
|
||||
opacity: var(--background-focused-opacity);
|
||||
}
|
||||
|
||||
// Button Hover
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) .button-native {
|
||||
background: var(--background-hover);
|
||||
:host(:hover) {
|
||||
color: var(--color-hover);
|
||||
}
|
||||
|
||||
:host(:hover) .button-native::after {
|
||||
background: var(--background-hover);
|
||||
|
||||
opacity: var(--background-hover-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
// Solid Button with Color
|
||||
:host(.button-solid.ion-color) .button-native {
|
||||
background: current-color(base);
|
||||
color: current-color(contrast);
|
||||
}
|
||||
|
||||
// Outline Button with Color
|
||||
:host(.button-outline.ion-color) .button-native {
|
||||
border-color: current-color(base);
|
||||
|
||||
background: transparent;
|
||||
color: current-color(base);
|
||||
}
|
||||
|
||||
// Clear Button with Color
|
||||
:host(.button-clear.ion-color) .button-native {
|
||||
background: transparent;
|
||||
color: current-color(base);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@ import { createColorClasses, openURL } from '../../utils/theme';
|
|||
* @slot icon-only - Should be used on an icon in a button that has no text.
|
||||
* @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL.
|
||||
* @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
|
||||
*
|
||||
* @part button - The native button or anchor tag that is rendered.
|
||||
* @part button-inner - The span inside of the native button or anchor.
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-button',
|
||||
|
|
@ -218,8 +221,9 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
|
|||
disabled={disabled}
|
||||
onFocus={this.onFocus}
|
||||
onBlur={this.onBlur}
|
||||
part="button"
|
||||
>
|
||||
<span class="button-inner">
|
||||
<span class="button-inner" part="button-inner">
|
||||
<slot name="icon-only"></slot>
|
||||
<slot name="start"></slot>
|
||||
<slot></slot>
|
||||
|
|
|
|||
|
|
@ -252,28 +252,31 @@ export const ButtonExample: React.FC = () => (
|
|||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ------------------------ | --------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--background-activated` | Background of the button when pressed |
|
||||
| `--background-focused` | Background of the button when focused with the tab key |
|
||||
| `--background-hover` | Background of the button on hover |
|
||||
| `--border-color` | Border color of the button |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--border-style` | Border style of the button |
|
||||
| `--border-width` | Border width of the button |
|
||||
| `--box-shadow` | Box shadow of the button |
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-activated` | Text color of the button when pressed |
|
||||
| `--color-focused` | Text color of the button when focused with the tab key |
|
||||
| `--color-hover` | Text color of the button when hover |
|
||||
| `--opacity` | Opacity of the button |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
| Name | Description |
|
||||
| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
|
||||
| `--background-activated-opacity` | Opacity of the button when pressed |
|
||||
| `--background-focused` | Background of the button when focused with the tab key |
|
||||
| `--background-focused-opacity` | Opacity of the button when focused with the tab key |
|
||||
| `--background-hover` | Background of the button on hover |
|
||||
| `--background-hover-opacity` | Opacity of the background on hover |
|
||||
| `--border-color` | Border color of the button |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--border-style` | Border style of the button |
|
||||
| `--border-width` | Border width of the button |
|
||||
| `--box-shadow` | Box shadow of the button |
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-activated` | Text color of the button when pressed |
|
||||
| `--color-focused` | Text color of the button when focused with the tab key |
|
||||
| `--color-hover` | Text color of the button when hover |
|
||||
| `--opacity` | Opacity of the button |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
|
|
|||
|
|
@ -23,43 +23,43 @@
|
|||
<ion-content class="ion-padding" id="content" no-bounce>
|
||||
<p>
|
||||
<ion-button href="#">Default</ion-button>
|
||||
<ion-button href="#" class="activated">Default.activated</ion-button>
|
||||
<ion-button href="#" class="ion-activated">Default.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="primary">Primary</ion-button>
|
||||
<ion-button href="#" class="activated" color="primary">Primary.activated</ion-button>
|
||||
<ion-button href="#" class="ion-activated" color="primary">Primary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="secondary">Secondary</ion-button>
|
||||
<ion-button href="#" class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
<ion-button href="#" class="ion-activated" color="secondary">Secondary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button href="#" class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
<ion-button href="#" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="success">Success</ion-button>
|
||||
<ion-button href="#" class="activated" color="success">Success.activated</ion-button>
|
||||
<ion-button href="#" class="ion-activated" color="success">Success.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="warning">Warning</ion-button>
|
||||
<ion-button href="#" class="activated" color="warning">Warning.activated</ion-button>
|
||||
<ion-button href="#" class="ion-activated" color="warning">Warning.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="danger">Danger</ion-button>
|
||||
<ion-button href="#" class="activated" color="danger">Danger.activated</ion-button>
|
||||
<ion-button href="#" class="ion-activated" color="danger">Danger.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="light">Light</ion-button>
|
||||
<ion-button href="#" class="activated" color="light">Light.activated</ion-button>
|
||||
<ion-button href="#" class="ion-activated" color="light">Light.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="medium">Medium</ion-button>
|
||||
<ion-button href="#" class="activated" color="medium">Medium.activated</ion-button>
|
||||
<ion-button href="#" class="ion-activated" color="medium">Medium.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="dark">Dark</ion-button>
|
||||
<ion-button href="#" class="activated" color="dark">Dark.activated</ion-button>
|
||||
<ion-button href="#" class="ion-activated" color="dark">Dark.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" disabled>Disabled</ion-button>
|
||||
|
|
|
|||
|
|
@ -24,61 +24,61 @@
|
|||
<p>
|
||||
<ion-button>Default</ion-button>
|
||||
<ion-button class="ion-focused">Default.focused</ion-button>
|
||||
<ion-button class="activated">Default.activated</ion-button>
|
||||
<ion-button class="ion-activated">Default.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="primary">Primary</ion-button>
|
||||
<ion-button class="ion-focused" color="primary">Primary.focused</ion-button>
|
||||
<ion-button class="activated" color="primary">Primary.activated</ion-button>
|
||||
<ion-button class="ion-activated" color="primary">Primary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="secondary">Secondary</ion-button>
|
||||
<ion-button class="ion-focused" color="secondary">Secondary.focused</ion-button>
|
||||
<ion-button class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
<ion-button class="ion-activated" color="secondary">Secondary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="tertiary">Tertiary</ion-button>
|
||||
<ion-button class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
|
||||
<ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
<ion-button class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="success">Success</ion-button>
|
||||
<ion-button class="ion-focused" color="success">Success.focused</ion-button>
|
||||
<ion-button class="activated" color="success">Success.activated</ion-button>
|
||||
<ion-button class="ion-activated" color="success">Success.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="warning">Warning</ion-button>
|
||||
<ion-button class="ion-focused" color="warning">Warning.focused</ion-button>
|
||||
<ion-button class="activated" color="warning">Warning.activated</ion-button>
|
||||
<ion-button class="ion-activated" color="warning">Warning.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="danger">Danger</ion-button>
|
||||
<ion-button class="ion-focused" color="danger">Danger.focused</ion-button>
|
||||
<ion-button class="activated" color="danger">Danger.activated</ion-button>
|
||||
<ion-button class="ion-activated" color="danger">Danger.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="light">Light</ion-button>
|
||||
<ion-button class="ion-focused" color="light">Light.focused</ion-button>
|
||||
<ion-button class="activated" color="light">Light.activated</ion-button>
|
||||
<ion-button class="ion-activated" color="light">Light.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="medium">Medium</ion-button>
|
||||
<ion-button class="ion-focused" color="medium">Medium.focused</ion-button>
|
||||
<ion-button class="activated" color="medium">Medium.activated</ion-button>
|
||||
<ion-button class="ion-activated" color="medium">Medium.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="dark">Dark</ion-button>
|
||||
<ion-button class="ion-focused" color="dark">Dark.focused</ion-button>
|
||||
<ion-button class="activated" color="dark">Dark.activated</ion-button>
|
||||
<ion-button class="ion-activated" color="dark">Dark.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -23,72 +23,72 @@
|
|||
<ion-content class="ion-padding" id="content" no-bounce>
|
||||
<p>
|
||||
<ion-button fill="clear">Default</ion-button>
|
||||
<ion-button fill="clear" class="activated">Default.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated">Default.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused">Default.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-focused">Default.activated.focused</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated ion-focused">Default.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="primary">Primary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated" color="primary">Primary.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused" color="primary">Primary.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-focused" color="primary">Primary.activated.focused</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated ion-focused" color="primary">Primary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated" color="secondary">Secondary.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused" color="secondary">Secondary.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="success">Success</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated" color="success">Success.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused" color="success">Success.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-focused" color="success">Success.activated.focused</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated ion-focused" color="success">Success.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="warning">Warning</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated" color="warning">Warning.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused" color="warning">Warning.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-focused" color="warning">Warning.activated.focused</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated ion-focused" color="warning">Warning.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="danger">Danger</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated" color="danger">Danger.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused" color="danger">Danger.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-focused" color="danger">Danger.activated.focused</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated ion-focused" color="danger">Danger.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="light">Light</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated" color="light">Light.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused" color="light">Light.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-focused" color="light">Light.activated.focused</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated ion-focused" color="light">Light.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="medium">Medium</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated" color="medium">Medium.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused" color="medium">Medium.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-focused" color="medium">Medium.activated.focused</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated ion-focused" color="medium">Medium.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="dark">Dark</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated" color="dark">Dark.activated</ion-button>
|
||||
<ion-button fill="clear" class="ion-focused" color="dark">Dark.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
|
||||
<ion-button fill="clear" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="clear" disabled>Disabled</ion-button>
|
||||
|
|
|
|||
|
|
@ -23,72 +23,72 @@
|
|||
<ion-content class="ion-padding" id="content" no-bounce>
|
||||
<p>
|
||||
<ion-button fill="outline">Default</ion-button>
|
||||
<ion-button fill="outline" class="activated">Default.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated">Default.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused">Default.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-focused">Default.activated.focused</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated ion-focused">Default.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="primary">Primary</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="primary">Primary.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated" color="primary">Primary.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused" color="primary">Primary.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-focused" color="primary">Primary.activated.focused</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated ion-focused" color="primary">Primary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated" color="secondary">Secondary.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused" color="secondary">Secondary.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="success">Success</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="success">Success.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated" color="success">Success.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused" color="success">Success.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-focused" color="success">Success.activated.focused</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated ion-focused" color="success">Success.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="warning">Warning</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="warning">Warning.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated" color="warning">Warning.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused" color="warning">Warning.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-focused" color="warning">Warning.activated.focused</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated ion-focused" color="warning">Warning.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="danger">Danger</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="danger">Danger.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated" color="danger">Danger.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused" color="danger">Danger.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-focused" color="danger">Danger.activated.focused</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated ion-focused" color="danger">Danger.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="light">Light</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="light">Light.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated" color="light">Light.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused" color="light">Light.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-focused" color="light">Light.activated.focused</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated ion-focused" color="light">Light.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="medium">Medium</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="medium">Medium.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated" color="medium">Medium.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused" color="medium">Medium.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-focused" color="medium">Medium.activated.focused</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated ion-focused" color="medium">Medium.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="dark">Dark</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="dark">Dark.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated" color="dark">Dark.activated</ion-button>
|
||||
<ion-button fill="outline" class="ion-focused" color="dark">Dark.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
|
||||
<ion-button fill="outline" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="outline" disabled>Disabled</ion-button>
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@
|
|||
|
||||
<!-- Custom Colors -->
|
||||
<ion-button class="custom">custom</ion-button>
|
||||
<ion-button class="custom activated ion-focused">custom.focused</ion-button>
|
||||
<ion-button class="custom activated">custom.activated</ion-button>
|
||||
<ion-button class="custom ion-activated ion-focused">custom.focused</ion-button>
|
||||
<ion-button class="custom ion-activated">custom.activated</ion-button>
|
||||
<ion-button color="secondary" class="custom">custom w/ secondary</ion-button>
|
||||
<ion-button fill="clear" class="medium">custom medium</ion-button>
|
||||
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-button class="custom">Custom</ion-button>
|
||||
<ion-button class="custom activated">Custom.a</ion-button>
|
||||
<ion-button class="custom ion-activated">Custom.a</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Bar</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
|
||||
.custom {
|
||||
--background: lightpink;
|
||||
--background-hover: rgba(255, 182, 193, 0.5);
|
||||
--background-hover: #ffb6c1;
|
||||
--background-activated: green;
|
||||
--color: #222;
|
||||
--color-activated: white;
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
|
||||
.medium {
|
||||
--color: #989aa2;
|
||||
--background-hover: rgba(152, 154, 162, 0.4);
|
||||
--background-hover: #989aa2;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('button: states', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/button/test/states?ionic:_testing=true'
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Button - States</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/core.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<h3>Default</h3>
|
||||
<p>
|
||||
<ion-button>Default</ion-button>
|
||||
<ion-button><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button shape="round">Round</ion-button>
|
||||
<ion-button fill="outline">Outline</ion-button>
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
<ion-button color="secondary">Default</ion-button>
|
||||
<ion-button color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button color="danger" shape="round">Round</ion-button>
|
||||
<ion-button color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button color="dark" fill="clear">Clear</ion-button>
|
||||
</p>
|
||||
|
||||
<h3>Focused</h3>
|
||||
<p>
|
||||
<ion-button class="ion-focused">Default</ion-button>
|
||||
<ion-button class="ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="ion-focused" shape="round">Round</ion-button>
|
||||
<ion-button class="ion-focused" fill="outline">Outline</ion-button>
|
||||
<ion-button class="ion-focused" fill="clear">Clear</ion-button>
|
||||
<ion-button class="ion-focused" color="secondary">Default</ion-button>
|
||||
<ion-button class="ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="ion-focused" color="danger" shape="round">Round</ion-button>
|
||||
<ion-button class="ion-focused" color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button class="ion-focused" color="dark" fill="clear">Clear</ion-button>
|
||||
</p>
|
||||
|
||||
<h3>Activated</h3>
|
||||
<p>
|
||||
<ion-button class="ion-activated">Default</ion-button>
|
||||
<ion-button class="ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="ion-activated" shape="round">Round</ion-button>
|
||||
<ion-button class="ion-activated" fill="outline">Outline</ion-button>
|
||||
<ion-button class="ion-activated" fill="clear">Clear</ion-button>
|
||||
<ion-button class="ion-activated" color="secondary">Default</ion-button>
|
||||
<ion-button class="ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="ion-activated" color="danger" shape="round">Round</ion-button>
|
||||
<ion-button class="ion-activated" color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button class="ion-activated" color="dark" fill="clear">Clear</ion-button>
|
||||
</p>
|
||||
|
||||
<h3>Custom</h3>
|
||||
<p>
|
||||
<ion-button class="custom">Default</ion-button>
|
||||
<ion-button class="custom"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="custom" shape="round">Round</ion-button>
|
||||
<ion-button class="custom" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom" fill="clear">Clear</ion-button>
|
||||
<ion-button class="custom" color="secondary">Default</ion-button>
|
||||
<ion-button class="custom" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="custom" color="danger" shape="round">Round</ion-button>
|
||||
<ion-button class="custom" color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom" color="dark" fill="clear">Clear</ion-button>
|
||||
<ion-button class="custom ion-focused">Default</ion-button>
|
||||
<ion-button class="custom ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="custom ion-focused" shape="round">Round</ion-button>
|
||||
<ion-button class="custom ion-focused" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom ion-focused" fill="clear">Clear</ion-button>
|
||||
<ion-button class="custom ion-focused" color="secondary">Default</ion-button>
|
||||
<ion-button class="custom ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="custom ion-focused" color="danger" shape="round">Round</ion-button>
|
||||
<ion-button class="custom ion-focused" color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom ion-focused" color="dark" fill="clear">Clear</ion-button>
|
||||
<ion-button class="custom ion-activated">Default</ion-button>
|
||||
<ion-button class="custom ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="custom ion-activated" shape="round">Round</ion-button>
|
||||
<ion-button class="custom ion-activated" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom ion-activated" fill="clear">Clear</ion-button>
|
||||
<ion-button class="custom ion-activated" color="secondary">Default</ion-button>
|
||||
<ion-button class="custom ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
|
||||
<ion-button class="custom ion-activated" color="danger" shape="round">Round</ion-button>
|
||||
<ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button>
|
||||
<ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
--background-hover: red;
|
||||
--background-hover-opacity: 1;
|
||||
|
||||
--background-focused: green;
|
||||
--background-activated: blue;
|
||||
}
|
||||
|
||||
.custom:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* TODO should this inherit or users set all */
|
||||
.custom {
|
||||
--color: red;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -99,15 +99,15 @@
|
|||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button class="activated">
|
||||
<ion-button class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="activated">
|
||||
<ion-button class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" class="activated">
|
||||
<ion-button color="secondary" class="ion-activated">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
|
@ -135,17 +135,17 @@
|
|||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="solid" class="activated">
|
||||
<ion-button fill="solid" class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="solid" class="activated">
|
||||
<ion-button fill="solid" class="ion-activated">
|
||||
<ion-icon name="person-circle" slot="start"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid Activated</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" shape="round" color="secondary" class="activated">
|
||||
<ion-button fill="solid" shape="round" color="secondary" class="ion-activated">
|
||||
Help
|
||||
<ion-icon name="help-circle" slot="end"></ion-icon>
|
||||
</ion-button>
|
||||
|
|
@ -172,16 +172,16 @@
|
|||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="outline" class="activated">
|
||||
<ion-button fill="outline" class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="outline" class="activated">
|
||||
<ion-button fill="outline" class="ion-activated">
|
||||
<ion-icon name="star" slot="start"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" fill="outline" class="activated">
|
||||
<ion-button color="secondary" fill="outline" class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
|
|
|||
|
|
@ -29,27 +29,25 @@
|
|||
:host-context(.ion-color)::slotted(*) .button {
|
||||
--color: initial;
|
||||
--border-color: initial;
|
||||
--background-focused: #{current-color(contrast, .1)};
|
||||
|
||||
--background-focused: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
:host-context(.ion-color)::slotted(*) .button-solid {
|
||||
--background: #{current-color(contrast)};
|
||||
--background-activated: #{current-color(contrast, .8)};
|
||||
--background-focused: #{current-color(contrast, .6)};
|
||||
--background-focused: #000;
|
||||
--background-focused-opacity: .12;
|
||||
--background-activated: #000;
|
||||
--background-activated-opacity: .12;
|
||||
--color: #{current-color(base)};
|
||||
--color-focused: #{current-color(base)};
|
||||
}
|
||||
|
||||
:host-context(.ion-color)::slotted(*) .button-clear {
|
||||
--background-focused: #{current-color(contrast, .1)};
|
||||
--color-activated: #{current-color(contrast)};
|
||||
--color-focused: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
:host-context(.ion-color)::slotted(*) .button-outline {
|
||||
--background-activated: #{current-color(contrast)};
|
||||
--background-focused: #{current-color(contrast, .1)};
|
||||
--color-activated: #{current-color(base)};
|
||||
--color-focused: #{current-color(contrast)};
|
||||
}
|
||||
|
|
@ -58,35 +56,39 @@
|
|||
// iOS Toolbar Button Clear
|
||||
// --------------------------------------------------
|
||||
|
||||
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear {
|
||||
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear:not(.ion-color) {
|
||||
--color: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
||||
--color-activated: #{$toolbar-ios-color-activated};
|
||||
--color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
||||
--background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Button Outline
|
||||
// --------------------------------------------------
|
||||
|
||||
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline {
|
||||
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline:not(.ion-color) {
|
||||
--color: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
||||
--color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
|
||||
--color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
||||
--border-color: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
||||
--background-activated: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
||||
--background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Button Solid
|
||||
// --------------------------------------------------
|
||||
|
||||
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid {
|
||||
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid:not(.ion-color) {
|
||||
--color: #{$toolbar-ios-background};
|
||||
--color-activated: #{$toolbar-ios-background};
|
||||
--color-focused: #{$toolbar-ios-background};
|
||||
--background: #{var(--ion-toolbar-color, ion-color(primary, base))};
|
||||
--background-activated: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
|
||||
--background-focused: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
|
||||
--background-hover: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
|
||||
--background-hover-opacity: 0.1;
|
||||
--background-focused: #000;
|
||||
--background-focused-opacity: .12;
|
||||
--background-activated: #000;
|
||||
--background-activated-opacity: .12;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -31,15 +31,16 @@
|
|||
--color: initial;
|
||||
--color-focused: #{current-color(contrast)};
|
||||
--color-hover: #{current-color(contrast)};
|
||||
--background-hover: #{current-color(contrast, .08)};
|
||||
--background-focused: #{current-color(contrast, .24)};
|
||||
--background-activated: transparent;
|
||||
--background-focused: #{current-color(contrast)};
|
||||
--background-hover: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
:host-context(.ion-color)::slotted(*) .button-solid {
|
||||
--background: #{current-color(contrast)};
|
||||
--background-activated: #{current-color(contrast)};
|
||||
--background-activated: transparent;
|
||||
--background-focused: #{current-color(shade)};
|
||||
--background-hover: #{current-color(tint)};
|
||||
--background-hover: #{current-color(base)};
|
||||
--color: #{current-color(base)};
|
||||
--color-focused: #{current-color(base)};
|
||||
--color-hover: #{current-color(base)};
|
||||
|
|
@ -68,7 +69,7 @@
|
|||
|
||||
|
||||
::slotted(*) .button {
|
||||
--background-hover: rgba(66, 66, 66, 0.08);
|
||||
--background-hover: currentColor;
|
||||
}
|
||||
|
||||
// Material Design Toolbar Solid Button
|
||||
|
|
@ -78,9 +79,8 @@
|
|||
--color: #{$toolbar-md-background};
|
||||
--color-activated: #{$toolbar-md-background};
|
||||
--background: #{$toolbar-md-color};
|
||||
--background-activated: #{$toolbar-md-color};
|
||||
--background-focused: #{$toolbar-md-color-activated};
|
||||
--background-hover: rgba(66, 66, 66, 0.92);
|
||||
--background-activated: transparent;
|
||||
--background-focused: currentColor;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -93,8 +93,9 @@
|
|||
--color-focused: #{$toolbar-md-color};
|
||||
--background: transparent;
|
||||
--background-activated: transparent;
|
||||
--background-focused: currentColor;
|
||||
--background-hover: currentColor;
|
||||
--border-color: #{$toolbar-md-color};
|
||||
--background-focused: rgba(66, 66, 66, 0.1);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -106,7 +107,9 @@
|
|||
--color-focused: #{$toolbar-md-color};
|
||||
--color-activated: currentColor;
|
||||
--background: transparent;
|
||||
--background-focused: rgba(66, 66, 66, 0.1);
|
||||
--background-activated: transparent;
|
||||
--background-focused: currentColor;
|
||||
--background-hover: currentColor;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,6 @@
|
|||
box-shadow: $card-ios-box-shadow;
|
||||
}
|
||||
|
||||
:host(.activated) {
|
||||
:host(.ion-activated) {
|
||||
transform: #{$card-ios-transform-activated};
|
||||
}
|
||||
|
|
@ -40,9 +40,9 @@ sub-components to reflect this. Please see `ion-card-content`,
|
|||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<ion-item href="#" class="activated">
|
||||
<ion-item href="#" class="ion-activated">
|
||||
<ion-icon name="wifi" slot="start"></ion-icon>
|
||||
<ion-label>Card Link Item 1 .activated</ion-label>
|
||||
<ion-label>Card Link Item 1 activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#">
|
||||
|
|
@ -50,9 +50,9 @@ sub-components to reflect this. Please see `ion-card-content`,
|
|||
<ion-label>Card Link Item 2</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="activated">
|
||||
<ion-item class="ion-activated">
|
||||
<ion-icon name="warning" slot="start"></ion-icon>
|
||||
<ion-label>Card Button Item 1 .activated</ion-label>
|
||||
<ion-label>Card Button Item 1 activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
|
|
@ -97,9 +97,9 @@ export const CardExample: React.FC = () => (
|
|||
</IonCard>
|
||||
|
||||
<IonCard>
|
||||
<IonItem href="#" class="activated">
|
||||
<IonItem href="#" class="ion-activated">
|
||||
<IonIcon name="wifi" slot="start" />
|
||||
<IonLabel>Card Link Item 1 .activated</IonLabel>
|
||||
<IonLabel>Card Link Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem href="#">
|
||||
|
|
@ -107,9 +107,9 @@ export const CardExample: React.FC = () => (
|
|||
<IonLabel>Card Link Item 2</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem class="activated">
|
||||
<IonItem class="ion-activated">
|
||||
<IonIcon name="warning" slot="start" />
|
||||
<IonLabel>Card Button Item 1 .activated</IonLabel>
|
||||
<IonLabel>Card Button Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
|
|
@ -152,9 +152,9 @@ export const CardExample: React.FC = () => (
|
|||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<ion-item href="#" class="activated">
|
||||
<ion-item href="#" class="ion-activated">
|
||||
<ion-icon name="wifi" slot="start"></ion-icon>
|
||||
<ion-label>Card Link Item 1 .activated</ion-label>
|
||||
<ion-label>Card Link Item 1 activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#">
|
||||
|
|
@ -162,9 +162,9 @@ export const CardExample: React.FC = () => (
|
|||
<ion-label>Card Link Item 2</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="activated">
|
||||
<ion-item class="ion-activated">
|
||||
<ion-icon name="warning" slot="start"></ion-icon>
|
||||
<ion-label>Card Button Item 1 .activated</ion-label>
|
||||
<ion-label>Card Button Item 1 activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
|
|
|
|||
|
|
@ -85,9 +85,9 @@
|
|||
|
||||
<ion-card>
|
||||
<ion-list lines="none">
|
||||
<ion-item href="#" class="activated">
|
||||
<ion-item href="#" class="ion-activated">
|
||||
<ion-icon name="wifi" slot="start"></ion-icon>
|
||||
<ion-label>Link Item .activated</ion-label>
|
||||
<ion-label>Link Item activated</ion-label>
|
||||
<ion-note>More</ion-note>
|
||||
</ion-item>
|
||||
|
||||
|
|
@ -97,9 +97,9 @@
|
|||
<ion-note>More</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button class="activated">
|
||||
<ion-item button class="ion-activated">
|
||||
<ion-icon name="warning" slot="start"></ion-icon>
|
||||
<ion-label>Button Item .activated</ion-label>
|
||||
<ion-label>Button Item activated</ion-label>
|
||||
<ion-note>More</ion-note>
|
||||
</ion-item>
|
||||
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@
|
|||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="ion-no-padding ion-text-right">
|
||||
<ion-button fill="clear" size="small" class="activated">
|
||||
<ion-button fill="clear" size="small" class="ion-activated">
|
||||
<ion-icon slot="start" name="share"></ion-icon>
|
||||
Activated
|
||||
</ion-button>
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@
|
|||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<ion-item href="#" class="activated">
|
||||
<ion-item href="#" class="ion-activated">
|
||||
<ion-icon name="wifi" slot="start"></ion-icon>
|
||||
<ion-label>Card Link Item 1 .activated</ion-label>
|
||||
<ion-label>Card Link Item 1 activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#">
|
||||
|
|
@ -35,9 +35,9 @@
|
|||
<ion-label>Card Link Item 2</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="activated">
|
||||
<ion-item class="ion-activated">
|
||||
<ion-icon name="warning" slot="start"></ion-icon>
|
||||
<ion-label>Card Button Item 1 .activated</ion-label>
|
||||
<ion-label>Card Button Item 1 activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@
|
|||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<ion-item href="#" class="activated">
|
||||
<ion-item href="#" class="ion-activated">
|
||||
<ion-icon name="wifi" slot="start"></ion-icon>
|
||||
<ion-label>Card Link Item 1 .activated</ion-label>
|
||||
<ion-label>Card Link Item 1 activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#">
|
||||
|
|
@ -35,9 +35,9 @@
|
|||
<ion-label>Card Link Item 2</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="activated">
|
||||
<ion-item class="ion-activated">
|
||||
<ion-icon name="warning" slot="start"></ion-icon>
|
||||
<ion-label>Card Button Item 1 .activated</ion-label>
|
||||
<ion-label>Card Button Item 1 activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@ export const CardExample: React.FC = () => (
|
|||
</IonCard>
|
||||
|
||||
<IonCard>
|
||||
<IonItem href="#" class="activated">
|
||||
<IonItem href="#" class="ion-activated">
|
||||
<IonIcon name="wifi" slot="start" />
|
||||
<IonLabel>Card Link Item 1 .activated</IonLabel>
|
||||
<IonLabel>Card Link Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem href="#">
|
||||
|
|
@ -40,9 +40,9 @@ export const CardExample: React.FC = () => (
|
|||
<IonLabel>Card Link Item 2</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem class="activated">
|
||||
<IonItem class="ion-activated">
|
||||
<IonIcon name="warning" slot="start" />
|
||||
<IonLabel>Card Button Item 1 .activated</IonLabel>
|
||||
<IonLabel>Card Button Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@
|
|||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<ion-item href="#" class="activated">
|
||||
<ion-item href="#" class="ion-activated">
|
||||
<ion-icon name="wifi" slot="start"></ion-icon>
|
||||
<ion-label>Card Link Item 1 .activated</ion-label>
|
||||
<ion-label>Card Link Item 1 activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#">
|
||||
|
|
@ -36,9 +36,9 @@
|
|||
<ion-label>Card Link Item 2</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="activated">
|
||||
<ion-item class="ion-activated">
|
||||
<ion-icon name="warning" slot="start"></ion-icon>
|
||||
<ion-label>Card Button Item 1 .activated</ion-label>
|
||||
<ion-label>Card Button Item 1 activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
background: current-color(base, .12);
|
||||
}
|
||||
|
||||
:host(.ion-color.activated) {
|
||||
:host(.ion-color.ion-activated) {
|
||||
background: current-color(base, .16);
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
background: rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
:host(.chip-outline.activated:not(.ion-color)) {
|
||||
:host(.chip-outline.ion-activated:not(.ion-color)) {
|
||||
background: rgba(0, 0, 0, .08);
|
||||
}
|
||||
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
// Chip: Activated
|
||||
// ---------------------------------------------
|
||||
|
||||
:host(.activated) {
|
||||
:host(.ion-activated) {
|
||||
--background: #{rgba($text-color-rgb, .20)};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,12 +4,14 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Chip - Basic</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>
|
||||
|
|
@ -22,77 +24,81 @@
|
|||
|
||||
<ion-content class="ion-padding" id="content" style="text-align: center">
|
||||
|
||||
<h2>Basic Chips</h2>
|
||||
<ion-chip>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip style="border-radius: 4px;">
|
||||
<ion-label>Border Radius</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>With Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
<h2>Basic Chips</h2>
|
||||
<ion-chip>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip style="border-radius: 4px;">
|
||||
<ion-label>Border Radius</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>With Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
<ion-label>With Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
<ion-label>With Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
|
||||
<h2>Color Chips</h2>
|
||||
<ion-chip color="primary">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Tertiary with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary">
|
||||
<ion-avatar>
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
|
||||
</ion-avatar>
|
||||
<ion-label>Primary with Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success">
|
||||
<ion-label>Success with Icon</ion-label>
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
</ion-chip>
|
||||
<h2>Color Chips</h2>
|
||||
<ion-chip color="primary">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Tertiary with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
<ion-label>Primary with Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success">
|
||||
<ion-label>Success with Icon</ion-label>
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
</ion-chip>
|
||||
|
||||
<h2>Outline Chips</h2>
|
||||
<ion-chip outline>
|
||||
<ion-label>Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger">
|
||||
<ion-label>Danger Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Secondary Outline with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary">
|
||||
<ion-label>Primary Outline with Avatar</ion-label>
|
||||
<ion-avatar>
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
|
||||
</ion-avatar>
|
||||
</ion-chip>
|
||||
<ion-chip outline>
|
||||
<ion-icon name="git-pull-request"></ion-icon>
|
||||
<ion-label>Outline with Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
<h2>Outline Chips</h2>
|
||||
<ion-chip outline>
|
||||
<ion-label>Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger">
|
||||
<ion-label>Danger Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Secondary Outline with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary">
|
||||
<ion-label>Primary Outline with Avatar</ion-label>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
</ion-chip>
|
||||
<ion-chip outline>
|
||||
<ion-icon name="git-pull-request"></ion-icon>
|
||||
<ion-label>Outline with Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('chip: states', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/chip/test/states?ionic:_testing=true'
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,285 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Chip - States</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<h3>Default</h3>
|
||||
<p>
|
||||
<ion-chip>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip style="border-radius: 4px;">
|
||||
<ion-label>Border Radius</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>With Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
<ion-label>With Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
<ion-label>With Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<p>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip style="border-radius: 4px;" class="ion-focused">
|
||||
<ion-label>Border Radius</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>With Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
<ion-label>With Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
<ion-label>With Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<h3>Colors</h3>
|
||||
<p>
|
||||
<ion-chip color="primary">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Tertiary with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
<ion-label>Success with Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning">
|
||||
<ion-label>Warning with Icon</ion-label>
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<p>
|
||||
<ion-chip color="primary" class="ion-focused">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" class="ion-focused">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary" class="ion-focused">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Tertiary with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success" class="ion-focused">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
<ion-label>Success with Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning" class="ion-focused">
|
||||
<ion-label>Warning with Icon</ion-label>
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger" class="ion-focused">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light" class="ion-focused">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium" class="ion-focused">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark" class="ion-focused">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<h3>Outline</h3>
|
||||
|
||||
<p>
|
||||
<ion-chip outline>
|
||||
<ion-label>Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger">
|
||||
<ion-label>Danger Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Secondary Outline with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary">
|
||||
<ion-label>Primary Outline with Avatar</ion-label>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
</ion-chip>
|
||||
<ion-chip outline>
|
||||
<ion-icon name="git-pull-request"></ion-icon>
|
||||
<ion-label>Outline with Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<p>
|
||||
<ion-chip outline class="ion-focused">
|
||||
<ion-label>Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger" class="ion-focused">
|
||||
<ion-label>Danger Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary" class="ion-focused">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Secondary Outline with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary" class="ion-focused">
|
||||
<ion-label>Primary Outline with Avatar</ion-label>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
|
||||
</ion-avatar>
|
||||
</ion-chip>
|
||||
<ion-chip outline class="ion-focused">
|
||||
<ion-icon name="git-pull-request"></ion-icon>
|
||||
<ion-label>Outline with Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<h3>Custom</h3>
|
||||
|
||||
<!-- Custom Font -->
|
||||
<p>
|
||||
<ion-chip class="wide" text="wide">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip class="wide ion-focused" text="wide">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<!-- Custom Colors -->
|
||||
<p>
|
||||
<ion-chip class="custom">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" class="custom">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip class="custom ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" class="custom ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
var buttons = document.querySelectorAll('ion-chip');
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].addEventListener('click', (event) => onClick(event));
|
||||
}
|
||||
|
||||
function onClick(ev) {
|
||||
console.log("clicked the button", ev.target.innerText);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h3 {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
ion-chip {
|
||||
display: inline-block !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wide {
|
||||
--background: #d1f3ff;
|
||||
--background-hover: #add8e6;
|
||||
--background-focused: #84c5db;
|
||||
|
||||
height: 50px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.custom {
|
||||
--background: #ffdde2;
|
||||
--background-hover: #fcc6ce;
|
||||
--background-focused: lightpink;
|
||||
--color: rgb(214, 60, 235);
|
||||
--border-radius: 10px;
|
||||
--padding-start: 10px;
|
||||
--padding-end: 10px;
|
||||
}
|
||||
|
||||
.custom:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.themed {
|
||||
--ion-toolbar-background: #222;
|
||||
--ion-toolbar-color: #ddd;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -7,7 +7,11 @@
|
|||
:host {
|
||||
--background: #{$fab-ios-background-color};
|
||||
--background-activated: #{$fab-ios-background-color-activated};
|
||||
--background-focused: var(--background-activated);
|
||||
--background-focused: #{ion-color(primary, shade)};
|
||||
--background-hover: #{ion-color(primary, tint)};
|
||||
--background-activated-opacity: 1;
|
||||
--background-focused-opacity: 1;
|
||||
--background-hover-opacity: 1;
|
||||
--color: #{$fab-ios-text-color};
|
||||
--color-activated: #{$fab-ios-text-color};
|
||||
--color-focused: var(--color-activated);
|
||||
|
|
@ -15,7 +19,7 @@
|
|||
--transition: #{$fab-ios-transition};
|
||||
}
|
||||
|
||||
:host(.activated) {
|
||||
:host(.ion-activated) {
|
||||
--box-shadow: #{$fab-ios-box-shadow-activated};
|
||||
--transform: #{$fab-ios-transform};
|
||||
--transition: #{$fab-ios-transition-activated};
|
||||
|
|
@ -46,6 +50,34 @@
|
|||
}
|
||||
|
||||
|
||||
// FAB Button: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
// Focused/Activated Button with Color
|
||||
:host(.ion-color.ion-focused) .button-native,
|
||||
:host(.ion-color.ion-activated) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
&::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.ion-color:hover) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
&::after {
|
||||
background: #{current-color(tint)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Translucent FAB buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
@ -79,7 +111,7 @@
|
|||
}
|
||||
|
||||
:host(.ion-color.ion-focused.fab-button-translucent) .button-native,
|
||||
:host(.ion-color.activated.fab-button-translucent) .button-native {
|
||||
:host(.ion-color.ion-activated.fab-button-translucent) .button-native {
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
}
|
||||
|
|
@ -6,8 +6,12 @@
|
|||
|
||||
:host {
|
||||
--background: #{$fab-md-background-color};
|
||||
--background-activated: var(--background);
|
||||
--background-focused: var(--background-activated);
|
||||
--background-activated: transparent;
|
||||
--background-focused: currentColor;
|
||||
--background-hover: currentColor;
|
||||
--background-activated-opacity: 0;
|
||||
--background-focused-opacity: .24;
|
||||
--background-hover-opacity: .08;
|
||||
--color: #{$fab-md-text-color};
|
||||
--color-activated: #{$fab-md-text-color};
|
||||
--color-focused: var(--color-activated);
|
||||
|
|
@ -21,7 +25,7 @@
|
|||
};
|
||||
}
|
||||
|
||||
:host(.activated) {
|
||||
:host(.ion-activated) {
|
||||
--box-shadow: #{$fab-md-box-shadow-activated};
|
||||
}
|
||||
|
||||
|
|
@ -39,11 +43,41 @@
|
|||
--color-activated: #{$fab-md-list-button-text-color};
|
||||
--color-focused: var(--color-activated);
|
||||
--background: #{$fab-md-list-button-background-color};
|
||||
--background-activated: #{$fab-md-list-button-background-color-activated};
|
||||
--background-focused: var(--background-activated);
|
||||
--background-activated: transparent;
|
||||
--background-focused: #{$fab-md-list-button-background-color-activated};
|
||||
--background-hover: #{$fab-md-list-button-background-color-hover};
|
||||
}
|
||||
|
||||
:host(.fab-button-in-list) ::slotted(ion-icon) {
|
||||
font-size: $fab-md-list-button-icon-font-size;
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
// Focused Button with Color
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
&::after {
|
||||
background: #{current-color(contrast)};
|
||||
}
|
||||
}
|
||||
:host(.ion-color.ion-activated) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
&::after {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.ion-color:hover) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
&::after {
|
||||
background: #{current-color(contrast)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ $fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, .
|
|||
$fab-md-background-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$fab-md-background-color-activated: ion-color(primary, shade) !default;
|
||||
$fab-md-background-color-activated: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$fab-md-text-color: ion-color(primary, contrast) !default;
|
||||
|
|
|
|||
|
|
@ -6,9 +6,12 @@
|
|||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the button
|
||||
* @prop --background-activated: Background of the button when pressed
|
||||
* @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
|
||||
* @prop --background-activated-opacity: Opacity of the button background when pressed
|
||||
* @prop --background-focused: Background of the button when focused with the tab key
|
||||
* @prop --background-focused-opacity: Opacity of the button background when focused with the tab key
|
||||
* @prop --background-hover: Background of the button on hover
|
||||
* @prop --background-hover-opacity: Opacity of the button background on hover
|
||||
*
|
||||
* @prop --color: Text color of the button
|
||||
* @prop --color-activated: Text color of the button when pressed
|
||||
|
|
@ -32,7 +35,8 @@
|
|||
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
|
||||
*/
|
||||
--color-hover: #{var(--color)};
|
||||
--background-hover: #{ion-color(primary, tint)};
|
||||
--background-hover: #{ion-color(primary, contrast)};
|
||||
--background-hover-opacity: .08;
|
||||
--transition: background-color, opacity 100ms linear;
|
||||
--ripple-color: currentColor;
|
||||
--border-radius: #{$fab-border-radius};
|
||||
|
|
@ -101,6 +105,10 @@
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
.button-native::after {
|
||||
@include button-state();
|
||||
}
|
||||
|
||||
.button-inner {
|
||||
@include position(0, 0, null, 0);
|
||||
|
||||
|
|
@ -116,15 +124,8 @@
|
|||
|
||||
transition: all ease-in-out 300ms;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color) .button-native {
|
||||
background: #{current-color(base)};
|
||||
color: #{current-color(contrast)};
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -132,13 +133,8 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
:host(.fab-button-disabled) {
|
||||
opacity: .5;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host(.fab-button-disabled) .button-native {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -148,41 +144,42 @@
|
|||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) .button-native {
|
||||
background: var(--background-hover);
|
||||
color: var(--color-hover);
|
||||
}
|
||||
|
||||
:host(.ion-color:hover) .button-native {
|
||||
background: #{current-color(tint)};
|
||||
color: #{current-color(contrast)};
|
||||
&::after {
|
||||
background: var(--background-hover);
|
||||
|
||||
opacity: var(--background-hover-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused) .button-native {
|
||||
background: var(--background-focused);
|
||||
color: var(--color-focused);
|
||||
|
||||
&::after {
|
||||
background: var(--background-focused);
|
||||
|
||||
opacity: var(--background-focused-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
// FAB Button: Activated
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.activated) .button-native {
|
||||
background: var(--background-activated);
|
||||
:host(.ion-activated) .button-native {
|
||||
color: var(--color-activated);
|
||||
}
|
||||
|
||||
// Focused/Activated Button with Color
|
||||
:host(.ion-color.ion-focused) .button-native,
|
||||
:host(.ion-color.activated) .button-native {
|
||||
background: #{current-color(shade)};
|
||||
color: #{current-color(contrast)};
|
||||
&::after {
|
||||
background: var(--background-activated);
|
||||
|
||||
opacity: var(--background-activated-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -252,4 +249,13 @@ ion-ripple-effect {
|
|||
:host(.fab-button-translucent) .button-native {
|
||||
backdrop-filter: var(--backdrop-filter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FAB Button: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color) .button-native {
|
||||
background: #{current-color(base)};
|
||||
color: #{current-color(contrast)};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -125,27 +125,30 @@ export const FabButtonExample: React.FC = () => (
|
|||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ------------------------ | --------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--background-activated` | Background of the button when pressed |
|
||||
| `--background-focused` | Background of the button when focused with the tab key |
|
||||
| `--background-hover` | Background of the button on hover |
|
||||
| `--border-color` | Border color of the button |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--border-style` | Border style of the button |
|
||||
| `--border-width` | Border width of the button |
|
||||
| `--box-shadow` | Box shadow of the button |
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-activated` | Text color of the button when pressed |
|
||||
| `--color-focused` | Text color of the button when focused with the tab key |
|
||||
| `--color-hover` | Text color of the button on hover |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
| Name | Description |
|
||||
| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
|
||||
| `--background-activated-opacity` | Opacity of the button background when pressed |
|
||||
| `--background-focused` | Background of the button when focused with the tab key |
|
||||
| `--background-focused-opacity` | Opacity of the button background when focused with the tab key |
|
||||
| `--background-hover` | Background of the button on hover |
|
||||
| `--background-hover-opacity` | Opacity of the button background on hover |
|
||||
| `--border-color` | Border color of the button |
|
||||
| `--border-radius` | Border radius of the button |
|
||||
| `--border-style` | Border style of the button |
|
||||
| `--border-width` | Border width of the button |
|
||||
| `--box-shadow` | Box shadow of the button |
|
||||
| `--color` | Text color of the button |
|
||||
| `--color-activated` | Text color of the button when pressed |
|
||||
| `--color-focused` | Text color of the button when focused with the tab key |
|
||||
| `--color-hover` | Text color of the button on hover |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| `--transition` | Transition of the button |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@
|
|||
<ion-fab-button class="fab-button-in-list">In List</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button size="small" class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button size="small" class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list ion-activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button size="small" class="fab-button-in-list ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
</p>
|
||||
|
||||
<h3>Colors</h3>
|
||||
|
|
@ -38,15 +38,15 @@
|
|||
<ion-fab-button color="dark"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-fab-button color="primary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="secondary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="tertiary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="success" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="warning" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="danger" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="light" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="medium" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="dark" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="primary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="secondary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="tertiary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="success" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="warning" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="danger" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="light" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="medium" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="dark" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
</p>
|
||||
|
||||
<h3>Custom</h3>
|
||||
|
|
@ -56,20 +56,20 @@
|
|||
|
||||
<!-- Custom Colors -->
|
||||
<ion-fab-button class="custom"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="custom activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="custom ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button color="secondary" class="custom"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
|
||||
<!-- Custom Colors Fab In List -->
|
||||
<ion-fab-button class="fab-button-in-list custom-white">White</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-white activated">White</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-white ion-activated">White</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-white"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-white activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-white ion-activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-blue"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-blue activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-blue ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border">Border</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border activated">Border</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border ion-activated">Border</ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
<ion-fab-button class="fab-button-in-list custom-border ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
||||
|
||||
<style>
|
||||
ion-fab-button {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('fab: states', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/fab/test/states?ionic:_testing=true'
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fab - States</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<h3>Default</h3>
|
||||
<p>
|
||||
<ion-fab-button>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button text="Back">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button icon="add">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button disabled text="Text Only" icon="">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button icon="heart" text="Love" color="danger">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-fab-button class="ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button class="ion-focused" text="Back">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button class="ion-focused" icon="add">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button disabled class="ion-focused" text="Text Only" icon="">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button class="ion-focused" icon="heart" text="Love" color="danger">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</p>
|
||||
|
||||
<h3>Colors</h3>
|
||||
<p>
|
||||
<ion-fab-button color="primary">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="secondary">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="tertiary">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="success">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="warning">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="danger">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="light">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="medium">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="dark">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-fab-button color="primary" class="ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="secondary" class="ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="tertiary" class="ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="success" class="ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="warning" class="ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="danger" class="ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="light" class="ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="medium" class="ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="dark" class="ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</p>
|
||||
|
||||
<h3>Custom</h3>
|
||||
|
||||
<!-- Custom Font -->
|
||||
<p>
|
||||
<ion-fab-button class="wide" text="wide">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button class="wide ion-focused" text="wide">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</p>
|
||||
|
||||
<!-- Custom Colors -->
|
||||
<p>
|
||||
<ion-fab-button class="custom">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="secondary" class="custom">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button class="custom ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-button color="secondary" class="custom ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
var buttons = document.querySelectorAll('ion-fab-button');
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].addEventListener('click', (event) => onClick(event));
|
||||
}
|
||||
|
||||
function onClick(ev) {
|
||||
console.log("clicked the button", ev.target.innerText);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h3 {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
ion-fab-button {
|
||||
display: inline-block !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wide {
|
||||
--background: #d1f3ff;
|
||||
--background-hover: #add8e6;
|
||||
--background-focused: #84c5db;
|
||||
|
||||
height: 50px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.custom {
|
||||
--background: #ffdde2;
|
||||
--background-hover: #fcc6ce;
|
||||
--background-focused: lightpink;
|
||||
--color: rgb(214, 60, 235);
|
||||
--border-radius: 10px;
|
||||
--padding-start: 10px;
|
||||
--padding-end: 10px;
|
||||
}
|
||||
|
||||
.custom:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.themed {
|
||||
--ion-toolbar-background: #222;
|
||||
--ion-toolbar-color: #ddd;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -8,10 +8,10 @@
|
|||
font-size: $item-option-button-ios-font-size;
|
||||
}
|
||||
|
||||
:host(.activated) {
|
||||
:host(.ion-activated) {
|
||||
background: ion-color(primary, shade);
|
||||
}
|
||||
|
||||
:host(.ion-color.activated) {
|
||||
:host(.ion-color.ion-activated) {
|
||||
background: current-color(shade);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@
|
|||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding id="item1">
|
||||
<ion-item detail href="#" class="activated">
|
||||
<ion-item detail href="#" class="ion-activated">
|
||||
<ion-label class="ion-text-wrap">
|
||||
<h2>LEFT side - no icons</h2>
|
||||
<p>I think I figured out how to get more Mountain Dew</p>
|
||||
|
|
|
|||
|
|
@ -6,14 +6,17 @@
|
|||
|
||||
:host {
|
||||
--min-height: #{$item-ios-min-height};
|
||||
--transition: background-color 200ms linear;
|
||||
--transition: background-color 200ms linear, opacity 200ms linear;
|
||||
--padding-start: #{$item-ios-padding-start};
|
||||
--inner-padding-end: #{$item-ios-padding-end / 2};
|
||||
--inner-border-width: #{0px 0px $item-ios-border-bottom-width 0px};
|
||||
--background: #{$item-ios-background};
|
||||
--background-activated: #{$item-ios-background-activated};
|
||||
--background-focused: #{$item-ios-background-focused};
|
||||
--background-hover: #{$item-ios-background-hover};
|
||||
--background-activated: #000;
|
||||
--background-focused: #000;
|
||||
--background-hover: currentColor;
|
||||
--background-activated-opacity: .12;
|
||||
--background-focused-opacity: .15;
|
||||
--background-hover-opacity: .04;
|
||||
--border-color: #{$item-ios-border-bottom-color};
|
||||
--color: #{$item-ios-color};
|
||||
--highlight-height: 0;
|
||||
|
|
@ -25,27 +28,24 @@
|
|||
}
|
||||
|
||||
|
||||
// iOS Activated
|
||||
// iOS Item: States
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.activated) {
|
||||
:host(.ion-activated) {
|
||||
--transition: none;
|
||||
}
|
||||
|
||||
:host(.ion-color.activated) .item-native {
|
||||
background: current-color(shade);
|
||||
color: current-color(contrast);
|
||||
:host(.ion-color.ion-focused) .item-native::after {
|
||||
background: #000;
|
||||
|
||||
opacity: .15;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.activated.ion-activatable:hover) .item-native {
|
||||
background: var(--background-activated);
|
||||
color: var(--color-activated);
|
||||
}
|
||||
:host(.ion-color.ion-activated) .item-native {
|
||||
&::after {
|
||||
background: #000;
|
||||
|
||||
:host(.activated.ion-color.ion-activatable:hover) .item-native {
|
||||
background: #{current-color(shade)};
|
||||
color: #{current-color(contrast)};
|
||||
opacity: .12;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,12 +8,15 @@
|
|||
:host {
|
||||
--min-height: #{$item-md-min-height};
|
||||
--background: #{$item-md-background};
|
||||
--background-activated: var(--background);
|
||||
--background-focused: #{$item-md-background-focused};
|
||||
--background-hover: #{$item-md-background-hover};
|
||||
--background-activated: transparent;
|
||||
--background-focused: currentColor;
|
||||
--background-hover: currentColor;
|
||||
--background-activated-opacity: 0;
|
||||
--background-focused-opacity: .12;
|
||||
--background-hover-opacity: .04;
|
||||
--border-color: #{$item-md-border-bottom-color};
|
||||
--color: #{$item-md-color};
|
||||
--transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
|
||||
--transition: opacity 15ms linear, background-color 15ms linear;
|
||||
--padding-start: #{$item-md-padding-start};
|
||||
--color: #{$item-md-color};
|
||||
--border-color: #{$item-md-border-bottom-color};
|
||||
|
|
@ -31,22 +34,13 @@
|
|||
}
|
||||
|
||||
|
||||
// Material Design Item: Focused & Activated
|
||||
// Material Design Item: States
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused.activated) .item-native {
|
||||
background: var(--background-focused);
|
||||
color: var(--color-focused);
|
||||
}
|
||||
|
||||
:host(.ion-color.activated) .item-native {
|
||||
background: current-color(base);
|
||||
color: current-color(contrast);
|
||||
}
|
||||
|
||||
:host(.ion-color.ion-focused.activated) .item-native {
|
||||
background: current-color(shade);
|
||||
color: current-color(contrast);
|
||||
:host(.ion-color.ion-activated) .item-native {
|
||||
&::after {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,9 +6,12 @@
|
|||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the item
|
||||
* @prop --background-activated: Background of the item when pressed
|
||||
* @prop --background-activated: Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
|
||||
* @prop --background-activated-opacity: Opacity of the item background when pressed
|
||||
* @prop --background-focused: Background of the item when focused with the tab key
|
||||
* @prop --background-focused-opacity: Opacity of the item background when focused with the tab key
|
||||
* @prop --background-hover: Background of the item on hover
|
||||
* @prop --background-hover-opacity: Opacity of the background of the item on hover
|
||||
*
|
||||
* @prop --border-color: Color of the item border
|
||||
* @prop --border-radius: Radius of the item border
|
||||
|
|
@ -25,8 +28,8 @@
|
|||
* @prop --detail-icon-color: Color of the item detail icon
|
||||
* @prop --detail-icon-opacity: Opacity of the item detail icon
|
||||
* @prop --detail-icon-font-size: Font size of the item detail icon
|
||||
* @prop --inner-border-width: Width of the item inner border
|
||||
*
|
||||
* @prop --inner-border-width: Width of the item inner border
|
||||
* @prop --inner-box-shadow: Box shadow of the item inner
|
||||
* @prop --inner-padding-top: Top padding of the item inner
|
||||
* @prop --inner-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner
|
||||
|
|
@ -107,17 +110,43 @@
|
|||
}
|
||||
|
||||
|
||||
// Item: Activated
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-activated) .item-native {
|
||||
color: var(--color-activated);
|
||||
|
||||
&::after {
|
||||
background: var(--background-activated);
|
||||
|
||||
opacity: var(--background-activated-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.ion-color.ion-activated) .item-native {
|
||||
color: current-color(contrast);
|
||||
}
|
||||
|
||||
|
||||
// Item: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused) .item-native {
|
||||
background: var(--background-focused);
|
||||
color: var(--color-focused);
|
||||
|
||||
&::after {
|
||||
background: var(--background-focused);
|
||||
|
||||
opacity: var(--background-focused-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.ion-color.ion-focused) .item-native {
|
||||
background: current-color(shade);
|
||||
color: current-color(contrast);
|
||||
|
||||
&::after {
|
||||
background: current-color(contrast);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -126,26 +155,24 @@
|
|||
|
||||
@media (any-hover: hover) {
|
||||
:host(.ion-activatable:hover) .item-native {
|
||||
background: var(--background-hover);
|
||||
color: var(--color-hover);
|
||||
|
||||
&::after {
|
||||
background: var(--background-hover);
|
||||
|
||||
opacity: var(--background-hover-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.ion-color.ion-activatable:hover) .item-native {
|
||||
background: #{current-color(tint)};
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
&::after {
|
||||
background: #{current-color(contrast)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Item: Activated
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.activated) .item-native {
|
||||
background: var(--background-activated);
|
||||
color: var(--color-activated);
|
||||
}
|
||||
|
||||
|
||||
// Item: Disabled
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
@ -197,12 +224,22 @@
|
|||
box-shadow: var(--box-shadow);
|
||||
overflow: inherit;
|
||||
box-sizing: border-box;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.item-native::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.item-native::after {
|
||||
@include button-state();
|
||||
|
||||
transition: var(--transition);
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
button, a {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -1392,41 +1392,44 @@ Item Inputs
|
|||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| --------------------------- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the item |
|
||||
| `--background-activated` | Background of the item when pressed |
|
||||
| `--background-focused` | Background of the item when focused with the tab key |
|
||||
| `--background-hover` | Background of the item on hover |
|
||||
| `--border-color` | Color of the item border |
|
||||
| `--border-radius` | Radius of the item border |
|
||||
| `--border-style` | Style of the item border |
|
||||
| `--border-width` | Width of the item border |
|
||||
| `--box-shadow` | Box shadow of the item |
|
||||
| `--color` | Color of the item |
|
||||
| `--color-activated` | Color of the item when pressed |
|
||||
| `--color-focused` | Color of the item when focused with the tab key |
|
||||
| `--color-hover` | Color of the item on hover |
|
||||
| `--detail-icon-color` | Color of the item detail icon |
|
||||
| `--detail-icon-font-size` | Font size of the item detail icon |
|
||||
| `--detail-icon-opacity` | Opacity of the item detail icon |
|
||||
| `--highlight-color-focused` | The color of the highlight on the item when focused |
|
||||
| `--highlight-color-invalid` | The color of the highlight on the item when invalid |
|
||||
| `--highlight-color-valid` | The color of the highlight on the item when valid |
|
||||
| `--highlight-height` | The height of the highlight on the item |
|
||||
| `--inner-border-width` | Width of the item inner border |
|
||||
| `--inner-box-shadow` | Box shadow of the item inner |
|
||||
| `--inner-padding-bottom` | Bottom padding of the item inner |
|
||||
| `--inner-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner |
|
||||
| `--inner-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner |
|
||||
| `--inner-padding-top` | Top padding of the item inner |
|
||||
| `--min-height` | Minimum height of the item |
|
||||
| `--padding-bottom` | Bottom padding of the item |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item |
|
||||
| `--padding-top` | Top padding of the item |
|
||||
| `--ripple-color` | Color of the item ripple effect |
|
||||
| `--transition` | Transition of the item |
|
||||
| Name | Description |
|
||||
| -------------------------------- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the item |
|
||||
| `--background-activated` | Background of the item when pressed. Note: setting this will interfere with the Material Design ripple. |
|
||||
| `--background-activated-opacity` | Opacity of the item background when pressed |
|
||||
| `--background-focused` | Background of the item when focused with the tab key |
|
||||
| `--background-focused-opacity` | Opacity of the item background when focused with the tab key |
|
||||
| `--background-hover` | Background of the item on hover |
|
||||
| `--background-hover-opacity` | Opacity of the background of the item on hover |
|
||||
| `--border-color` | Color of the item border |
|
||||
| `--border-radius` | Radius of the item border |
|
||||
| `--border-style` | Style of the item border |
|
||||
| `--border-width` | Width of the item border |
|
||||
| `--box-shadow` | Box shadow of the item |
|
||||
| `--color` | Color of the item |
|
||||
| `--color-activated` | Color of the item when pressed |
|
||||
| `--color-focused` | Color of the item when focused with the tab key |
|
||||
| `--color-hover` | Color of the item on hover |
|
||||
| `--detail-icon-color` | Color of the item detail icon |
|
||||
| `--detail-icon-font-size` | Font size of the item detail icon |
|
||||
| `--detail-icon-opacity` | Opacity of the item detail icon |
|
||||
| `--highlight-color-focused` | The color of the highlight on the item when focused |
|
||||
| `--highlight-color-invalid` | The color of the highlight on the item when invalid |
|
||||
| `--highlight-color-valid` | The color of the highlight on the item when valid |
|
||||
| `--highlight-height` | The height of the highlight on the item |
|
||||
| `--inner-border-width` | Width of the item inner border |
|
||||
| `--inner-box-shadow` | Box shadow of the item inner |
|
||||
| `--inner-padding-bottom` | Bottom padding of the item inner |
|
||||
| `--inner-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner |
|
||||
| `--inner-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner |
|
||||
| `--inner-padding-top` | Top padding of the item inner |
|
||||
| `--min-height` | Minimum height of the item |
|
||||
| `--padding-bottom` | Bottom padding of the item |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item |
|
||||
| `--padding-top` | Top padding of the item |
|
||||
| `--ripple-color` | Color of the item ripple effect |
|
||||
| `--transition` | Transition of the item |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
|
|
|||
|
|
@ -25,10 +25,14 @@
|
|||
<ion-label>a[ion-item]</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="custom activated" href="#" onclick="testClick(event)">
|
||||
<ion-item class="custom ion-activated" href="#" onclick="testClick(event)">
|
||||
<ion-label>a[ion-item].activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="custom-hover" href="#" onclick="testClick(event)">
|
||||
<ion-label>custom hover</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="secondary" href="#" onclick="testClick(event)">
|
||||
<ion-label>a[ion-item] secondary</ion-label>
|
||||
</ion-item>
|
||||
|
|
@ -41,7 +45,7 @@
|
|||
<ion-label>button[ion-item] type="submit"</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button class="activated" onClick="testClick(event)">
|
||||
<ion-item button class="ion-activated" onClick="testClick(event)">
|
||||
<ion-label>button[ion-item].activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
|
|
@ -149,6 +153,12 @@
|
|||
.custom {
|
||||
--ripple-color: pink;
|
||||
}
|
||||
|
||||
.custom-hover {
|
||||
--background-hover: green;
|
||||
--background-hover-opacity: 1;
|
||||
--color-hover: purple;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#" color="danger" class="activated">
|
||||
<ion-item href="#" color="danger" class="ion-activated">
|
||||
<ion-label>
|
||||
a[ion-item].activated danger
|
||||
</ion-label>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button onclick="testClick(event)" color="secondary" class="activated">
|
||||
<ion-item button onclick="testClick(event)" color="secondary" class="ion-activated">
|
||||
<ion-label>
|
||||
button[ion-item].activated secondary
|
||||
</ion-label>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<ion-label>Item Tappable Danger</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button color="danger" class="activated">
|
||||
<ion-item button color="danger" class="ion-activated">
|
||||
<ion-label>Item Tappable Danger.activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('item: states', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/item/test/states?ionic:_testing=true'
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Item - States</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Item - States</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-item href="#">
|
||||
<ion-label>ion-item[href]</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#" class="ion-focused">
|
||||
<ion-label>ion-item[href] focused</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#" class="ion-activated">
|
||||
<ion-label>ion-item[href] activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button>
|
||||
<ion-label>ion-item[button]</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button class="ion-focused">
|
||||
<ion-label>ion-item[button] focused</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button class="ion-focused custom-radius">
|
||||
<ion-label>ion-item[button] border-radius focused</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button class="ion-activated">
|
||||
<ion-label>ion-item[button] activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="tertiary" href="#">
|
||||
<ion-label>ion-item[href]</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="tertiary" href="#" class="ion-focused">
|
||||
<ion-label>ion-item[href] focused</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="tertiary" href="#" class="ion-activated">
|
||||
<ion-label>ion-item[href] activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="warning" button>
|
||||
<ion-label>ion-item[button]</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="warning" button class="ion-focused">
|
||||
<ion-label>ion-item[button] focused</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="warning" button class="ion-activated">
|
||||
<ion-label>ion-item[button] activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#" class="custom">
|
||||
<ion-label>ion-item[href]</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#" class="custom ion-focused">
|
||||
<ion-label>ion-item[href] focused</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item href="#" class="custom ion-activated">
|
||||
<ion-label>ion-item[href] activated</ion-label>
|
||||
</ion-item>
|
||||
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
--color: rebeccapurple;
|
||||
}
|
||||
|
||||
.custom-radius {
|
||||
--border-radius: 0 50px 50px 0;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./menu-button";
|
||||
|
||||
// iOS Menu Button
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--background-focused: #{ion-color(primary, base, .1)};
|
||||
--background-focused: currentColor;
|
||||
--background-focused-opacity: .1;
|
||||
--border-radius: 4px;
|
||||
--color: #{ion-color(primary, base)};
|
||||
--padding-start: 5px;
|
||||
|
|
@ -15,20 +17,20 @@
|
|||
font-size: 31px;
|
||||
}
|
||||
|
||||
:host(.activated) {
|
||||
|
||||
// Menu Button: Activated
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-activated) {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
|
||||
// Menu Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) {
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Menu Button Color: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
background: #{current-color(base, .1)};
|
||||
}
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
@import "../../themes/ionic.globals.md";
|
||||
@import "./menu-button";
|
||||
|
||||
// MD Menu Button
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--background-focused: rgba(66, 66, 66, 0.24);
|
||||
--background-hover: rgba(66, 66, 66, 0.08);
|
||||
--background-focused: currentColor;
|
||||
--background-focused-opacity: .12;
|
||||
--background-hover: currentColor;
|
||||
--background-hover-opacity: .04;
|
||||
--border-radius: 50%;
|
||||
--color: initial;
|
||||
--padding-start: 8px;
|
||||
|
|
@ -18,20 +21,19 @@
|
|||
}
|
||||
|
||||
|
||||
// Menu Button Color: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused)::after {
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
|
||||
|
||||
// Menu Button Color: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.ion-color:hover) .button-native {
|
||||
background: #{current-color(base, .08)};
|
||||
:host(.ion-color:hover) .button-native::after {
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Menu Button Color: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color.ion-focused) .button-native {
|
||||
background: #{current-color(base, .24)};
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
|
@ -9,7 +9,9 @@
|
|||
*
|
||||
* @prop --background: Background of the menu button
|
||||
* @prop --background-hover: Background of the menu button on hover
|
||||
* @prop --background-hover-opacity: Opacity of the background on hover
|
||||
* @prop --background-focused: Background of the menu button when focused with the tab key
|
||||
* @prop --background-focused-opacity: Opacity of the menu button background when focused with the tab key
|
||||
*
|
||||
* @prop --color: Color of the menu button
|
||||
* @prop --color-hover: Color of the menu button on hover
|
||||
|
|
@ -21,7 +23,7 @@
|
|||
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
|
||||
*/
|
||||
--background: transparent;
|
||||
--color-focused: var(--color);
|
||||
--color-focused: currentColor;
|
||||
--border-radius: initial;
|
||||
--padding-top: 0;
|
||||
--padding-bottom: 0;
|
||||
|
|
@ -65,11 +67,28 @@
|
|||
line-height: 1;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.button-inner {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex-flow: row nowrap;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
ion-icon {
|
||||
@include margin(0);
|
||||
@include padding(0);
|
||||
|
|
@ -94,23 +113,37 @@ ion-icon {
|
|||
}
|
||||
|
||||
|
||||
// Menu Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) .button-native {
|
||||
background: var(--background-hover);
|
||||
color: var(--color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Menu Button: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused) .button-native {
|
||||
background: var(--background-focused);
|
||||
color: var(--color-focused);
|
||||
|
||||
&::after {
|
||||
background: var(--background-focused);
|
||||
|
||||
opacity: var(--background-focused-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Menu Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-native::after {
|
||||
@include button-state();
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) .button-native {
|
||||
color: var(--color-hover);
|
||||
|
||||
&::after {
|
||||
background: var(--background-hover);
|
||||
|
||||
opacity: var(--background-hover-opacity, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -125,7 +158,6 @@ ion-icon {
|
|||
// Menu Button in Toolbar: Global Theming
|
||||
// --------------------------------------------------
|
||||
|
||||
// TODO this will not work in Safari - component is shadow not scoped
|
||||
:host-context(ion-toolbar:not(.ion-color)) {
|
||||
:host(.in-toolbar) {
|
||||
color: #{var(--ion-toolbar-color, var(--color))};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { Component, ComponentInterface, Host, Listen, Prop, State, h } from '@stencil/core';
|
||||
import { Component, ComponentInterface, Element, Host, Listen, Prop, State, h } from '@stencil/core';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { Color } from '../../interface';
|
||||
import { ButtonInterface } from '../../utils/element-interface';
|
||||
import { menuController } from '../../utils/menu-controller';
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
import { updateVisibility } from '../menu-toggle/menu-toggle-util';
|
||||
|
||||
@Component({
|
||||
|
|
@ -17,6 +17,7 @@ import { updateVisibility } from '../menu-toggle/menu-toggle-util';
|
|||
shadow: true
|
||||
})
|
||||
export class MenuButton implements ComponentInterface, ButtonInterface {
|
||||
@Element() el!: HTMLIonSegmentElement;
|
||||
|
||||
@State() visible = false;
|
||||
|
||||
|
|
@ -84,6 +85,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
|
|||
'button': true, // ion-buttons target .button
|
||||
'menu-button-hidden': hidden,
|
||||
'menu-button-disabled': disabled,
|
||||
'in-toolbar': hostContext('ion-toolbar', this.el),
|
||||
'ion-activatable': true,
|
||||
'ion-focusable': true
|
||||
}}
|
||||
|
|
@ -93,9 +95,11 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
|
|||
disabled={disabled}
|
||||
class="button-native"
|
||||
>
|
||||
<slot>
|
||||
<ion-icon icon={menuIcon} mode={mode} lazy={false}></ion-icon>
|
||||
</slot>
|
||||
<span class="button-inner">
|
||||
<slot>
|
||||
<ion-icon icon={menuIcon} mode={mode} lazy={false}></ion-icon>
|
||||
</slot>
|
||||
</span>
|
||||
{mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
|
||||
</button>
|
||||
</Host>
|
||||
|
|
|
|||
|
|
@ -19,19 +19,21 @@ Menu Button is component that automatically creates the icon and functionality t
|
|||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ---------------------- | --------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the menu button |
|
||||
| `--background-focused` | Background of the menu button when focused with the tab key |
|
||||
| `--background-hover` | Background of the menu button on hover |
|
||||
| `--border-radius` | Border radius of the menu button |
|
||||
| `--color` | Color of the menu button |
|
||||
| `--color-focused` | Color of the menu button when focused with the tab key |
|
||||
| `--color-hover` | Color of the menu button on hover |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| Name | Description |
|
||||
| ------------------------------ | --------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the menu button |
|
||||
| `--background-focused` | Background of the menu button when focused with the tab key |
|
||||
| `--background-focused-opacity` | Opacity of the menu button background when focused with the tab key |
|
||||
| `--background-hover` | Background of the menu button on hover |
|
||||
| `--background-hover-opacity` | Opacity of the background on hover |
|
||||
| `--border-radius` | Border radius of the menu button |
|
||||
| `--color` | Color of the menu button |
|
||||
| `--color-focused` | Color of the menu button when focused with the tab key |
|
||||
| `--color-hover` | Color of the menu button on hover |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
|
|
|||
|
|
@ -85,6 +85,14 @@
|
|||
<ion-title>Success</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar class="themed">
|
||||
<ion-buttons slot="start">
|
||||
<ion-menu-button auto-hide="false"></ion-menu-button>
|
||||
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Themed</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="dark">
|
||||
<ion-buttons slot="start">
|
||||
<ion-menu-button></ion-menu-button>
|
||||
|
|
@ -103,13 +111,18 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.themed {
|
||||
--ion-toolbar-background: #222;
|
||||
--ion-toolbar-color: #ddd;
|
||||
}
|
||||
|
||||
.custom {
|
||||
--color: hotpink;
|
||||
}
|
||||
|
||||
.custom.md {
|
||||
--background-hover: rgb(255, 105, 180, .08);
|
||||
--background-focused: rgb(255, 105, 180, .24);
|
||||
--background-hover: #ff69b4;
|
||||
--background-focused: #ff69b4;
|
||||
}
|
||||
|
||||
.custom-large {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
}
|
||||
|
||||
.picker-button,
|
||||
.picker-button.activated {
|
||||
.picker-button.ion-activated {
|
||||
@include margin(0);
|
||||
@include padding($picker-ios-button-padding-top, $picker-ios-button-padding-end, $picker-ios-button-padding-bottom, $picker-ios-button-padding-start);
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
|
||||
.picker-button,
|
||||
.picker-button.activated {
|
||||
.picker-button.ion-activated {
|
||||
@include margin(0);
|
||||
@include padding(0, 1.1em);
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
|
||||
// iOS Radio: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
:host(.radio-disabled) {
|
||||
opacity: $radio-ios-disabled-opacity;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.searchbar-search-icon.activated,
|
||||
.searchbar-cancel-button.activated {
|
||||
.searchbar-search-icon.ion-activated,
|
||||
.searchbar-cancel-button.ion-activated {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.searchbar-clear-button.activated {
|
||||
.searchbar-clear-button.ion-activated {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -631,34 +631,36 @@ export const SegmentButtonExample: React.FC = () => (
|
|||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ------------------------ | ----------------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the segment button |
|
||||
| `--background-checked` | Background of the checked segment button |
|
||||
| `--background-disabled` | Background of the disabled segment button |
|
||||
| `--background-hover` | Background of the segment button on hover |
|
||||
| `--border-color` | Color of the segment button border |
|
||||
| `--border-radius` | Radius of the segment button border |
|
||||
| `--border-style` | Style of the segment button border |
|
||||
| `--border-width` | Width of the segment button border |
|
||||
| `--color` | Color of the segment button |
|
||||
| `--color-checked` | Color of the checked segment button |
|
||||
| `--color-disabled` | Color of the disabled segment button |
|
||||
| `--color-hover` | Color of the segment button on hover |
|
||||
| `--indicator-box-shadow` | Box shadow on the indicator for the checked segment button |
|
||||
| `--indicator-color` | Color of the indicator for the checked segment button |
|
||||
| `--indicator-height` | Height of the indicator for the checked segment button |
|
||||
| `--indicator-transform` | Transform of the indicator for the checked segment button |
|
||||
| `--indicator-transition` | Transition of the indicator for the checked segment button |
|
||||
| `--margin-bottom` | Bottom margin of the segment button |
|
||||
| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button |
|
||||
| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button |
|
||||
| `--margin-top` | Top margin of the segment button |
|
||||
| `--padding-bottom` | Bottom padding of the segment button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button |
|
||||
| `--padding-top` | Top padding of the segment button |
|
||||
| `--transition` | Transition of the segment button |
|
||||
| Name | Description |
|
||||
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the segment button |
|
||||
| `--background-checked` | Background of the checked segment button |
|
||||
| `--background-focused` | Background of the segment button when focused with the tab key |
|
||||
| `--background-focused-opacity` | Opacity of the segment button background when focused with the tab key |
|
||||
| `--background-hover` | Background of the segment button on hover |
|
||||
| `--background-hover-opacity` | Opacity of the segment button background on hover |
|
||||
| `--border-color` | Color of the segment button border |
|
||||
| `--border-radius` | Radius of the segment button border |
|
||||
| `--border-style` | Style of the segment button border |
|
||||
| `--border-width` | Width of the segment button border |
|
||||
| `--color` | Color of the segment button |
|
||||
| `--color-checked` | Color of the checked segment button |
|
||||
| `--color-focused` | Color of the segment button when focused with the tab key |
|
||||
| `--color-hover` | Color of the segment button on hover |
|
||||
| `--indicator-box-shadow` | Box shadow on the indicator for the checked segment button |
|
||||
| `--indicator-color` | Color of the indicator for the checked segment button |
|
||||
| `--indicator-height` | Height of the indicator for the checked segment button |
|
||||
| `--indicator-transform` | Transform of the indicator for the checked segment button |
|
||||
| `--indicator-transition` | Transition of the indicator for the checked segment button |
|
||||
| `--margin-bottom` | Bottom margin of the segment button |
|
||||
| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button |
|
||||
| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button |
|
||||
| `--margin-top` | Top margin of the segment button |
|
||||
| `--padding-bottom` | Bottom padding of the segment button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button |
|
||||
| `--padding-top` | Top padding of the segment button |
|
||||
| `--transition` | Transition of the segment button |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
|
|
|||
|
|
@ -5,9 +5,12 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--background: #{$segment-button-ios-background-color};
|
||||
--background-checked: #{$segment-button-ios-background-color-checked};
|
||||
--background-hover: #{$segment-button-ios-background-color-hover};
|
||||
--background: #{$segment-button-ios-background};
|
||||
--background-checked: #{$segment-button-ios-background-checked};
|
||||
--background-hover: #{$segment-button-ios-background-hover};
|
||||
--background-hover-opacity: 0;
|
||||
--background-focused: none;
|
||||
--background-focused-opacity: 0;
|
||||
--border-radius: #{$segment-button-ios-border-radius};
|
||||
--border-width: #{$segment-button-ios-border-width};
|
||||
--border-color: #{$segment-button-ios-border-color};
|
||||
|
|
@ -134,16 +137,89 @@
|
|||
}
|
||||
|
||||
|
||||
// Segment: States
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused) .button-native {
|
||||
opacity: $segment-button-ios-opacity-focused;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
// Default Segment, Hover
|
||||
:host(:hover) .button-native {
|
||||
opacity: $segment-button-ios-opacity-hover;
|
||||
}
|
||||
|
||||
:host(.segment-button-checked:hover) .button-native {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Segment Button: Segment w/ Color
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default
|
||||
:host(.in-segment-color) {
|
||||
background: none;
|
||||
color: $segment-button-ios-color;
|
||||
}
|
||||
|
||||
// Indicator color on a Segment w/ color
|
||||
// should not change if the variable is set
|
||||
:host(.in-segment-color) .segment-button-indicator-background {
|
||||
background: $segment-button-ios-indicator-color;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
// Toolbar with Color, Default Segment, Hover
|
||||
// Toolbar with Color, Default Segment, Checked, Hover
|
||||
:host(.in-segment-color:hover) .button-native,
|
||||
:host(.in-segment-color.segment-button-checked:hover) .button-native {
|
||||
color: $segment-button-ios-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Segment Button: Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
// Segment button indicator color should use the global variable with
|
||||
// a fallback to the local variable
|
||||
:host(.in-toolbar) .segment-button-indicator-background {
|
||||
background: #{var(--ion-toolbar-segment-indicator-color, var(--indicator-color))};
|
||||
// Default Segment, In a Toolbar
|
||||
:host(.in-toolbar:not(.in-segment-color)) {
|
||||
--background-checked: #{var(--ion-toolbar-segment-background-checked, $segment-button-ios-background-checked)};
|
||||
--color: var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);
|
||||
--color-checked: var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);
|
||||
--indicator-color: #{var(--ion-toolbar-segment-indicator-color, $segment-button-ios-indicator-color)};
|
||||
}
|
||||
|
||||
|
||||
// Segment Button: Toolbar w/ Color
|
||||
// --------------------------------------------------
|
||||
|
||||
// Do not use the global or local CSS variable if the toolbar has a color
|
||||
:host(.in-toolbar-color) .segment-button-indicator-background {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// Toolbar with Color, Default Segment
|
||||
:host(.in-toolbar-color:not(.in-segment-color)) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
// Toolbar with Color, Default Segment, Checked
|
||||
:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
// Toolbar with Color, Default Segment, Hover
|
||||
:host(.in-toolbar-color:not(.in-segment-color):hover) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
// Toolbar with Color, Default Segment, Checked / Hover
|
||||
:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color):hover) .button-native {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,13 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background of the segment button
|
||||
$segment-button-ios-background-color: transparent !default;
|
||||
$segment-button-ios-background: none !default;
|
||||
|
||||
/// @prop - Background of the checked segment button
|
||||
$segment-button-ios-background-color-checked: transparent !default;
|
||||
$segment-button-ios-background-checked: $segment-button-ios-background !default;
|
||||
|
||||
/// @prop - Text color of the segment button
|
||||
$segment-button-ios-color: $text-color !default;
|
||||
|
||||
/// @prop - Background of the checked segment button indicator
|
||||
$segment-button-ios-indicator-color: var(--ion-color-step-350, $background-color) !default;
|
||||
|
|
@ -18,11 +21,14 @@ $segment-button-ios-margin: 2px !default;
|
|||
/// @prop - Opacity of the segment button on hover
|
||||
$segment-button-ios-opacity-hover: .5 !default;
|
||||
|
||||
/// @prop - Opacity of the segment button when focused
|
||||
$segment-button-ios-opacity-focused: .7 !default;
|
||||
|
||||
/// @prop - Opacity of the disabled segment button
|
||||
$segment-button-ios-opacity-disabled: .3 !default;
|
||||
|
||||
/// @prop - Background of the segment button on hover
|
||||
$segment-button-ios-background-color-hover: transparent !default;
|
||||
$segment-button-ios-background-hover: none !default;
|
||||
|
||||
/// @prop - Box shadow of the checked segment button
|
||||
$segment-button-ios-box-shadow-checked: 0 0 5px rgba(0, 0, 0, 0.16) !default;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@
|
|||
:host {
|
||||
--background: #{$segment-button-md-background};
|
||||
--background-checked: #{$segment-button-md-background-checked};
|
||||
--background-hover: #{$segment-button-md-background-hover};
|
||||
--background-hover: var(--color-checked);
|
||||
--background-focused: var(--color-checked);
|
||||
--background-activated-opacity: 0;
|
||||
--background-focused-opacity: .12;
|
||||
--background-hover-opacity: .04;
|
||||
--color: #{$segment-button-md-text-color};
|
||||
--color-checked: #{$segment-button-md-text-color-checked};
|
||||
--indicator-box-shadow: none;
|
||||
|
|
@ -48,6 +52,84 @@
|
|||
opacity: $segment-button-md-opacity-disabled;
|
||||
}
|
||||
|
||||
|
||||
// Segment Button: Segment w/ Color
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default
|
||||
:host(.in-segment-color) {
|
||||
background: none;
|
||||
color: $segment-button-md-text-color;
|
||||
}
|
||||
|
||||
// Indicator color and ripple on a Segment w/ color
|
||||
// should not change if the variables are set
|
||||
:host(.in-segment-color) ion-ripple-effect {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
||||
:host(.in-segment-color) .segment-button-indicator-background {
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
|
||||
// Checked
|
||||
:host(.in-segment-color.segment-button-checked) .button-native {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
||||
// Focused
|
||||
:host(.in-segment-color.ion-focused) .button-native::after {
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.in-segment-color:hover) .button-native {
|
||||
color: $segment-button-md-text-color;
|
||||
|
||||
&::after {
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
}
|
||||
|
||||
:host(.in-segment-color.segment-button-checked:hover) .button-native {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Segment: Default Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.in-toolbar:not(.in-segment-color)) {
|
||||
--background: #{var(--ion-toolbar-segment-background, $segment-button-md-background)};
|
||||
--background-checked: #{var(--ion-toolbar-segment-background-checked, $segment-button-md-background-checked)};
|
||||
--color: #{var(--ion-toolbar-segment-color, $segment-button-md-text-color)};
|
||||
--color-checked: #{var(--ion-toolbar-segment-color-checked, $segment-button-md-text-color-checked)};
|
||||
--indicator-color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};
|
||||
}
|
||||
|
||||
|
||||
// Segment Button: Toolbar w/ Color
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default Segment, In a Toolbar with Color
|
||||
:host(.in-toolbar-color:not(.in-segment-color)) .button-native {
|
||||
color: #{current-color(contrast, .6)};
|
||||
}
|
||||
|
||||
// Default Segment, In a Toolbar with Color, Checked
|
||||
:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native {
|
||||
color: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
// Default Segment, In a Toolbar with Color, Hover
|
||||
@media (any-hover: hover) {
|
||||
:host(.in-toolbar-color:not(.in-segment-color)) .button-native::after {
|
||||
background: #{current-color(contrast)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Segment Button: Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -9,24 +9,21 @@ $segment-button-md-opacity: .6 !default;
|
|||
/// @prop - Text color of the segment button
|
||||
$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity) !default;
|
||||
|
||||
/// @prop - Text color of the checked segment button
|
||||
$segment-button-md-text-color-checked: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background of the segment button
|
||||
$segment-button-md-background: none !default;
|
||||
|
||||
/// @prop - Background of the checked segment button
|
||||
$segment-button-md-background-checked: $segment-button-md-background !default;
|
||||
|
||||
/// @prop - Background of the hovered segment button
|
||||
$segment-button-md-background-hover: ion-color(primary, base, .04) !default;
|
||||
|
||||
/// @prop - Width of the bottom border on the segment button
|
||||
$segment-button-md-border-bottom-width: 2px !default;
|
||||
|
||||
/// @prop - Color of the bottom border on the segment button
|
||||
$segment-button-md-border-bottom-color: transparent !default;
|
||||
|
||||
/// @prop - Text color of the checked segment button
|
||||
$segment-button-md-text-color-checked: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Opacity of the disabled segment button
|
||||
$segment-button-md-opacity-disabled: .3 !default;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,13 +7,17 @@
|
|||
/**
|
||||
* @prop --background: Background of the segment button
|
||||
* @prop --background-checked: Background of the checked segment button
|
||||
* @prop --background-disabled: Background of the disabled segment button
|
||||
*
|
||||
* @prop --background-hover: Background of the segment button on hover
|
||||
* @prop --background-focused: Background of the segment button when focused with the tab key
|
||||
*
|
||||
* @prop --background-hover-opacity: Opacity of the segment button background on hover
|
||||
* @prop --background-focused-opacity: Opacity of the segment button background when focused with the tab key
|
||||
*
|
||||
* @prop --color: Color of the segment button
|
||||
* @prop --color-checked: Color of the checked segment button
|
||||
* @prop --color-disabled: Color of the disabled segment button
|
||||
* @prop --color-hover: Color of the segment button on hover
|
||||
* @prop --color-focused: Color of the segment button when focused with the tab key
|
||||
*
|
||||
* @prop --border-radius: Radius of the segment button border
|
||||
* @prop --border-color: Color of the segment button border
|
||||
|
|
@ -39,7 +43,7 @@
|
|||
* @prop --indicator-transform: Transform of the indicator for the checked segment button
|
||||
*/
|
||||
--color: initial;
|
||||
--color-hover: initial;
|
||||
--color-hover: var(--color);
|
||||
--color-checked: var(--color);
|
||||
--color-disabled: var(--color);
|
||||
--padding-start: 0;
|
||||
|
|
@ -105,9 +109,29 @@
|
|||
contain: content;
|
||||
cursor: pointer;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.button-native::after {
|
||||
@include button-state();
|
||||
}
|
||||
|
||||
.button-inner {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex-flow: inherit;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
// Segment Button: Checked
|
||||
// --------------------------------------------------
|
||||
|
|
@ -122,22 +146,40 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
:host(.segment-button-disabled) {
|
||||
background: var(--background-disabled);
|
||||
color: var(--color-disabled);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Segment Button: Focused
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused) .button-native {
|
||||
color: var(--color-focused);
|
||||
|
||||
&::after {
|
||||
background: var(--background-focused);
|
||||
|
||||
opacity: var(--background-focused-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
// Segment Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) {
|
||||
background: var(--background-hover);
|
||||
color: var(--color-hover, var(--color));
|
||||
:host(:hover) .button-native {
|
||||
color: var(--color-hover);
|
||||
|
||||
&::after {
|
||||
background: var(--background-hover);
|
||||
|
||||
opacity: var(--background-hover-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.segment-button-checked:hover) {
|
||||
color: var(--color-hover, var(--color-checked));
|
||||
:host(.segment-button-checked:hover) .button-native {
|
||||
color: var(--color-checked);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -88,6 +88,8 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
|
|||
[mode]: true,
|
||||
'in-toolbar': hostContext('ion-toolbar', this.el),
|
||||
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
||||
'in-segment': hostContext('ion-segment', this.el),
|
||||
'in-segment-color': hostContext('ion-segment[color]', this.el),
|
||||
'segment-button-has-label': hasLabel,
|
||||
'segment-button-has-icon': hasIcon,
|
||||
'segment-button-has-label-only': hasLabel && !hasIcon,
|
||||
|
|
@ -97,6 +99,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
|
|||
[`segment-button-layout-${layout}`]: true,
|
||||
'ion-activatable': true,
|
||||
'ion-activatable-instant': true,
|
||||
'ion-focusable': true,
|
||||
}}
|
||||
>
|
||||
<button
|
||||
|
|
@ -105,7 +108,9 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
|
|||
class="button-native"
|
||||
disabled={disabled}
|
||||
>
|
||||
<slot></slot>
|
||||
<span class="button-inner">
|
||||
<slot></slot>
|
||||
</span>
|
||||
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
|
||||
</button>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -14,10 +14,6 @@
|
|||
z-index: 0;
|
||||
}
|
||||
|
||||
:host(.segment-disabled) {
|
||||
opacity: $segment-button-ios-opacity-disabled;
|
||||
}
|
||||
|
||||
|
||||
// Segment: Color
|
||||
// --------------------------------------------------
|
||||
|
|
@ -26,10 +22,6 @@
|
|||
background: #{current-color(base, 0.065)};
|
||||
}
|
||||
|
||||
:host(.ion-color) ::slotted(.segment-button-checked) {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
// Segment: Activated
|
||||
// --------------------------------------------------
|
||||
|
|
@ -51,12 +43,6 @@
|
|||
// Default Segment, In a Toolbar
|
||||
:host(.in-toolbar:not(.ion-color)) {
|
||||
background: var(--ion-toolbar-segment-background, $segment-ios-background-color);
|
||||
color: var(--ion-toolbar-segment-color, var(--color));
|
||||
}
|
||||
|
||||
// Default Segment, In a Toolbar, Checked
|
||||
:host(.in-toolbar:not(.ion-color)) ::slotted(.segment-button-checked) {
|
||||
color: var(--ion-toolbar-segment-color-checked, var(--color-checked));
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -66,17 +52,4 @@
|
|||
// Toolbar with Color, Default Segment
|
||||
:host(.in-toolbar-color:not(.ion-color)) {
|
||||
background: #{current-color(contrast, 0.11)};
|
||||
color: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
// Toolbar with Color, Default Segment, Checked
|
||||
:host(.in-toolbar-color:not(.ion-color)) ::slotted(.segment-button-checked) {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
// Toolbar with Color, Default Segment, Checked / Hover
|
||||
:host(.in-toolbar-color:not(.ion-color)) ::slotted(.segment-button-checked:hover) {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
}
|
||||
|
|
@ -8,73 +8,6 @@
|
|||
--background: transparent;
|
||||
}
|
||||
|
||||
:host(.segment-disabled) {
|
||||
opacity: $segment-md-opacity-disabled;
|
||||
}
|
||||
|
||||
// Segment: Color
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color) ::slotted(ion-segment-button) {
|
||||
--ripple-color: #{current-color(base)};
|
||||
--indicator-color: #{current-color(base)};
|
||||
|
||||
background: transparent;
|
||||
color: $segment-button-md-text-color;
|
||||
}
|
||||
|
||||
:host(.ion-color) ::slotted(.segment-button-checked) {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(.ion-color) ::slotted(ion-segment-button:hover) {
|
||||
background: #{current-color(base, .04)};
|
||||
}
|
||||
}
|
||||
|
||||
// Segment: Default Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default Segment, In a Toolbar
|
||||
:host(.in-toolbar:not(.ion-color)) ::slotted(ion-segment-button) {
|
||||
--indicator-color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};
|
||||
|
||||
background: #{var(--ion-toolbar-segment-background, var(--background))};
|
||||
color: #{var(--ion-toolbar-segment-color, var(--color))};
|
||||
}
|
||||
|
||||
// Default Segment, In a Toolbar, Checked
|
||||
:host(.in-toolbar:not(.ion-color)) ::slotted(.segment-button-checked) {
|
||||
background: #{var(--ion-toolbar-segment-background-checked, var(--background-checked))};
|
||||
color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};
|
||||
}
|
||||
|
||||
|
||||
// Segment: Toolbar Color
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default Segment, In a Toolbar with Color
|
||||
:host(.in-toolbar-color:not(.ion-color)) ::slotted(ion-segment-button) {
|
||||
color: #{current-color(contrast, .6)};
|
||||
}
|
||||
|
||||
// Default Segment, In a Toolbar with Color, Checked
|
||||
:host(.in-toolbar-color:not(.ion-color)) ::slotted(.segment-button-checked) {
|
||||
color: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
|
||||
// Segment: Toolbar Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
// Default Segment, In a Toolbar with Color, Hover
|
||||
:host(.in-toolbar-color:not(.ion-color)) ::slotted(ion-segment-button:hover) {
|
||||
background: #{ion-color(primary, contrast, .04)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Segment: Scrollable
|
||||
// --------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -3,6 +3,3 @@
|
|||
|
||||
// Material Design Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Opacity of the disabled segment
|
||||
$segment-md-opacity-disabled: .3 !default;
|
||||
|
|
|
|||
|
|
@ -30,15 +30,6 @@
|
|||
}
|
||||
|
||||
|
||||
// Segment: Disabled
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.segment-disabled),
|
||||
::slotted(.segment-button-disabled) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Segment: Scrollable
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
@ -53,19 +44,3 @@
|
|||
:host(.segment-scrollable::-webkit-scrollbar) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Segment Button: Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
// Default Segment, In a Default Toolbar, Hover
|
||||
:host(.in-toolbar:not(.ion-color)) ::slotted(ion-segment-button:hover) {
|
||||
background: var(--ion-toolbar-segment-background-hover, var(--background-hover));
|
||||
color: var(--ion-toolbar-segment-color-hover, var(--color-hover, var(--ion-toolbar-segment-color, var(--color))));
|
||||
}
|
||||
|
||||
// Default Segment, In a Default Toolbar, Checked / Hover
|
||||
:host(.in-toolbar:not(.ion-color)) ::slotted(.segment-button-checked:hover) {
|
||||
color: var(--ion-toolbar-segment-color-hover, var(--color-hover, var(--ion-toolbar-segment-color-checked, var(--color-checked))));
|
||||
}
|
||||
}
|
||||
|
|
@ -70,6 +70,15 @@ export class Segment implements ComponentInterface {
|
|||
|
||||
@Watch('disabled')
|
||||
disabledChanged() {
|
||||
this.gestureChanged();
|
||||
|
||||
const buttons = this.getButtons();
|
||||
for (const button of buttons) {
|
||||
button.disabled = this.disabled;
|
||||
}
|
||||
}
|
||||
|
||||
private gestureChanged() {
|
||||
if (this.gesture && !this.scrollable) {
|
||||
this.gesture.enable(!this.disabled);
|
||||
}
|
||||
|
|
@ -97,7 +106,11 @@ export class Segment implements ComponentInterface {
|
|||
onEnd: ev => this.onEnd(ev),
|
||||
});
|
||||
this.gesture.enable(!this.scrollable);
|
||||
this.disabledChanged();
|
||||
this.gestureChanged();
|
||||
|
||||
if (this.disabled) {
|
||||
this.disabledChanged();
|
||||
}
|
||||
this.didInit = true;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -103,13 +103,13 @@
|
|||
|
||||
<ion-segment color="dark" value="Reading List">
|
||||
<ion-segment-button value="Bookmarks">
|
||||
<ion-icon name="md-book"></ion-icon>
|
||||
<ion-icon name="book"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Reading List">
|
||||
<ion-icon name="search"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Shared Links">
|
||||
<ion-icon name="md-time"></ion-icon>
|
||||
<ion-icon name="time"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('segment: basic', async () => {
|
||||
test('segment: colors', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/segment/test/basic?ionic:_testing=true'
|
||||
url: '/src/components/segment/test/colors?ionic:_testing=true'
|
||||
});
|
||||
|
||||
await page.waitFor(250);
|
||||
|
|
@ -11,9 +11,9 @@ test('segment: basic', async () => {
|
|||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
|
||||
test('segment:rtl: basic', async () => {
|
||||
test('segment:rtl: colors', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/segment/test/basic?ionic:_testing=true&rtl=true'
|
||||
url: '/src/components/segment/test/colors?ionic:_testing=true&rtl=true'
|
||||
});
|
||||
|
||||
await page.waitFor(250);
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<!-- Default NO COLOR -->
|
||||
<ion-segment value="free">
|
||||
<ion-segment-button value="paid">
|
||||
Paid
|
||||
|
|
@ -35,135 +36,149 @@
|
|||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="primary" value="reading-list">
|
||||
<ion-segment-button value="bookmarks">
|
||||
Bookmarks
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="reading-list">
|
||||
Reading List
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="shared-links">
|
||||
Shared Links
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<div class="customize-all">
|
||||
<ion-segment value="free">
|
||||
<ion-segment-button value="paid">
|
||||
Custom
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="free">
|
||||
Colors
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="top">
|
||||
All
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="secondary" value="active">
|
||||
<ion-segment-button value="active">
|
||||
Active
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="disabled" disabled="true">
|
||||
Disabled
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="inactive" disabled="false">
|
||||
Inactive
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-segment color="primary" value="reading-list">
|
||||
<ion-segment-button value="bookmarks">
|
||||
Bookmarks
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="reading-list">
|
||||
Reading List
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="shared-links">
|
||||
Shared Links
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="tertiary" value="all">
|
||||
<ion-segment-button value="all">
|
||||
All
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="missed">
|
||||
Missed
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-segment color="secondary" value="active">
|
||||
<ion-segment-button value="active">
|
||||
Active
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="disabled" disabled="true">
|
||||
Disabled
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="inactive" disabled="false">
|
||||
Inactive
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="success" value="330">
|
||||
<ion-segment-button value="330">
|
||||
<ion-label>330ml</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="440">
|
||||
<ion-label>440ml</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="500">
|
||||
<ion-label>500ml</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="custom">
|
||||
<ion-icon name="create"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-segment color="tertiary" value="all">
|
||||
<ion-segment-button value="all">
|
||||
All
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="missed">
|
||||
Missed
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="warning" value="reading-list">
|
||||
<ion-segment-button value="bookmarks">
|
||||
<ion-icon name="book"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="reading-list">
|
||||
<ion-icon name="glasses"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="shared-links">
|
||||
<ion-icon name="at"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-segment color="success" value="330">
|
||||
<ion-segment-button value="330">
|
||||
<ion-label>330ml</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="440">
|
||||
<ion-label>440ml</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="500">
|
||||
<ion-label>500ml</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="custom">
|
||||
<ion-icon name="create"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="danger" value="bookmarks">
|
||||
<ion-segment-button value="bookmarks">
|
||||
<ion-label>Bookmarks</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="reading-list">
|
||||
<ion-label>Reading List</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="shared-links">
|
||||
<ion-label>Shared Links</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-segment color="warning" value="reading-list">
|
||||
<ion-segment-button value="bookmarks">
|
||||
<ion-icon name="book"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="reading-list">
|
||||
<ion-icon name="glasses"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="shared-links">
|
||||
<ion-icon name="at"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="danger" value="bookmarks">
|
||||
<ion-segment-button value="bookmarks">
|
||||
<ion-label>Bookmarks</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="reading-list">
|
||||
<ion-label>Reading List</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="shared-links">
|
||||
<ion-label>Shared Links</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
|
||||
<ion-segment color="light" value="rainy">
|
||||
<ion-segment-button value="sunny">
|
||||
Sunny
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy">
|
||||
Rainy
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-segment color="light" value="rainy">
|
||||
<ion-segment-button value="sunny">
|
||||
Sunny
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy">
|
||||
Rainy
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="medium" value="seg1">
|
||||
<ion-segment-button value="seg1">
|
||||
<ion-label>Seg 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg2">
|
||||
<ion-label>Seg 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg3">
|
||||
<ion-label>Seg 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-segment color="medium" value="seg1">
|
||||
<ion-segment-button value="seg1">
|
||||
<ion-label>Seg 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg2">
|
||||
<ion-label>Seg 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg3">
|
||||
<ion-label>Seg 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="dark" value="seg22">
|
||||
<ion-segment-button value="seg21">
|
||||
<ion-label>Seg 2 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg22">
|
||||
<ion-label>Seg 2 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg23">
|
||||
<ion-label>Seg 2 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-segment color="dark" value="seg22">
|
||||
<ion-segment-button value="seg21">
|
||||
<ion-label>Seg 2 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg22">
|
||||
<ion-label>Seg 2 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg23">
|
||||
<ion-label>Seg 2 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment disabled color="danger" value="seg22">
|
||||
<ion-segment-button value="seg21">
|
||||
<ion-label>Seg 2 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg22">
|
||||
<ion-label>Seg 2 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg23">
|
||||
<ion-label>Seg 2 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-segment disabled color="danger" value="seg22">
|
||||
<ion-segment-button value="seg21">
|
||||
<ion-label>Seg 2 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg22">
|
||||
<ion-label>Seg 2 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg23">
|
||||
<ion-label>Seg 2 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment disabled color="medium" value="seg22">
|
||||
<ion-segment-button value="seg21">
|
||||
<ion-label>Seg 2 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg22">
|
||||
<ion-label>Seg 2 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg23">
|
||||
<ion-label>Seg 2 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-segment disabled color="medium" value="seg22">
|
||||
<ion-segment-button value="seg21">
|
||||
<ion-label>Seg 2 1</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg22">
|
||||
<ion-label>Seg 2 2</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="seg23">
|
||||
<ion-label>Seg 2 3</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
|
|
@ -171,6 +186,22 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.md .customize-all ion-segment-button {
|
||||
--color: red;
|
||||
--background: rgba(0, 0, 0, 0.2);
|
||||
--ripple-color: red;
|
||||
--indicator-color: red;
|
||||
}
|
||||
|
||||
.ios .customize-all ion-segment {
|
||||
--background: rgba(51, 17, 17, 0.15);
|
||||
}
|
||||
|
||||
.ios .customize-all ion-segment-button {
|
||||
--color: purple;
|
||||
--indicator-color: lightpink;
|
||||
}
|
||||
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@
|
|||
</ion-toolbar>
|
||||
|
||||
<!-- Label only -->
|
||||
<ion-toolbar color="primary">
|
||||
<ion-toolbar color="warning">
|
||||
<ion-segment value="1">
|
||||
<ion-segment-button value="1">
|
||||
<ion-label>Item One</ion-label>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
--background-focused: #{$tabbar-ios-background-focused};
|
||||
--border: #{$hairlines-width solid $tabbar-ios-border-color};
|
||||
--color: #{$tab-button-ios-text-color};
|
||||
--color-selected: #{$tabbar-ios-color-activated};
|
||||
--color-selected: #{$tabbar-ios-color-selected};
|
||||
|
||||
height: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
--background-focused: #{$tabbar-md-background-focused};
|
||||
--border: #{1px solid $tabbar-md-border-color};
|
||||
--color: #{$tab-button-md-text-color};
|
||||
--color-selected: #{$tabbar-md-color-activated};
|
||||
--color-selected: #{$tabbar-md-color-selected};
|
||||
|
||||
height: 56px;
|
||||
}
|
||||
|
|
@ -4,193 +4,199 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tab Bar - Preview</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">
|
||||
<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">
|
||||
<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> <link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
|
||||
<link rel="stylesheet" href="../../../../../scripts/testing/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Default -->
|
||||
<ion-tab-bar selected-tab="1">
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<!-- Default -->
|
||||
<ion-tab-bar selected-tab="1">
|
||||
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Recents</ion-label>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Recents</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-badge>23</ion-badge>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-badge>23</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Settings</ion-label>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Settings</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
</ion-tab-bar>
|
||||
|
||||
<!-- Badges -->
|
||||
<ion-tab-bar selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-badge color="danger"></ion-badge>
|
||||
</ion-tab-button>
|
||||
<!-- Badges -->
|
||||
<ion-tab-bar selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-badge color="danger"></ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
<ion-icon name="musical-note"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2">
|
||||
<ion-icon name="musical-note"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3">
|
||||
<ion-icon name="today"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3">
|
||||
<ion-icon name="today"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="4">
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
<ion-badge color="danger">47</ion-badge>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
<ion-tab-button tab="4">
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
<ion-badge color="danger">47</ion-badge>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
|
||||
<ion-tab-bar selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-icon name="musical-note"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-bar selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-icon name="musical-note"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2" layout="icon-bottom">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Favorites</ion-label>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2" layout="icon-bottom">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Favorites</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3">
|
||||
<ion-icon name="today"></ion-icon>
|
||||
<ion-badge color="danger">88</ion-badge>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3">
|
||||
<ion-icon name="today"></ion-icon>
|
||||
<ion-badge color="danger">88</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="4">
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
<ion-tab-button tab="4">
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
|
||||
<ion-tab-bar selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-bar selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
<ion-icon name="musical-note"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2">
|
||||
<ion-icon name="musical-note"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3">
|
||||
<ion-icon name="today"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
<ion-tab-button tab="3">
|
||||
<ion-icon name="today"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- Icons on top of text -->
|
||||
<ion-tab-bar color="secondary" selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Location</ion-label>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<!-- Icons on top of text -->
|
||||
<ion-tab-bar color="secondary" selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Location</ion-label>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
<ion-badge color="danger">44</ion-badge>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2">
|
||||
<ion-badge color="danger">44</ion-badge>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Radio</ion-label>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Radio</ion-label>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- Icons below text -->
|
||||
<ion-tab-bar color="dark" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-bottom">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<!-- Icons below text -->
|
||||
<ion-tab-bar color="dark" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-bottom">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
<ion-badge>16</ion-badge>
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2">
|
||||
<ion-badge>16</ion-badge>
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3" layout="icon-bottom">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
<ion-tab-button tab="3" layout="icon-bottom">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- Icons right of text -->
|
||||
<ion-tab-bar color="danger" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-end">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<!-- Icons right of text -->
|
||||
<ion-tab-bar color="danger" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-end">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2" layout="icon-end">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-badge color="dark">33</ion-badge>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2" layout="icon-end">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-badge color="dark">33</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3" layout="icon-end">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3" layout="icon-end">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- Icons left of text -->
|
||||
<ion-tab-bar color="light" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-start">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-badge color="danger">12</ion-badge>
|
||||
</ion-tab-button>
|
||||
<!-- Icons left of text -->
|
||||
<ion-tab-bar color="light" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-start">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-badge color="danger">12</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2" layout="icon-start">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2" layout="icon-start">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3" layout="icon-start">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3" layout="icon-start">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- No icons -->
|
||||
<ion-tab-bar color="primary" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-hide">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<!-- No icons -->
|
||||
<ion-tab-bar color="primary" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-hide">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2" layout="icon-hide">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2" layout="icon-hide">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3" layout="icon-hide">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
<ion-badge color="danger">2</ion-badge>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
<ion-tab-button tab="3" layout="icon-hide">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
<ion-badge color="danger">2</ion-badge>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #f6f6f6;
|
||||
ion-content {
|
||||
--background: #f6f6f6;
|
||||
}
|
||||
|
||||
ion-tab-bar {
|
||||
|
|
|
|||
|
|
@ -4,223 +4,229 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tab Bar - Scenarios</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">
|
||||
<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">
|
||||
<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> <link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
|
||||
<link rel="stylesheet" href="../../../../../scripts/testing/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Default -->
|
||||
<ion-tab-bar selected-tab="1">
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<!-- Default -->
|
||||
<ion-tab-bar selected-tab="1">
|
||||
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Recents</ion-label>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Recents</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-badge>6</ion-badge>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-badge>6</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Settings</ion-label>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Settings</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- Icons -->
|
||||
<ion-tab-bar color="primary" selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<!-- Icons -->
|
||||
<ion-tab-bar color="primary" selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2" selected-tab="1">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2" selected-tab="1">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3">
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
<ion-tab-button tab="3">
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
|
||||
<!-- Icons on top of text -->
|
||||
<ion-tab-bar color="secondary" selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Location</ion-label>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<!-- Icons on top of text -->
|
||||
<ion-tab-bar color="secondary" selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Location</ion-label>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
<ion-badge>6</ion-badge>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2">
|
||||
<ion-badge>6</ion-badge>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Radio</ion-label>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Radio</ion-label>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- Icons below text -->
|
||||
<ion-tab-bar color="dark" selected-tab="1">
|
||||
<!-- Icons below text -->
|
||||
<ion-tab-bar color="dark" selected-tab="1">
|
||||
|
||||
<ion-tab-button tab="1" layout="icon-bottom">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="1" layout="icon-bottom">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
<ion-badge>6</ion-badge>
|
||||
<ion-label>hi</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2">
|
||||
<ion-badge>6</ion-badge>
|
||||
<ion-label>hi</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3" layout="icon-bottom">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3" layout="icon-bottom">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- Icons right of text -->
|
||||
<ion-tab-bar color="danger" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-end">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<!-- Icons right of text -->
|
||||
<ion-tab-bar color="danger" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-end">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2" layout="icon-end">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-badge>6</ion-badge>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2" layout="icon-end">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-badge>6</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3" layout="icon-end">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3" layout="icon-end">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- Icons left of text -->
|
||||
<ion-tab-bar color="light" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-start">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<!-- Icons left of text -->
|
||||
<ion-tab-bar color="light" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-start">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2" layout="icon-start">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-badge color="danger">6</ion-badge>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2" layout="icon-start">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-badge color="danger">6</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3" layout="icon-start">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3" layout="icon-start">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- No icons -->
|
||||
<ion-tab-bar color="primary" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-hide">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<!-- No icons -->
|
||||
<ion-tab-bar color="primary" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="icon-hide">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2" layout="icon-hide">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-badge color="danger">6</ion-badge>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2" layout="icon-hide">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-badge color="danger">6</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3" layout="icon-hide">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
<ion-tab-button tab="3" layout="icon-hide">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- No label -->
|
||||
<ion-tab-bar color="secondary" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="label-hide">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
<ion-badge>6</ion-badge>
|
||||
</ion-tab-button>
|
||||
<!-- No label -->
|
||||
<ion-tab-bar color="secondary" selected-tab="1">
|
||||
<ion-tab-button tab="1" layout="label-hide">
|
||||
<ion-label>Recents</ion-label>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
<ion-badge>6</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2" layout="label-hide">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-badge color="danger">6</ion-badge>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2" layout="label-hide">
|
||||
<ion-label>Favorites</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-badge color="danger">6</ion-badge>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3" layout="label-hide">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
<ion-tab-button tab="3" layout="label-hide">
|
||||
<ion-label>Settings</ion-label>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
|
||||
|
||||
<!-- No overflow text -->
|
||||
<ion-tab-bar color="danger" selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Indiana Jones and the Raiders of the Lost Ark</ion-label>
|
||||
</ion-tab-button>
|
||||
<!-- No overflow text -->
|
||||
<ion-tab-bar color="danger" selected-tab="1">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Indiana Jones and the Raiders of the Lost Ark</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
<ion-label>Indiana Jones and the Temple of Doom</ion-label>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2">
|
||||
<ion-label>Indiana Jones and the Temple of Doom</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Indiana Jones and the Last Crusade</ion-label>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Indiana Jones and the Last Crusade</ion-label>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
|
||||
<!-- Custom Tab Bar -->
|
||||
<ion-tab-bar selected-tab="1" class="custom-tabbar">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Location</ion-label>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<!-- Custom Tab Bar -->
|
||||
<ion-tab-bar selected-tab="1" class="custom-tabbar">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Location</ion-label>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2" class="main-tab">
|
||||
<ion-icon class="main-tab-icon" src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2" class="main-tab">
|
||||
<ion-icon class="main-tab-icon" src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Radio</ion-label>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Radio</ion-label>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
</ion-tab-bar>
|
||||
|
||||
<!-- Custom Tab Bar Colors -->
|
||||
<ion-tab-bar selected-tab="1" class="custom-tabbar-color">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Location</ion-label>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<!-- Custom Tab Bar Colors -->
|
||||
<ion-tab-bar selected-tab="1" class="custom-tabbar-color">
|
||||
<ion-tab-button tab="1">
|
||||
<ion-label>Location</ion-label>
|
||||
<ion-icon name="navigate-circle"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="2">
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="2">
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Radio</ion-label>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
</ion-tab-button>
|
||||
<ion-tab-button tab="3">
|
||||
<ion-label>Radio</ion-label>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
</ion-tab-button>
|
||||
|
||||
</ion-tab-bar>
|
||||
</ion-tab-bar>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
.custom-tabbar {
|
||||
|
|
@ -251,6 +257,7 @@
|
|||
--color: rgba(255, 255, 255, .7);
|
||||
--color-selected: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -175,17 +175,19 @@ export const TabButtonExample: React.FC = () => (
|
|||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ---------------------- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the tab button |
|
||||
| `--background-focused` | Background of the tab button when focused with the tab key |
|
||||
| `--color` | Color of the tab button |
|
||||
| `--color-selected` | Color of the selected tab button |
|
||||
| `--padding-bottom` | Bottom padding of the tab button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button |
|
||||
| `--padding-top` | Top padding of the tab button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| Name | Description |
|
||||
| ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the tab button |
|
||||
| `--background-focused` | Background of the tab button when focused with the tab key |
|
||||
| `--background-focused-opacity` | Opacity of the tab button background when focused with the tab key |
|
||||
| `--color` | Color of the tab button |
|
||||
| `--color-focused` | Color of the tab button when focused with the tab key |
|
||||
| `--color-selected` | Color of the selected tab button |
|
||||
| `--padding-bottom` | Bottom padding of the tab button |
|
||||
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button |
|
||||
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button |
|
||||
| `--padding-top` | Top padding of the tab button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@ $tab-button-ios-max-width: 240px !default;
|
|||
$tab-button-ios-text-color: $tabbar-ios-color !default;
|
||||
|
||||
/// @prop - Text color of the active tab button
|
||||
$tab-button-ios-text-color-active: $tabbar-ios-color-activated !default;
|
||||
$tab-button-ios-text-color-active: $tabbar-ios-color-selected !default;
|
||||
|
||||
/// @prop - Icon color of the inactive tab button
|
||||
$tab-button-ios-icon-color: $tabbar-ios-color !default;
|
||||
|
||||
/// @prop - Icon color of the active tab button
|
||||
$tab-button-ios-icon-color-active: $tabbar-ios-color-activated !default;
|
||||
$tab-button-ios-icon-color-active: $tabbar-ios-color-selected !default;
|
||||
|
||||
/// @prop - Font size of the tab button text
|
||||
$tab-button-ios-font-size: 10px !default;
|
||||
|
|
|
|||
|
|
@ -28,13 +28,13 @@ $tab-button-md-font-weight: normal !default;
|
|||
$tab-button-md-text-color: $tabbar-md-color !default;
|
||||
|
||||
/// @prop - Text color of the active tab button
|
||||
$tab-button-md-text-color-active: $tabbar-md-color-activated !default;
|
||||
$tab-button-md-text-color-active: $tabbar-md-color-selected !default;
|
||||
|
||||
/// @prop - Icon color of the inactive tab button
|
||||
$tab-button-md-icon-color: $tabbar-md-color !default;
|
||||
|
||||
/// @prop - Icon color of the active tab button
|
||||
$tab-button-md-icon-color-active: $tabbar-md-color-activated !default;
|
||||
$tab-button-md-icon-color-active: $tabbar-md-color-selected !default;
|
||||
|
||||
/// @prop - Margin top on the tab button icon
|
||||
$tab-button-md-icon-margin-top: 16px !default;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@
|
|||
/**
|
||||
* @prop --background: Background of the tab button
|
||||
* @prop --background-focused: Background of the tab button when focused with the tab key
|
||||
* @prop --background-focused-opacity: Opacity of the tab button background when focused with the tab key
|
||||
*
|
||||
* @prop --color: Color of the tab button
|
||||
* @prop --color-focused: Color of the tab button when focused with the tab key
|
||||
* @prop --color-selected: Color of the selected tab button
|
||||
*
|
||||
* @prop --padding-top: Top padding of the tab button
|
||||
|
|
@ -16,6 +18,7 @@
|
|||
* @prop --ripple-color: Color of the button ripple effect
|
||||
*/
|
||||
--ripple-color: var(--color-selected);
|
||||
--background-focused-opacity: 1;
|
||||
|
||||
flex: 1;
|
||||
|
||||
|
|
@ -34,7 +37,8 @@
|
|||
// Tab Button: Native
|
||||
// --------------------------------------------------
|
||||
|
||||
a {
|
||||
.button-native {
|
||||
@include border-radius(inherit);
|
||||
@include margin(0);
|
||||
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
@include text-inherit();
|
||||
|
|
@ -63,8 +67,35 @@ a {
|
|||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
:host(.ion-focused) {
|
||||
background: var(--background-focused);
|
||||
.button-native::after {
|
||||
@include button-state();
|
||||
}
|
||||
|
||||
.button-inner {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex-flow: inherit;
|
||||
align-items: inherit;
|
||||
justify-content: inherit;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Tab Button: States
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-focused) .button-native {
|
||||
color: var(--color-focused);
|
||||
|
||||
&::after {
|
||||
background: var(--background-focused);
|
||||
|
||||
opacity: var(--background-focused-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
|
|
@ -73,10 +104,6 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Tab Button: States
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.tab-selected) {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue