mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +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-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
|
||||||
|
8
core/src/components.d.ts
vendored
8
core/src/components.d.ts
vendored
@ -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 {
|
||||||
/**
|
/**
|
||||||
|
@ -8,3 +8,7 @@
|
|||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host(.segment-content-disabled) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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, [
|
||||||
|
Reference in New Issue
Block a user