javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item): add missing ripple color CSS property (#17814)

Browse Source 
Adds missing --ripple-color var to item

fixes #17523
This commit is contained in:
Brandy Carney
2019-03-19 11:14:01 -04:00
committed by GitHub
parent 67a913773b
commit 807820f31b
6 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/api.txt
View File

@@ -509,6 +509,7 @@ ion-item,css-prop,--padding-bottom
ion-item,css-prop,--padding-end
ion-item,css-prop,--padding-start
ion-item,css-prop,--padding-top
ion-item,css-prop,--ripple-color
ion-item,css-prop,--transition
ion-label,scoped

4
core/src/components.d.ts vendored
View File

@@ -1996,7 +1996,7 @@ export namespace Components {
*/
'color'?: Color;
/**
* If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
* If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
*/
'detail'?: boolean;
/**
@@ -2038,7 +2038,7 @@ export namespace Components {
*/
'color'?: Color;
/**
* If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
* If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
*/
'detail'?: boolean;
/**

11
core/src/components/item/item.scss
View File

@@ -31,6 +31,8 @@
* @prop --padding-top: Top padding of the item
* @prop --transition: Transition of the item
*
* @prop --ripple-color: Color of the item ripple effect
*
* @prop --highlight-height: The height of the highlight on the item
* @prop --highlight-color-focused: The color of the highlight on the item when focused
* @prop --highlight-color-valid: The color of the highlight on the item when valid
@@ -55,6 +57,7 @@
--detail-icon-color: initial;
--detail-icon-font-size: 20px;
--detail-icon-opacity: 0.25;
--ripple-color: currentColor;
@include font-smoothing();
@@ -366,3 +369,11 @@ button, a {
::slotted(ion-reorder[slot]) {
@include margin(0, null);
}
// Item Button Ripple effect
// --------------------------------------------------
ion-ripple-effect {
color: var(--ripple-color);
}

2
core/src/components/item/item.tsx
View File

@@ -44,7 +44,7 @@ export class Item implements ComponentInterface {
/**
* If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
* is `ios` and an `href`, `onclick` or `button` property is present.
* is `ios` and an `href` or `button` property is present.
*/
@Prop() detail?: boolean;

7
core/src/components/item/readme.md
View File

@@ -5,7 +5,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an
## Detail Arrows
By default, clickable items will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, add the `detail` attribute to the item.
By default, clickable items will display a right arrow icon on `ios` mode. A clickable item is an item that has an `href` or `button` property set. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, add the `detail` attribute to the item.
<!--
@@ -44,7 +44,7 @@ Items left align text and add an ellipsis when the text is wider than the item.
### Highlight Height
Items containing an input will highlight the input with a different color border when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](/docs/theming/css-variables).
Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](/docs/theming/css-variables).
### Highlight Color
@@ -1365,7 +1365,7 @@ Item Inputs
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------- |
| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. | `boolean \| undefined` | `undefined` |
| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present. | `boolean \| undefined` | `undefined` |
| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. | `string` | `'ios-arrow-forward'` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item. | `boolean` | `false` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
@@ -1414,6 +1414,7 @@ Item Inputs
| `--padding-end` | End padding of the item |
| `--padding-start` | Start padding of the item |
| `--padding-top` | Top padding of the item |
| `--ripple-color` | Color of the item ripple effect |
| `--transition` | Transition of the item |

8
core/src/components/item/test/buttons/index.html
View File

@@ -25,7 +25,7 @@
<ion-label>a[ion-item]</ion-label>
</ion-item>
<ion-item class="activated" href="#" onclick="testClick(event)">
<ion-item class="custom activated" href="#" onclick="testClick(event)">
<ion-label>a[ion-item].activated</ion-label>
</ion-item>
@@ -145,6 +145,12 @@
</ion-app>
<style>
.custom {
--ripple-color: pink;
}
</style>
<script>
const attach = document.getElementById('attachClick');