mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
feat(segment-content): add disabled prop and hide the content
This commit is contained in:
@ -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
|
||||
|
8
core/src/components.d.ts
vendored
8
core/src/components.d.ts
vendored
@ -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 {
|
||||
/**
|
||||
|
@ -8,3 +8,7 @@
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:host(.segment-content-disabled) {
|
||||
display: none;
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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, [
|
||||
|
Reference in New Issue
Block a user