diff --git a/core/api.txt b/core/api.txt index 4527f01d24..f69b082ad6 100644 --- a/core/api.txt +++ b/core/api.txt @@ -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 diff --git a/core/src/components.d.ts b/core/src/components.d.ts index ccf4016619..e7ce3f3d40 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -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 { /** diff --git a/core/src/components/segment-content/segment-content.scss b/core/src/components/segment-content/segment-content.scss index 00ca64f304..6a1818a8b7 100644 --- a/core/src/components/segment-content/segment-content.scss +++ b/core/src/components/segment-content/segment-content.scss @@ -8,3 +8,7 @@ width: 100%; } + +:host(.segment-content-disabled) { + display: none; +} diff --git a/core/src/components/segment-content/segment-content.tsx b/core/src/components/segment-content/segment-content.tsx index 2b5fefebff..4566e8ff80 100644 --- a/core/src/components/segment-content/segment-content.tsx +++ b/core/src/components/segment-content/segment-content.tsx @@ -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 ( - + ); diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index f8c28b1d93..9d393aee59 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -2006,13 +2006,14 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {} @ProxyCmp({ + inputs: ['disabled'] }) @Component({ selector: 'ion-segment-content', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [], + inputs: ['disabled'], }) export class IonSegmentContent { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index a034d9820e..27242c007b 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -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: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [], + inputs: ['disabled'], standalone: true }) export class IonSegmentContent { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index a681099325..b433be92fe 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -755,7 +755,9 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-segment-content', defineIonSegmentContent); +export const IonSegmentContent = /*@__PURE__*/ defineContainer('ion-segment-content', defineIonSegmentContent, [ + 'disabled' +]); export const IonSegmentView = /*@__PURE__*/ defineContainer('ion-segment-view', defineIonSegmentView, [