feat(divider): add new ion-divider component (#30270)

Issue number: internal
---------

## What is the new behavior?
- Introduces a new component, `ion-divider` which has two props,
`spacing` and `inset`.
- Adds e2e tests to both `spacing` and `inset` props

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information
- As discussed with the PO, using this new component inside an
`ion-item` is out of scope , for now.

---------

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Gonçalo M. <goncalo.martins@outsystems.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
This commit is contained in:
Marta Carlos
2025-03-25 09:04:19 +00:00
committed by GitHub
parent 02c9d64ca5
commit c37eaabae9
77 changed files with 483 additions and 0 deletions

View File

@ -25,6 +25,7 @@ export const DIRECTIVES = [
d.IonContent,
d.IonDatetime,
d.IonDatetimeButton,
d.IonDivider,
d.IonFab,
d.IonFabButton,
d.IonFabList,

View File

@ -703,6 +703,28 @@ export class IonDatetimeButton {
export declare interface IonDatetimeButton extends Components.IonDatetimeButton {}
@ProxyCmp({
inputs: ['inset', 'spacing']
})
@Component({
selector: 'ion-divider',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['inset', 'spacing'],
})
export class IonDivider {
protected el: HTMLIonDividerElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
}
}
export declare interface IonDivider extends Components.IonDivider {}
@ProxyCmp({
inputs: ['activated', 'edge', 'horizontal', 'mode', 'theme', 'vertical'],
methods: ['close']