javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(item): add parts support for detail-icon (#20979)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-04-27 15:33:54 -04:00
committed by GitHub
parent 3821c0463a
commit 64144960b0
4 changed files with 39 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/api.txt
View File

@ -528,6 +528,7 @@ ion-item,css-prop,--padding-start
ion-item,css-prop,--padding-top ion-item,css-prop,--padding-top
ion-item,css-prop,--ripple-color ion-item,css-prop,--ripple-color
ion-item,css-prop,--transition ion-item,css-prop,--transition
ion-item,part,detail-icon
ion-item-divider,shadow ion-item-divider,shadow
ion-item-divider,prop,color,string | undefined,undefined,false,false ion-item-divider,prop,color,string | undefined,undefined,false,false

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

@ -11,6 +11,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
* @slot - Content is placed between the named slots if provided without a slot. * @slot - Content is placed between the named slots if provided without a slot.
* @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL. * @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL.
* @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL. * @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL.
*
* @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
*/ */
@Component({ @Component({
tag: 'ion-item', tag: 'ion-item',
@ -213,7 +215,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
<slot></slot> <slot></slot>
</div> </div>
<slot name="end"></slot> <slot name="end"></slot>
{showDetail && <ion-icon icon={detailIcon} lazy={false} class="item-detail-icon"></ion-icon>} {showDetail && <ion-icon icon={detailIcon} lazy={false} class="item-detail-icon" part="detail-icon"></ion-icon>}
<div class="item-inner-highlight"></div> <div class="item-inner-highlight"></div>
</div> </div>
{canActivate && mode === 'md' && <ion-ripple-effect></ion-ripple-effect>} {canActivate && mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}

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

@ -1397,6 +1397,13 @@ Item Inputs
| `"start"` | Content is placed to the left of the item text in LTR, and to the right in RTL. | | `"start"` | Content is placed to the left of the item text in LTR, and to the right in RTL. |
## Shadow Parts
| Part | Description |
| --------------- | ----------------------------------------------------------------- |
| `"detail-icon"` | The chevron icon for the item. Only applies when `detail="true"`. |
## CSS Custom Properties ## CSS Custom Properties
| Name | Description | | Name | Description |

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

@ -53,6 +53,13 @@
<ion-label>button[ion-item] danger</ion-label> <ion-label>button[ion-item] danger</ion-label>
</ion-item> </ion-item>
<ion-item button detail class="item-part">
<ion-label>
<h1>button[ion-item] detail</h1>
<h2>Footnote</h2>
</ion-label>
</ion-item>
<ion-item button onclick="testClickOutsize(event)"> <ion-item button onclick="testClickOutsize(event)">
<ion-button slot="start" onclick="testClick(event)">Default</ion-button> <ion-button slot="start" onclick="testClick(event)">Default</ion-button>
<ion-label>Inner Buttons</ion-label> <ion-label>Inner Buttons</ion-label>
@ -159,6 +166,27 @@
--background-hover-opacity: 1; --background-hover-opacity: 1;
--color-hover: purple; --color-hover: purple;
} }
.item-part h1 {
font-size: 18px;
font-weight: 500;
color: #333;
}
.item-part h2 {
font-size: 14px;
color: #888;
}
.item-part::part(detail-icon) {
margin-top: -18px;
color: red;
opacity: 1;
}
</style> </style>
<script> <script>