javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 17:42:15 +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

4
angular/src/directives/proxies.ts
View File

@ -462,8 +462,8 @@ export class IonMenu {
}
export declare interface IonMenuButton extends Components.IonMenuButton {
}
@ProxyCmp({ inputs: ["autoHide", "color", "disabled", "menu", "type"] })
@Component({ selector: "ion-menu-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["autoHide", "color", "disabled", "menu", "type"] })
@ProxyCmp({ inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] })
@Component({ selector: "ion-menu-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] })
export class IonMenuButton {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {

15
core/api.txt
View File

@ -120,6 +120,9 @@ ion-back-button,css-prop,--padding-start
ion-back-button,css-prop,--padding-top
ion-back-button,css-prop,--ripple-color
ion-back-button,css-prop,--transition
ion-back-button,part,icon
ion-back-button,part,native
ion-back-button,part,text
ion-backdrop,shadow
ion-backdrop,prop,stopPropagation,boolean,true,false,false
@ -179,6 +182,7 @@ ion-button,css-prop,--padding-start
ion-button,css-prop,--padding-top
ion-button,css-prop,--ripple-color
ion-button,css-prop,--transition
ion-button,part,native
ion-buttons,scoped
ion-buttons,prop,collapse,boolean,false,false,false
@ -197,6 +201,7 @@ ion-card,prop,target,string | undefined,undefined,false,false
ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
ion-card,css-prop,--background
ion-card,css-prop,--color
ion-card,part,native
ion-card-content,none
ion-card-content,prop,mode,"ios" | "md",undefined,false,false
@ -393,6 +398,8 @@ ion-fab-button,css-prop,--padding-start
ion-fab-button,css-prop,--padding-top
ion-fab-button,css-prop,--ripple-color
ion-fab-button,css-prop,--transition
ion-fab-button,part,close-icon
ion-fab-button,part,native
ion-fab-list,shadow
ion-fab-list,prop,activated,boolean,false,false,false
@ -538,6 +545,7 @@ ion-item,css-prop,--padding-top
ion-item,css-prop,--ripple-color
ion-item,css-prop,--transition
ion-item,part,detail-icon
ion-item,part,native
ion-item-divider,shadow
ion-item-divider,prop,color,string | undefined,undefined,false,false
@ -568,6 +576,7 @@ ion-item-option,prop,target,string | undefined,undefined,false,false
ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false
ion-item-option,css-prop,--background
ion-item-option,css-prop,--color
ion-item-option,part,native
ion-item-options,none
ion-item-options,prop,side,"end" | "start",'end',false,false
@ -669,6 +678,7 @@ ion-menu-button,prop,autoHide,boolean,true,false,false
ion-menu-button,prop,color,string | undefined,undefined,false,false
ion-menu-button,prop,disabled,boolean,false,false,false
ion-menu-button,prop,menu,string | undefined,undefined,false,false
ion-menu-button,prop,mode,"ios" | "md",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
@ -683,6 +693,8 @@ ion-menu-button,css-prop,--padding-bottom
ion-menu-button,css-prop,--padding-end
ion-menu-button,css-prop,--padding-start
ion-menu-button,css-prop,--padding-top
ion-menu-button,part,icon
ion-menu-button,part,native
ion-menu-toggle,shadow
ion-menu-toggle,prop,autoHide,boolean,true,false,false
@ -1038,6 +1050,8 @@ ion-segment-button,css-prop,--padding-end
ion-segment-button,css-prop,--padding-start
ion-segment-button,css-prop,--padding-top
ion-segment-button,css-prop,--transition
ion-segment-button,part,indicator
ion-segment-button,part,native
ion-select,shadow
ion-select,prop,cancelText,string,'Cancel',false,false
@ -1175,6 +1189,7 @@ ion-tab-button,css-prop,--padding-end
ion-tab-button,css-prop,--padding-start
ion-tab-button,css-prop,--padding-top
ion-tab-button,css-prop,--ripple-color
ion-tab-button,part,native
ion-tabs,shadow
ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>

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

@ -1277,6 +1277,10 @@ export namespace Components {
* Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle
*/
"menu"?: string;
/**
* The mode determines which platform styles to use.
*/
"mode"?: "ios" | "md";
/**
* The type of the button.
*/
@ -4556,6 +4560,10 @@ declare namespace LocalJSX {
* Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle
*/
"menu"?: string;
/**
* The mode determines which platform styles to use.
*/
"mode"?: "ios" | "md";
/**
* The type of the button.
*/

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 |

3
core/src/components/button/button.tsx
View File

@ -13,6 +13,8 @@ import { createColorClasses, hostContext, 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 native - The native HTML button or anchor element that wraps all child elements.
*/
@Component({
tag: 'ion-button',
@ -222,6 +224,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
<TagType
{...attrs}
class="button-native"
part="native"
disabled={disabled}
onFocus={this.onFocus}
onBlur={this.onBlur}

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

@ -318,6 +318,13 @@ export class ButtonExample {
| `"start"` | Content is placed to the left of the button text in LTR, and to the right in RTL. |
## Shadow Parts
| Part | Description |
| ---------- | ----------------------------------------------------------------------- |
| `"native"` | The native HTML button or anchor element that wraps all child elements. |
## CSS Custom Properties
| Name | Description |

3
core/src/components/card/card.tsx
View File

@ -7,6 +7,8 @@ import { createColorClasses, openURL } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @part native - The native HTML button, anchor, or div element that wraps all child elements.
*/
@Component({
tag: 'ion-card',
@ -106,6 +108,7 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
<TagType
{...attrs}
class="card-native"
part="native"
disabled={this.disabled}
onClick={(ev: Event) => openURL(href, ev, routerDirection, routerAnimation)}
>

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

@ -269,6 +269,13 @@ export class CardExample {
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` |
## Shadow Parts
| Part | Description |
| ---------- | ----------------------------------------------------------------------------- |
| `"native"` | The native HTML button, anchor, or div element that wraps all child elements. |
## CSS Custom Properties
| Name | Description |

5
core/src/components/fab-button/fab-button.scss
View File

@ -209,14 +209,11 @@
// --------------------------------------------------
.close-icon {
@include margin(0, auto);
@include position(0, 0, null, 0);
display: flex;
position: absolute;
align-items: center;
justify-content: center;
height: 100%;
transform: scale(.4) rotateZ(-45deg);

8
core/src/components/fab-button/fab-button.tsx
View File

@ -7,6 +7,9 @@ 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 or anchor element that wraps all child elements.
* @part close-icon - The close icon that is displayed when a fab list opens (uses ion-icon).
*/
@Component({
tag: 'ion-fab-button',
@ -157,14 +160,13 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
<TagType
{...attrs}
class="button-native"
part="native"
disabled={disabled}
onFocus={this.onFocus}
onBlur={this.onBlur}
onClick={(ev: Event) => openURL(href, ev, this.routerDirection, this.routerAnimation)}
>
<span class="close-icon">
<ion-icon icon={this.closeIcon} lazy={false}></ion-icon>
</span>
<ion-icon icon={this.closeIcon} part="close-icon" class="close-icon" lazy={false}></ion-icon>
<span class="button-inner">
<slot></slot>
</span>

8
core/src/components/fab-button/readme.md
View File

@ -164,6 +164,14 @@ export class FabButtonExample {
| `ionFocus` | Emitted when the button has focus. | `CustomEvent<void>` |
## Shadow Parts
| Part | Description |
| -------------- | ----------------------------------------------------------------------- |
| `"close-icon"` | The close icon that is displayed when a fab list opens (uses ion-icon). |
| `"native"` | The native HTML button or anchor element that wraps all child elements. |
## CSS Custom Properties
| Name | Description |

22
core/src/components/fab-button/test/standalone/index.html
View File

@ -71,6 +71,22 @@
<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 ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab slot="fixed" horizontal="center" vertical="bottom">
<ion-fab-button class="custom-close"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button>
<ion-icon name="heart"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="square"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="triangle"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<style>
ion-fab-button {
display: inline-block;
@ -104,6 +120,12 @@
--border-style: dashed;
--border-color: red;
}
.custom-close::part(close-icon) {
color: red;
font-size: 44px;
}
</style>
</body>
</html>

1
core/src/components/fab/test/basic/index.html
View File

@ -200,7 +200,6 @@
f:last-of-type {
background: yellow;
}
</style>
</ion-app>
</body>

3
core/src/components/item-option/item-option.tsx
View File

@ -14,6 +14,8 @@ import { createColorClasses } from '../../utils/theme';
* @slot icon-only - Should be used on an icon in an option that has no text.
* @slot bottom - Content is placed below the option text.
* @slot end - Content is placed to the right of the option text in LTR, and to the left in RTL.
*
* @part native - The native HTML button or anchor element that wraps all child elements.
*/
@Component({
tag: 'ion-item-option',
@ -110,6 +112,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
<TagType
{...attrs}
class="button-native"
part="native"
disabled={disabled}
>
<span class="button-inner">

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

@ -34,6 +34,13 @@ action for the item.
| `"top"` | Content is placed above the option text. |
## Shadow Parts
| Part | Description |
| ---------- | ----------------------------------------------------------------------- |
| `"native"` | The native HTML button or anchor element that wraps all child elements. |
## CSS Custom Properties
| Name | Description |

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

@ -12,6 +12,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
* @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.
*
* @part native - The native HTML button, anchor or div element that wraps all child elements.
* @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
*/
@Component({
@ -214,6 +215,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
<TagType
{...attrs}
class="item-native"
part="native"
disabled={disabled}
onClick={(ev: Event) => openURL(href, ev, routerDirection, routerAnimation)}
>

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

@ -1813,8 +1813,9 @@ export class ItemExample {
## Shadow Parts
| Part | Description |
| --------------- | ----------------------------------------------------------------- |
| --------------- | ---------------------------------------------------------------------------- |
| `"detail-icon"` | The chevron icon for the item. Only applies when `detail="true"`. |
| `"native"` | The native HTML button, anchor or div element that wraps all child elements. |
## CSS Custom Properties

9
core/src/components/menu-button/menu-button.tsx
View File

@ -8,6 +8,12 @@ import { menuController } from '../../utils/menu-controller';
import { createColorClasses, hostContext } from '../../utils/theme';
import { updateVisibility } from '../menu-toggle/menu-toggle-util';
/**
* @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 menu button icon (uses ion-icon).
*/
@Component({
tag: 'ion-menu-button',
styleUrls: {
@ -95,11 +101,12 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
{...attrs}
disabled={disabled}
class="button-native"
part="native"
aria-label="menu"
>
<span class="button-inner">
<slot>
<ion-icon icon={menuIcon} mode={mode} lazy={false} aria-hidden="true"></ion-icon>
<ion-icon part="icon" icon={menuIcon} mode={mode} lazy={false} aria-hidden="true"></ion-icon>
</slot>
</span>
{mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}

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

@ -14,9 +14,18 @@ Menu Button is component that automatically creates the icon and functionality t
| `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` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the menu button. | `boolean` | `false` |
| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
## Shadow Parts
| Part | Description |
| ---------- | ------------------------------------------------------------- |
| `"icon"` | The menu button icon (uses ion-icon). |
| `"native"` | The native HTML button element that wraps all child elements. |
## CSS Custom Properties
| Name | Description |

4
core/src/components/reorder/readme.md
View File

@ -316,8 +316,8 @@ export class ReorderExample {
## Shadow Parts
| Part | Description |
| -------- | ------------------------------- |
| `"icon"` | The icon of the reorder handle. |
| -------- | ----------------------------------------------- |
| `"icon"` | The icon of the reorder handle (uses ion-icon). |
## Dependencies

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

@ -3,7 +3,7 @@ import { Component, ComponentInterface, Host, Listen, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
/**
* @part icon - The icon of the reorder handle.
* @part icon - The icon of the reorder handle (uses ion-icon).
*/
@Component({
tag: 'ion-reorder',

8
core/src/components/segment-button/readme.md
View File

@ -794,6 +794,14 @@ export class SegmentButtonExample {
| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` |
## Shadow Parts
| Part | Description |
| ------------- | ------------------------------------------------------------- |
| `"indicator"` | The indicator displayed on the checked segment button. |
| `"native"` | The native HTML button element that wraps all child elements. |
## CSS Custom Properties
| Name | Description |

4
core/src/components/segment-button/segment-button.tsx
View File

@ -9,6 +9,9 @@ let ids = 0;
/**
* @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 indicator - The indicator displayed on the checked segment button.
*/
@Component({
tag: 'ion-segment-button',
@ -103,6 +106,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
type={type}
aria-pressed={checked ? 'true' : 'false'}
class="button-native"
part="native"
disabled={disabled}
>
<span class="button-inner">

7
core/src/components/tab-button/readme.md
View File

@ -232,6 +232,13 @@ export class TabButtonExample {
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
## Shadow Parts
| Part | Description |
| ---------- | ------------------------------------------------------------- |
| `"native"` | The native HTML anchor element that wraps all child elements. |
## CSS Custom Properties
| Name | Description |

4
core/src/components/tab-button/tab-button.tsx
View File

@ -7,6 +7,8 @@ import { AnchorInterface } from '../../utils/element-interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @part native - The native HTML anchor element that wraps all child elements.
*/
@Component({
tag: 'ion-tab-button',
@ -161,7 +163,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
'ion-focusable': true
}}
>
<a {...attrs} tabIndex={-1} class="button-native">
<a {...attrs} tabIndex={-1} class="button-native" part="native">
<span class="button-inner">
<slot></slot>
</span>