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

fix(segment): update segment content to disabled when button is

Browse Source
This commit is contained in:
Brandy Carney
2024-10-09 18:05:17 -04:00
parent 279300fd3e
commit b94bec20de
3 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/components/segment-button/segment-button.tsx
View File

@ -72,6 +72,27 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
addEventListener(segmentEl, 'ionSelect', this.updateState); addEventListener(segmentEl, 'ionSelect', this.updateState);
addEventListener(segmentEl, 'ionStyle', this.updateStyle); addEventListener(segmentEl, 'ionStyle', this.updateStyle);
} }
// Return if there is no contentId defined
if (!this.contentId) return;
// Attempt to find the Segment Content by its contentId
const segmentContent = document.getElementById(this.contentId) as HTMLIonSegmentContentElement | null;
// If no associated Segment Content exists, log an error and return
if (!segmentContent) {
console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
return;
}
// Ensure the found element is a valid ION-SEGMENT-CONTENT
if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') {
console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
return;
}
// Set the disabled state of the Segment Content based on the button's disabled state
segmentContent.disabled = this.disabled;
} }
disconnectedCallback() { disconnectedCallback() {

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

@ -82,6 +82,8 @@ export class SegmentView implements ComponentInterface {
} }
// Update active content ID and scroll to the segment content // Update active content ID and scroll to the segment content
// TODO this is erroring because all of the segment contents are disabled
// in the last example
this.activeContentId = segmentContent.id; this.activeContentId = segmentContent.id;
this.setContent(segmentContent.id); this.setContent(segmentContent.id);

8
core/src/components/segment-view/test/disabled/index.html
View File

@ -60,7 +60,7 @@
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<ion-segment-view> <ion-segment-view>
<ion-segment-content disabled id="all">All</ion-segment-content> <ion-segment-content id="all">All</ion-segment-content>
<ion-segment-content id="favorites">Favorites</ion-segment-content> <ion-segment-content id="favorites">Favorites</ion-segment-content>
</ion-segment-view> </ion-segment-view>
@ -77,7 +77,7 @@
</ion-segment> </ion-segment>
<ion-segment-view> <ion-segment-view>
<ion-segment-content id="paid">Paid</ion-segment-content> <ion-segment-content id="paid">Paid</ion-segment-content>
<ion-segment-content disabled id="free">Free</ion-segment-content> <ion-segment-content id="free">Free</ion-segment-content>
<ion-segment-content id="top">Top</ion-segment-content> <ion-segment-content id="top">Top</ion-segment-content>
</ion-segment-view> </ion-segment-view>
@ -97,8 +97,8 @@
</ion-segment> </ion-segment>
<ion-segment-view> <ion-segment-view>
<ion-segment-content id="a">a</ion-segment-content> <ion-segment-content id="a">a</ion-segment-content>
<ion-segment-content disabled id="b">b</ion-segment-content> <ion-segment-content id="b">b</ion-segment-content>
<ion-segment-content disabled id="c">c</ion-segment-content> <ion-segment-content id="c">c</ion-segment-content>
<ion-segment-content id="d">d</ion-segment-content> <ion-segment-content id="d">d</ion-segment-content>
</ion-segment-view> </ion-segment-view>