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

feat(button-group): add IonButtonGroup component with styles and events

Browse Source
This commit is contained in:
BenOsodrac
2025-05-06 17:15:37 +01:00
parent 3b643a75d1
commit cbe85730fb
10 changed files with 490 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/angular/src/directives/proxies-list.ts
View File

@ -13,6 +13,7 @@ export const DIRECTIVES = [
d.IonBreadcrumb,
d.IonBreadcrumbs,
d.IonButton,
d.IonButtonGroup,
d.IonButtons,
d.IonCard,
d.IonCardContent,

30
packages/angular/src/directives/proxies.ts
View File

@ -376,6 +376,36 @@ export declare interface IonButton extends Components.IonButton {
}
@ProxyCmp({
inputs: ['color', 'fill', 'mode', 'shape', 'size', 'theme', 'value']
})
@Component({
selector: 'ion-button-group',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['color', 'fill', 'mode', 'shape', 'size', 'theme', 'value'],
})
export class IonButtonGroup {
protected el: HTMLIonButtonGroupElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionChange', 'ionValueChange']);
}
}
export declare interface IonButtonGroup extends Components.IonButtonGroup {
/**
* Emitted when the active button changes.
*/
ionChange: EventEmitter<CustomEvent<{ value: string | number | null; activeIndex: number }>>;
ionValueChange: EventEmitter<CustomEvent<{ value: string | number | null}>>;
}
@ProxyCmp({
inputs: ['collapse', 'mode', 'theme']
})

33
packages/angular/standalone/src/directives/proxies.ts
View File

@ -17,6 +17,7 @@ import { defineCustomElement as defineIonBadge } from '@ionic/core/components/io
import { defineCustomElement as defineIonBreadcrumb } from '@ionic/core/components/ion-breadcrumb.js';
import { defineCustomElement as defineIonBreadcrumbs } from '@ionic/core/components/ion-breadcrumbs.js';
import { defineCustomElement as defineIonButton } from '@ionic/core/components/ion-button.js';
import { defineCustomElement as defineIonButtonGroup } from '@ionic/core/components/ion-button-group.js';
import { defineCustomElement as defineIonButtons } from '@ionic/core/components/ion-buttons.js';
import { defineCustomElement as defineIonCard } from '@ionic/core/components/ion-card.js';
import { defineCustomElement as defineIonCardContent } from '@ionic/core/components/ion-card-content.js';
@ -472,6 +473,38 @@ export declare interface IonButton extends Components.IonButton {
}
@ProxyCmp({
defineCustomElementFn: defineIonButtonGroup,
inputs: ['color', 'fill', 'mode', 'shape', 'size', 'theme', 'value']
})
@Component({
selector: 'ion-button-group',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['color', 'fill', 'mode', 'shape', 'size', 'theme', 'value'],
standalone: true
})
export class IonButtonGroup {
protected el: HTMLIonButtonGroupElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionChange', 'ionValueChange']);
}
}
export declare interface IonButtonGroup extends Components.IonButtonGroup {
/**
* Emitted when the active button changes.
*/
ionChange: EventEmitter<CustomEvent<{ value: string | number | null; activeIndex: number }>>;
ionValueChange: EventEmitter<CustomEvent<{ value: string | number | null}>>;
}
@ProxyCmp({
defineCustomElementFn: defineIonButtons,
inputs: ['collapse', 'mode', 'theme']