javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +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

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>