Sortable List is not a separate component, but just a particular case of using <List> and <ListItem> components.
Here is the full sortable list page example:
...
constructor() {
this.state = {
sorting: false,
items: [1, 2, 3, 4, 5]
};
}
...
...
render() {
return (
<Page>
<Navbar backLink="Back" title="Sortable" sliding>
<NavRight>
<!-- Link to enable/disable sortable -->
<Link toggleSortable="#sortable">{sorting ? 'Done' : 'Open'}</Link>
</NavRight>
</Navbar>
<List
id="sortable"
sortable
onSortableSort={this.onSort}
onSortableOpen={this.onOpen}
onSortableClose={this.onClose}
>
{this.state.items.map((item) => (
<ListItem title={'Item ' + item}></ListItem>
))}
</List>
</Page>
);
}
...
...
onOpen() {
this.setState({
sorting: !this.state.sorting,
...this.state
});
}
onClose() {
this.setState({
sorting: !this.state.sorting,
...this.state
});
}
onSort(event, indexes) {
console.log('sort', indexes);
}
Renders to:
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left sliding">
<a href="#" class="back link toggle-sortable" data-sortable="#sortable">Back</a>
</div>
<div class="center sliding">Sortable</div>
</div>
</div>
<div class="page-content">
<div class="list-block sortable" id="sortable">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Item 3</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Item 4</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Item 5</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
</ul>
</div>
</div>
</div>
Event | Description |
---|---|
onSortableOpen | Event will be triggered when sortable mode is enabled |
onSortableClose | Event will be triggered when sortable mode is disabled |
onSortableSort | Event will be triggered after user release currently sorting element in new position. event.detail will contain object with startIndex and newIndex properties with start/new index numbers of sorted list item |