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): add swipeGesture property to allow for disabling of the swipe gesture (#22087)

Browse Source 
resolves #22048
This commit is contained in:
Takuma Kira
2020-11-14 02:38:23 +09:00
committed by GitHub
parent abad12fbdb
commit 65bc99577c
7 changed files with 52 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/components/segment/readme.md
View File

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

26
core/src/components/segment/segment.tsx
View File

@ -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 {

10
core/src/components/segment/test/basic/index.html
View File

@ -198,6 +198,9 @@
<div class="ion-padding">
<ion-button expand="block" color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
</div>
<div class="ion-padding-horizontal">
<ion-button expand="block" color="tertiary" onClick="toggleSwipeGesture()">Toggle Swipe Gesture</ion-button>
</div>
<script>
var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
@ -229,6 +232,13 @@
}
}
function toggleSwipeGesture() {
const ionSegmentElement = document.querySelectorAll('ion-segment');
for (var i = 0; i < ionSegmentElement.length; i++) {
ionSegmentElement[i].swipeGesture = !ionSegmentElement[i].swipeGesture;
}
}
async function listenForEvent() {
const ionSegmentElement = document.querySelector('ion-segment.event-tester');
ionSegmentElement.addEventListener('ionChange', (event) => {