diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a5e386fcbb..d299b4cb3f 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2719,6 +2719,10 @@ export namespace Components { interface IonSegmentContent { } interface IonSegmentView { + /** + * If `true`, the segment view cannot be interacted with. + */ + "disabled": boolean; "setContent": (id: string) => Promise; } interface IonSelect { @@ -7498,6 +7502,10 @@ declare namespace LocalJSX { interface IonSegmentContent { } interface IonSegmentView { + /** + * If `true`, the segment view cannot be interacted with. + */ + "disabled"?: boolean; } interface IonSelect { /** diff --git a/core/src/components/segment-view/segment-view.scss b/core/src/components/segment-view/segment-view.scss index b87b646341..2e08f279ab 100644 --- a/core/src/components/segment-view/segment-view.scss +++ b/core/src/components/segment-view/segment-view.scss @@ -20,3 +20,12 @@ :host::-webkit-scrollbar { display: none; } + +:host(.segment-view-disabled) { + scroll-snap-type: none; + + touch-action: none; + overflow-x: hidden; + + opacity: 0.7; +} diff --git a/core/src/components/segment-view/segment-view.tsx b/core/src/components/segment-view/segment-view.tsx index b63b2348d4..ad82264026 100644 --- a/core/src/components/segment-view/segment-view.tsx +++ b/core/src/components/segment-view/segment-view.tsx @@ -1,5 +1,5 @@ import type { ComponentInterface } from '@stencil/core'; -import { Component, Element, Host, Listen, Method, h } from '@stencil/core'; +import { Component, Element, Host, Listen, Method, Prop, h } from '@stencil/core'; @Component({ tag: 'ion-segment-view', @@ -9,6 +9,11 @@ import { Component, Element, Host, Listen, Method, h } from '@stencil/core'; export class SegmentView implements ComponentInterface { @Element() el!: HTMLElement; + /** + * If `true`, the segment view cannot be interacted with. + */ + @Prop() disabled = false; + @Listen('scroll') handleScroll(ev: any) { const { scrollLeft, offsetWidth } = ev.target; @@ -59,8 +64,14 @@ export class SegmentView implements ComponentInterface { } render() { + const { disabled } = this; + return ( - + ); diff --git a/core/src/components/segment-view/test/basic/index.html b/core/src/components/segment-view/test/basic/index.html index 600cbe654c..e34a5e24d7 100644 --- a/core/src/components/segment-view/test/basic/index.html +++ b/core/src/components/segment-view/test/basic/index.html @@ -55,6 +55,25 @@ Free Top + + + + + Bookmarks + + + Reading List + + + Shared Links + + + + + Bookmarks + Reading List + Shared Links + diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 35db39dcf1..f8c28b1d93 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -2027,6 +2027,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent @ProxyCmp({ + inputs: ['disabled'], methods: ['setContent'] }) @Component({ @@ -2034,7 +2035,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [], + inputs: ['disabled'], }) export class IonSegmentView { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 42cfea2f10..a034d9820e 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -1865,6 +1865,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent @ProxyCmp({ defineCustomElementFn: defineIonSegmentView, + inputs: ['disabled'], methods: ['setContent'] }) @Component({ @@ -1872,7 +1873,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [], + inputs: ['disabled'], standalone: true }) export class IonSegmentView { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 07979e8c03..a681099325 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -758,7 +758,9 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-segment-content', defineIonSegmentContent); -export const IonSegmentView = /*@__PURE__*/ defineContainer('ion-segment-view', defineIonSegmentView); +export const IonSegmentView = /*@__PURE__*/ defineContainer('ion-segment-view', defineIonSegmentView, [ + 'disabled' +]); export const IonSelect = /*@__PURE__*/ defineContainer('ion-select', defineIonSelect, [