-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Sortable Vue Component
Sortable is not a separate component, but just a particular case of using <f7-list> and <f7-list-item> components.
Sortable Events
Event | Description |
---|---|
<f7-list> events The following events will be available on <f7-list> when sortable prop set |
|
sortable:enable | Event will be triggered when sortable mode is enabled |
sortable:disable | Event will be triggered when sortable mode is disabled |
sortable:sort | Event will be triggered after user release currently sorting element in new position. event.detail will contain object with from and to properties with start/new index numbers of sorted list item |
Examples
Here is the full sortable list page example:
<template>
<f7-page>
<f7-navbar back-link="Back" title="Sortable" sliding>
<f7-nav-right>
<!-- Link to enable/disable sortable -->
<f7-link @click="sorting = !sorting">{{sorting ? 'Done' : 'Sort'}}</f7-link>
</f7-nav-right>
</f7-navbar>
<!-- Sortable list -->
<f7-list
sortable
:sortable-enabled="sorting"
@sortable:sort="onSort"
@sortable:enable="onEnable"
@sortable:disable="onDisable"
>
<f7-list-item v-for="item in items" :title="'Item ' + item"></f7-list-item>
</f7-list>
</f7-page>
</template>
<script>
export default {
data: function () {
return {
sorting: false,
items: [1, 2, 3, 4, 5]
}
},
methods: {
onEnable: function () {
console.log('sort enabled');
},
onDisable: function () {
console.log('sort disabled');
},
onSort: function (event, indexes) {
console.log('sort', indexes);
},
}
}
</script>