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-button,part,native
ion-segment-content,shadow ion-segment-content,shadow
ion-segment-content,prop,disabled,boolean,false,false,false
ion-segment-view,shadow ion-segment-view,shadow
ion-segment-view,prop,disabled,boolean,false,false,false ion-segment-view,prop,disabled,boolean,false,false,false

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -755,7 +755,9 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
'value', 'ion-change'); '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, [ export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [