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

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>