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

feat(button): add circular shape as round (#29161)

Browse Source 
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Maria Hutt
2024-03-21 11:49:26 -07:00
committed by GitHub
parent 500854d929
commit 44529f0a62
145 changed files with 289 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
import { Component, Element, Event, Host, Prop, Watch, State, h } from '@stencil/core';
import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
import type { Attributes } from '@utils/helpers';
import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
@ -38,6 +38,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
@Element() el!: HTMLElement;
/**
* If `true`, the button only has an icon.
*/
@State() isCircle: boolean = false;
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@ -295,6 +300,18 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
this.ionBlur.emit();
};
private slotChanged = () => {
/**
* Ensures that the 'has-icon-only' class is properly added
* or removed from `ion-button` when manipulating the
* `icon-only` slot.
*
* Without this, the 'has-icon-only' class is only checked
* or added when `ion-button` component first renders.
*/
this.isCircle = this.hasIconOnly;
};
render() {
const mode = getIonMode(this);
const {
@ -374,7 +391,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
{...inheritedAttributes}
>
<span class="button-inner">
<slot name="icon-only"></slot>
<slot name="icon-only" onSlotchange={this.slotChanged}></slot>
<slot name="start"></slot>
<slot></slot>
<slot name="end"></slot>