feat(segment-content): add disabled prop and hide the content

This commit is contained in:
Brandy Carney
2024-09-23 18:42:46 -04:00
parent d8f27d8f7b
commit faa7065a70
7 changed files with 34 additions and 6 deletions

View File

@ -1608,6 +1608,7 @@ ion-segment-button,part,indicator-background
ion-segment-button,part,native
ion-segment-content,shadow
ion-segment-content,prop,disabled,boolean,false,false,false
ion-segment-view,shadow
ion-segment-view,prop,disabled,boolean,false,false,false

View File

@ -2717,6 +2717,10 @@ export namespace Components {
"value": SegmentValue;
}
interface IonSegmentContent {
/**
* If `true`, the segment content will not be displayed.
*/
"disabled": boolean;
}
interface IonSegmentView {
/**
@ -7505,6 +7509,10 @@ declare namespace LocalJSX {
"value"?: SegmentValue;
}
interface IonSegmentContent {
/**
* If `true`, the segment content will not be displayed.
*/
"disabled"?: boolean;
}
interface IonSegmentView {
/**

View File

@ -8,3 +8,7 @@
width: 100%;
}
:host(.segment-content-disabled) {
display: none;
}

View File

@ -1,5 +1,5 @@
import type { ComponentInterface } from '@stencil/core';
import { Component, Host, h } from '@stencil/core';
import { Component, Host, Prop, h } from '@stencil/core';
@Component({
tag: 'ion-segment-content',
@ -7,9 +7,20 @@ import { Component, Host, h } from '@stencil/core';
shadow: true,
})
export class SegmentContent implements ComponentInterface {
/**
* If `true`, the segment content will not be displayed.
*/
@Prop() disabled = false;
render() {
const { disabled } = this;
return (
<Host>
<Host
class={{
'segment-content-disabled': disabled,
}}
>
<slot></slot>
</Host>
);

View File

@ -2006,13 +2006,14 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
@ProxyCmp({
inputs: ['disabled']
})
@Component({
selector: 'ion-segment-content',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: [],
inputs: ['disabled'],
})
export class IonSegmentContent {
protected el: HTMLElement;

View File

@ -1841,14 +1841,15 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
@ProxyCmp({
defineCustomElementFn: defineIonSegmentContent
defineCustomElementFn: defineIonSegmentContent,
inputs: ['disabled']
})
@Component({
selector: 'ion-segment-content',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: [],
inputs: ['disabled'],
standalone: true
})
export class IonSegmentContent {

View File

@ -755,7 +755,9 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
'value', 'ion-change');
export const IonSegmentContent = /*@__PURE__*/ defineContainer<JSX.IonSegmentContent>('ion-segment-content', defineIonSegmentContent);
export const IonSegmentContent = /*@__PURE__*/ defineContainer<JSX.IonSegmentContent>('ion-segment-content', defineIonSegmentContent, [
'disabled'
]);
export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [