amsik / Liquor Tree
Licence: mit
Tree component based on Vue.js
Stars: ✭ 348
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Liquor Tree
Vuejs Tree
A highly customizable and blazing fast Vue tree component ⚡🌲
Stars: ✭ 211 (-39.37%)
Mutual labels: tree, component, treeview
Ngx Treeview
An Angular treeview component with checkbox
Stars: ✭ 312 (-10.34%)
Mutual labels: tree, component, treeview
vue-virtualised
Blazing fast scrolling and updating for any amount of list and hierarchical data.
Stars: ✭ 18 (-94.83%)
Mutual labels: tree, vue-components, treeview
android-thinkmap-treeview
Tree View; Mind map; Think map; tree map; custom view; 自定义;关系图;树状图;思维导图;组织机构图;层次图
Stars: ✭ 314 (-9.77%)
Mutual labels: tree, treeview
React Virtualized Tree
A virtualized tree view component making use of react
Stars: ✭ 328 (-5.75%)
Mutual labels: tree, component
vuejs-tree
A highly customizable and blazing fast Vue tree component ⚡🌲
Stars: ✭ 310 (-10.92%)
Mutual labels: tree, treeview
Vue Ui For Pc
基于Vue2.x的一套PC端UI组件,包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (-55.17%)
Mutual labels: tree, vue-components
comment tree
Render comment tree like facebook comment - reply
Stars: ✭ 37 (-89.37%)
Mutual labels: tree, treeview
select2-to-tree
Select2-to-Tree extends Select2 to support arbitrary level of nesting...
Stars: ✭ 71 (-79.6%)
Mutual labels: tree, treeview
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+581.9%)
Mutual labels: tree, vue-components
react-native-nested-listview
A UI component for React Native for representing nested arrays of N levels
Stars: ✭ 163 (-53.16%)
Mutual labels: tree, treeview
Thinkmap
Draw a tree in Android。在 Android 上绘制思维导图控件,让思维更简单。
Stars: ✭ 285 (-18.1%)
Mutual labels: tree, treeview
Vue Treeselect
A multi-select component with nested options support for Vue.js
Stars: ✭ 2,347 (+574.43%)
Mutual labels: tree, component
react-tree
Hierarchical tree component for React in Typescript
Stars: ✭ 174 (-50%)
Mutual labels: tree, treeview
Wmztreeview
类似前端elementUI的树形控件,可自定义节点内容,支持无限极节点,可拖拽增删节点等等,非递归实现
Stars: ✭ 118 (-66.09%)
Mutual labels: tree, treeview
Graphview
Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful for Family Tree, Hierarchy View.
Stars: ✭ 152 (-56.32%)
Mutual labels: tree, treeview
react-treefold
A renderless tree component for your hierarchical React views
Stars: ✭ 37 (-89.37%)
Mutual labels: tree, treeview
Mint Ui
Mobile UI elements for Vue.js
Stars: ✭ 16,471 (+4633.05%)
Mutual labels: component, vue-components
Liquor Tree
A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner.
Features
- drag&drop
- mobile friendly
- events for every action
- flexible configuration
- any number of instances per page
- multi selection
- keyboard navigation
- filtering
- sorting
- integration with Vuex
Installation
Npm:
$ npm install liquor-tree
Yarn:
$ yarn add liquor-tree
Live Playground
To run that demo on your own computer:
- Clone this repository
npm install
npm run build
npm run storybook
- Visit
http://localhost:9001/
There are a lot of examples for you. All sources of stories are located in liquor-tree/docs/storybook/stories
.
Usage
<!-- Vue Component -->
<template>
<tree
:data="items"
:options="options"
ref="tree"
/>
</template>
<script>
import Vue from 'Vue'
import LiquorTree from 'liquor-tree'
Vue.use(LiquorTree)
export default {
...
data() {
return {
items: [
{text: 'Item 1'},
{text: 'Item 2'},
{text: 'Item 3', children: [
{text: 'Item 3.1'},
{text: 'Item 3.2'}
]}
],
options: {
checkbox: true
}
}
}
...
}
</script>
Development
Check out the package.json
s script section. There are 2 scripts:
-
npm run dev
- it will open browser and you can play with code -
npm run build
- it will craete a module file inproduction
mode
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].