mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
@ -27,35 +27,35 @@
|
||||
<ion-list>
|
||||
<ion-reorder-group id="reorder">
|
||||
|
||||
<ion-item>
|
||||
<ion-item button onclick="openAlert()">
|
||||
<ion-label>
|
||||
Item 1 (default ion-reorder)
|
||||
</ion-label>
|
||||
<ion-reorder slot="end"></ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-item button onclick="openAlert()">
|
||||
<ion-label>
|
||||
Item 2 (default ion-reorder)
|
||||
</ion-label>
|
||||
<ion-reorder slot="end"></ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-item button onclick="openAlert()">
|
||||
<ion-label>
|
||||
Item 3 (default ion-reorder slot="start")
|
||||
</ion-label>
|
||||
<ion-reorder slot="start"></ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="secondary">
|
||||
<ion-item button color="secondary">
|
||||
<ion-label>
|
||||
Item 4 (default ion-reorder slot="start")
|
||||
</ion-label>
|
||||
<ion-reorder slot="start"></ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-item button onclick="openAlert()">
|
||||
<ion-label>
|
||||
Item 5 (custom ion-reorder)
|
||||
</ion-label>
|
||||
@ -64,7 +64,7 @@
|
||||
</ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-item button onclick="openAlert()">
|
||||
<ion-label>
|
||||
Item 6 (custom ion-reorder)
|
||||
</ion-label>
|
||||
@ -73,7 +73,7 @@
|
||||
</ion-reorder>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-item button onclick="openAlert()">
|
||||
<ion-label>
|
||||
Item 7 (custom ion-reorder slot="start")
|
||||
</ion-label>
|
||||
@ -83,7 +83,7 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-reorder>
|
||||
<ion-item>
|
||||
<ion-item button onclick="openAlert()">
|
||||
<ion-label>
|
||||
Item 8 (the whole item can be dragged)
|
||||
</ion-label>
|
||||
@ -91,7 +91,7 @@
|
||||
</ion-reorder>
|
||||
|
||||
<ion-reorder>
|
||||
<ion-item>
|
||||
<ion-item button onclick="openAlert()">
|
||||
<ion-label>
|
||||
Item 9 (the whole item can be dragged)
|
||||
</ion-label>
|
||||
@ -99,7 +99,7 @@
|
||||
</ion-reorder>
|
||||
|
||||
<ion-reorder>
|
||||
<ion-item>
|
||||
<ion-item button onclick="openAlert()">
|
||||
<ion-label>
|
||||
Item 10 (the whole item can be dragged)
|
||||
</ion-label>
|
||||
@ -113,6 +113,9 @@
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
function openAlert() {
|
||||
alert('click');
|
||||
}
|
||||
function toggleEdit() {
|
||||
const reorderGroup = document.getElementById('reorder');
|
||||
reorderGroup.disabled = !reorderGroup.disabled;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, ComponentInterface } from '@stencil/core';
|
||||
import { Component, ComponentInterface, Listen } from '@stencil/core';
|
||||
|
||||
import { Mode } from '../../interface';
|
||||
|
||||
@ -14,6 +14,12 @@ export class Reorder implements ComponentInterface {
|
||||
|
||||
mode!: Mode;
|
||||
|
||||
@Listen('click', { capture: true })
|
||||
onClick(ev: Event) {
|
||||
ev.preventDefault();
|
||||
ev.stopImmediatePropagation();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<slot>
|
||||
|
||||
Reference in New Issue
Block a user