diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 7b5b83aedd..5938d3fb74 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -661,8 +661,8 @@ export class IonSearchbar {
}
export declare interface IonSegment extends Components.IonSegment {
}
-@ProxyCmp({ inputs: ["color", "disabled", "mode", "scrollable", "value"] })
-@Component({ selector: "ion-segment", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "disabled", "mode", "scrollable", "value"] })
+@ProxyCmp({ inputs: ["color", "disabled", "mode", "scrollable", "swipeGesture", "value"] })
+@Component({ selector: "ion-segment", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "disabled", "mode", "scrollable", "swipeGesture", "value"] })
export class IonSegment {
ionChange!: EventEmitter;
protected el: HTMLElement;
diff --git a/core/api.txt b/core/api.txt
index 783f3143a3..19dfb8f108 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1015,6 +1015,7 @@ ion-segment,prop,color,string | undefined,undefined,false,false
ion-segment,prop,disabled,boolean,false,false,false
ion-segment,prop,mode,"ios" | "md",undefined,false,false
ion-segment,prop,scrollable,boolean,false,false,false
+ion-segment,prop,swipeGesture,boolean,true,false,false
ion-segment,prop,value,null | string | undefined,undefined,false,false
ion-segment,event,ionChange,SegmentChangeEventDetail,true
ion-segment,css-prop,--background
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 15fbb4f5a6..655125b8ef 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2064,6 +2064,10 @@ export namespace Components {
* If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
*/
"scrollable": boolean;
+ /**
+ * If `true`, users will be able to swipe between segment buttons to activate them.
+ */
+ "swipeGesture": boolean;
/**
* the value of the segment.
*/
@@ -5374,6 +5378,10 @@ declare namespace LocalJSX {
* If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
*/
"scrollable"?: boolean;
+ /**
+ * If `true`, users will be able to swipe between segment buttons to activate them.
+ */
+ "swipeGesture"?: boolean;
/**
* the value of the segment.
*/
diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md
index bac38f632c..c0db0f3051 100644
--- a/core/src/components/segment/readme.md
+++ b/core/src/components/segment/readme.md
@@ -566,13 +566,14 @@ export default defineComponent({
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ----------- |
-| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
-| `disabled` | `disabled` | If `true`, the user cannot interact with the segment. | `boolean` | `false` |
-| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
-| `scrollable` | `scrollable` | If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons. | `boolean` | `false` |
-| `value` | `value` | the value of the segment. | `null \| string \| undefined` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ----------- |
+| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
+| `disabled` | `disabled` | If `true`, the user cannot interact with the segment. | `boolean` | `false` |
+| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
+| `scrollable` | `scrollable` | If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons. | `boolean` | `false` |
+| `swipeGesture` | `swipe-gesture` | If `true`, users will be able to swipe between segment buttons to activate them. | `boolean` | `true` |
+| `value` | `value` | the value of the segment. | `null \| string \| undefined` | `undefined` |
## Events
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 33e633c051..e482cb6ca6 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -65,6 +65,16 @@ export class Segment implements ComponentInterface {
*/
@Prop() scrollable = false;
+ /**
+ * If `true`, users will be able to swipe between segment buttons to activate them.
+ */
+ @Prop() swipeGesture = true;
+
+ @Watch('swipeGesture')
+ swipeGestureChanged() {
+ this.gestureChanged();
+ }
+
/**
* the value of the segment.
*/
@@ -111,8 +121,8 @@ export class Segment implements ComponentInterface {
}
private gestureChanged() {
- if (this.gesture && !this.scrollable) {
- this.gesture.enable(!this.disabled);
+ if (this.gesture) {
+ this.gesture.enable(!this.scrollable && !this.disabled && this.swipeGesture);
}
}
@@ -137,7 +147,6 @@ export class Segment implements ComponentInterface {
onMove: ev => this.onMove(ev),
onEnd: ev => this.onEnd(ev),
});
- this.gesture.enable(!this.scrollable);
this.gestureChanged();
if (this.disabled) {
@@ -390,9 +399,18 @@ export class Segment implements ComponentInterface {
private onClick = (ev: Event) => {
const current = ev.target as HTMLIonSegmentButtonElement;
const previous = this.checked;
+
+ // If the current element is a segment then that means
+ // the user tried to swipe to a segment button and
+ // click a segment button at the same time so we should
+ // not update the checked segment button
+ if (current.tagName === 'ION-SEGMENT') {
+ return;
+ }
+
this.value = current.value;
- if (this.scrollable) {
+ if (this.scrollable || !this.swipeGesture) {
if (previous) {
this.checkButton(previous, current);
} else {
diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
index 2f69dbaebc..0c61f1a4a0 100644
--- a/core/src/components/segment/test/basic/index.html
+++ b/core/src/components/segment/test/basic/index.html
@@ -198,6 +198,9 @@
Toggle Value
+
+ Toggle Swipe Gesture
+