javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(segment-view): support disabled

Browse Source
This commit is contained in:
Brandy Carney
2024-09-19 14:12:34 -04:00
parent 44a0855844
commit 678990d77a
7 changed files with 56 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components.d.ts vendored
View File

@ -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<void>;
}
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 {
/**

9
core/src/components/segment-view/segment-view.scss
View File

@ -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;
}

15
core/src/components/segment-view/segment-view.tsx
View File

@ -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 (
<Host>
<Host
class={{
'segment-view-disabled': disabled,
}}
>
<slot></slot>
</Host>
);

19
core/src/components/segment-view/test/basic/index.html
View File

@ -55,6 +55,25 @@
<ion-segment-content id="free">Free</ion-segment-content>
<ion-segment-content id="top">Top</ion-segment-content>
</ion-segment-view>
<ion-toolbar>
<ion-segment disabled color="danger">
<ion-segment-button content-id="bookmarks" value="Bookmarks">
<ion-label>Bookmarks</ion-label>
</ion-segment-button>
<ion-segment-button content-id="reading-list" value="Reading List">
<ion-label>Reading List</ion-label>
</ion-segment-button>
<ion-segment-button content-id="shared-links" value="Shared Links">
<ion-label>Shared Links</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-segment-view disabled>
<ion-segment-content id="bookmarks">Bookmarks</ion-segment-content>
<ion-segment-content id="reading-list">Reading List</ion-segment-content>
<ion-segment-content id="shared-links">Shared Links</ion-segment-content>
</ion-segment-view>
</ion-content>
<ion-footer>

3
packages/angular/src/directives/proxies.ts
View File

@ -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: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: [],
inputs: ['disabled'],
})
export class IonSegmentView {
protected el: HTMLElement;

3
packages/angular/standalone/src/directives/proxies.ts
View File

@ -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: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: [],
inputs: ['disabled'],
standalone: true
})
export class IonSegmentView {

4
packages/vue/src/proxies.ts
View File

@ -758,7 +758,9 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButt
export const IonSegmentContent = /*@__PURE__*/ defineContainer<JSX.IonSegmentContent>('ion-segment-content', defineIonSegmentContent);
export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView);
export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [
'disabled'
]);
export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect, JSX.IonSelect["value"]>('ion-select', defineIonSelect, [