jledentu / Vue Finder
Licence: mit
📁 A Vue.js component to display hierarchical data (like the MacOS X finder)
Stars: ✭ 87
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Finder
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 (+74.71%)
Mutual labels: tree, hierarchy, treeview
Bosket
Collection of tree view components for front-end frameworks. 🌳
Stars: ✭ 457 (+425.29%)
Mutual labels: tree, treeview
Folder Explorer
分析文件目录，统计数据并以树形结构和图表的形式展示结果，也可以导出多种格式留存
Stars: ✭ 479 (+450.57%)
Mutual labels: finder, treeview
Ngx Treeview
An Angular treeview component with checkbox
Stars: ✭ 312 (+258.62%)
Mutual labels: tree, treeview
React Checkbox Tree
A simple and elegant checkbox tree for React.
Stars: ✭ 477 (+448.28%)
Mutual labels: tree, treeview
react-native-nested-listview
A UI component for React Native for representing nested arrays of N levels
Stars: ✭ 163 (+87.36%)
Mutual labels: tree, treeview
React D3 Tree
🌳 React component to create interactive D3 tree graphs
Stars: ✭ 543 (+524.14%)
Mutual labels: tree, hierarchy
Broot
A new way to see and navigate directory trees : https://dystroy.org/broot
Stars: ✭ 6,362 (+7212.64%)
Mutual labels: hacktoberfest, tree
Angular Tree Component
A simple yet powerful tree component for Angular (>=2)
Stars: ✭ 1,031 (+1085.06%)
Mutual labels: tree, treeview
Thinkmap
Draw a tree in Android。在 Android 上绘制思维导图控件，让思维更简单。
Stars: ✭ 285 (+227.59%)
Mutual labels: tree, treeview
select2-to-tree
Select2-to-Tree extends Select2 to support arbitrary level of nesting...
Stars: ✭ 71 (-18.39%)
Mutual labels: tree, treeview
react
Basic Primitives Diagrams for React. Data visualization components library that implements organizational chart and multi-parent dependency diagrams.
Stars: ✭ 15 (-82.76%)
Mutual labels: tree, hierarchy
Bootstraptable Treeview
bootstrapTable extension of treeView
Stars: ✭ 57 (-34.48%)
Mutual labels: tree, treeview
react-treefold
A renderless tree component for your hierarchical React views
Stars: ✭ 37 (-57.47%)
Mutual labels: tree, treeview
Ngx Ui
🚀 Style and Component Library for Angular
Stars: ✭ 534 (+513.79%)
Mutual labels: hacktoberfest, tree
A Vue.js component to display hierarchical data (like the MacOS X finder)
Documentation
The documentation is available on the website.
Getting Started
npm install --save @jledentu/vue-finder
An example of Vue Single File component:
<template>
<Finder :tree="tree" />
</template>
<script>
import { Finder } from "@jledentu/vue-finder";
export default {
components: {
Finder,
},
data() {
return {
tree: {
id: "root",
children: [
{
id: "fruits",
label: "Fruits",
children: [
{
id: "apple",
label: "Apple",
selectable: false,
},
{
id: "banana",
label: "Banana",
},
{
id: "grape",
label: "Grape",
selected: true,
},
{
id: "lemon",
label: "Lemon",
selectable: false,
},
{
id: "orange",
label: "Orange",
selected: true,
},
],
},
{
id: "vegetables",
label: "Vegetables",
children: [
{
id: "bean",
label: "Beans",
},
{
id: "carrot",
label: "Carrot",
selected: true,
},
{
id: "eggplant",
label: "Eggplant",
selectable: false,
},
{
id: "parsnip",
label: "Parsnip",
},
{
id: "tomato",
label: "Tomato",
selectable: false,
},
],
},
],
},
};
},
};
</script>
<style src="@jledentu/vue-finder/dist/vue-finder.css" />
Browser
You can also include the standalone UMD build in your page from the jsdeliver CDN. Make sure to import Vue as a dependency before vue-finder.
<html>
<head>
<!-- Include Vue 2.x -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]^2"></script>
<!-- Include vue-finder & its styles -->
<script src="https://cdn.jsdelivr.net/npm/@jledentu/[email protected]/dist/vue-finder.min.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@jledentu/[email protected]/dist/vue-finder.css"
/>
</head>
<body>
<div id="app">
<finder :tree="tree" />
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
tree: {
id: "root",
children: [
{
id: "fruits",
label: "Fruits",
children: [
{
id: "apple",
label: "Apple",
selectable: false,
},
{
id: "banana",
label: "Banana",
},
{
id: "grape",
label: "Grape",
selected: true,
},
{
id: "lemon",
label: "Lemon",
selectable: false,
},
{
id: "orange",
label: "Orange",
selected: true,
},
],
},
{
id: "vegetables",
label: "Vegetables",
children: [
{
id: "bean",
label: "Beans",
},
{
id: "carrot",
label: "Carrot",
selected: true,
},
{
id: "eggplant",
label: "Eggplant",
selectable: false,
},
{
id: "parsnip",
label: "Parsnip",
},
{
id: "tomato",
label: "Tomato",
selectable: false,
},
],
},
],
},
},
});
</script>
</html>
Changelog
See the GitHub release history.
Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
Development scripts
-
yarn buildto build the library -
yarn testto run the unit tests -
yarn storybookto run the Storybook in watch mode -
yarn docs:devto run the Vuepress documentation in watch mode
Credits
- Lodash for some utility functions
- Vue-treeselect, Vue-data-tables and Vue-multiselect as inspiration for naming and documentation
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].