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

feat(all): add shadow parts to missing components (#21436)

Browse Source
This commit is contained in:
Brandy Carney
2020-06-10 09:58:33 -04:00
committed by GitHub
parent df408f91f1
commit 17375d2325
26 changed files with 162 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/back-button/back-button.tsx
View File

@ -8,6 +8,10 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @part native - The native HTML button element that wraps all child elements.
* @part icon - The back button icon (uses ion-icon).
* @part text - The back button text.
*/
@Component({
tag: 'ion-back-button',
@ -132,10 +136,16 @@ export class BackButton implements ComponentInterface, ButtonInterface {
'show-back-button': showBackButton
}}
>
<button type={type} disabled={disabled} class="button-native" aria-label={backButtonText || 'back'}>
<button
type={type}
disabled={disabled}
class="button-native"
part="native"
aria-label={backButtonText || 'back'}
>
<span class="button-inner">
{backButtonIcon && <ion-icon icon={backButtonIcon} aria-hidden="true" lazy={false}></ion-icon>}
{backButtonText && <span aria-hidden="true" class="button-text">{backButtonText}</span>}
{backButtonIcon && <ion-icon part="icon" icon={backButtonIcon} aria-hidden="true" lazy={false}></ion-icon>}
{backButtonText && <span part="text" aria-hidden="true" class="button-text">{backButtonText}</span>}
</span>
{mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
</button>

9
core/src/components/back-button/readme.md
View File

@ -313,6 +313,15 @@ export class BackButtonExample {
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
## Shadow Parts
| Part | Description |
| ---------- | ------------------------------------------------------------- |
| `"icon"` | The back button icon (uses ion-icon). |
| `"native"` | The native HTML button element that wraps all child elements. |
| `"text"` | The back button text. |
## CSS Custom Properties
| Name | Description |