q-select

一个高性能的移动端下拉选择插件同时支持 js 和 vue

JavaScript

在线体验

下载

npm install @qymh/q-select

cnpm

cnpm install @qymh/q-select

yarn

yarn add @qymh/q-select

下载完后引用

import QSelect from '@qymh/q-select';
import '@qymh/q-select/dist/q-select.css';

new Qselect({});

commonjs

const QSelect = require('@qymh/q-select/dist/q-select.common.js');
require('@qymh/q-select/dist/q-select.css');

new Qselect({});

如果没有引入模块化的打包工具比如webpack rollup等,可以去拷贝仓库中的 js 到自己的项目或者 cdn,也可以直接通过 unpkg 提供的 cdn 进行访问

如下是 unpkg 的 cdn

<script src="https://unpkg.com/@qymh/q-select/dist/q-select.min.js"></script>

同时也需要引入 css

<link rel="stylesheet" href="https://unpkg.com/@qymh/q-select/dist/q-select.css">

沙盒演示

沙盒演示可以配合 options 一起查看食用更佳

沙盒演示中无法触发touchmove事件,点击沙盒右侧网址的右边的新窗口打开,在新窗口中查看演示,在当前页面查看代码

一层非联动
- 沙盒演示
- 图片演示
非联动内联展示异步设置值
- 沙盒演示
- 图片演示
多层非联动实测
- 沙盒演示
- 图片演示
简单联动
- 沙盒演示
- 图片演示
省市区联动实测
- 沙盒演示
- 图片演示

异步加载的难度会大于简单联动,如果不是格外追求加载性能,建议使用非异步联动,如果要使用请参考下面的列子

省市区非联动异步实测
- 沙盒演示
- 图片演示

options

data

解释: 展示的下拉数据值
联动

联动下是一个数组对象结构,对象一共有三个值
- value(必填) 展示的值
- key 标志
- disabled 是否禁用当前数据 (0.4.6新增)
- children 子联动数据
- 你可以自定义其他值

new QSelect({
  data:[
    {
      value: '外部1',
      children: [
        '外部1-内部1',
        {
          key: '1-2',
          value: '外部1-内部2'
        }
      ]
    },
    {
      value: '外部2',
      children: ['外部2-内部1', '外部2-内部2']
    }
  ];
})

这里为了区分联动和非联动的数据格式,第一层数据必须是对象,到子联动数据后,如果不指定 key 值和 children,可以直接用数组

非联动

非联动下是一个数组包含数组的结构,如果需要指定 key 那么值就得是一个对象

对象的数据结构
- value(必填) 展示的值
- key 标志
- disabled 是否禁用当前数据 (0.4.6新增)
- 你可以自定义其他值

new QSelect({
  data: [
    ['1', '2', '3'],
    ['4', '5', '6'],
    [
      { key: '7k', value: '7' },
      { key: '8k', value: '8' },
      { key: '9k', value: '9' }
    ]
  ]
});

注释非联动和联动的区别,联动是数组包含对象,内部子联动通过 children 连接,而非联动是数组包含数组,一个数组就是一层联动

这个值指定后如果需要重新渲染 data,请参考下面的 setData 方法,直接改值是无效的

index

解释默认索引值
数据格式数组包含数字

new QSelect({
  data: [[1, 2, 3]],
  index: [0]
});

如果当前指定的索引值大于当前滚动栏目的最大值,那么索引会重置为当前最大值,也就是滚动到当前栏目的最后一项,同样如果指定的索引个数大于联动栏目的个数多余的会忽略,少的会补全

这个值指定后如果需要重新渲染 index,请参考下面的 setIndex 方法,直接改值是无效的

count

解释一个栏目展示多少数目
数据格式数字因为双数不好看只能是 5 7 9 默认是 7

new QSelect({
  data: [[1, 2, 3]],
  count: 9
});

chunkHeight

解释一个栏目块的高度
数据格式数字默认是 40 也就是 40px 最小 30 最大 100

new QSelect({
  data: [[1, 2, 3]],
  chunkHeight: 50
});

bkIndex

解释背景的 z-index
数据格式数字默认是 500

new QSelect({
  data: [[1, 2, 3]],
  bkIndex: 1000
});

selectIndex

解释选择栏的 z-index
数据格式数字默认是 600

new QSelect({
  data: [[1, 2, 3]],
  selectIndex: 2000
});

这个值别小于 bkIndex 不然背景会挡住下拉选择框

title

解释选择栏的标题
数据格式字符默认是请选择

new QSelect({
  data: [[1, 2, 3]],
  title: '选择下面的内容'
});

confirmBtn

解释选择栏的确认文案
数据格式字符默认是确定

new QSelect({
  data: [[1, 2, 3]],
  confirmBtn: '同意'
});

cancelBtn

解释选择栏的取消文案
数据格式字符默认是取消

new QSelect({
  data: [[1, 2, 3]],
  cancelBtn: '关闭'
});

disableDefaultCancel

解释默认点击选择栏取消会关闭背景蒙层,如果这个值为 true,则点击了关闭也不会关闭
数据格式布尔默认是 false

new QSelect({
  data: [[1, 2, 3]],
  disableDefaultCancel: true
});

这个值指定了为 true,请参考下面的 close 手动关闭选择框

target

解释如果不想让选择栏有背景蒙层,而是内联流式布局放在页面中,这个值要指定挂载元素,比如 id 就是#test,而 class 就是.test
数据格式字符

new QSelect({
  data: [[1, 2, 3]],
  target: '#test'
});

这个值为 true,不会有导航栏也就是不会有取消确认事件

loading

解释这个值为 true 会在选择栏上放一个滚动 loading,且不可点击,在异步加载的时候有用
数据格式布尔默认是 false

new QSelect({
  data: [[1, 2, 3]],
  loading: true
});

这个值指定了为 true,请参考下面的 cancelLoading 手动关闭 loading

ready

解释选择栏挂载准备好的时候触发在手动调用setData setKey setValue setIndex后也会触发
数据格式 function
回调参数
- values 当前选择的值如 [1]
- keys 当前选择的 key 如 ['1k']
- data 完整的 data 值
  - 数组第一项
    - 同 values
  - 数组第二项
    - 同 keys
  - 数组第三项
    - 当前的详情 data
    - 数据格式数组对象
      - value 当前 value
      - key 当前 key
      - index 当前索引
      - 自定义的其它值

new QSelect({
  data: [[1, 2, 3]],
  ready(values, keys, data) {}
});

show

解释选择栏显示的时候触发
数据格式 function
回调参数
- values 当前选择的值如 [1]
- keys 当前选择的 key 如 ['1k']
- data 完整的 data 值
  - 数组第一项
    - 同 values
  - 数组第二项
    - 同 keys
  - 数组第三项
    - 当前的详情 data
    - 数据格式数组对象
      - value 当前 value
      - key 当前 key
      - index 当前索引
      - 自定义的其它值

new QSelect({
  data: [[1, 2, 3]],
  show(values, keys, data) {}
});

hide

解释选择栏隐藏的时候触发
数据格式 function
回调参数
- values 当前选择的值如 [1]
- keys 当前选择的 key 如 ['1k']
- data 完整的 data 值
  - 数组第一项
    - 同 values
  - 数组第二项
    - 同 keys
  - 数组第三项
    - 当前的详情 data
    - 数据格式数组对象
      - value 当前 value
      - key 当前 key
      - index 当前索引
      - 自定义的其它值

new QSelect({
  data: [[1, 2, 3]],
  hide(values, keys, data) {}
});

confirm

解释选择栏导航点击确认触发
数据格式 function
回调参数
- values 当前选择的值如 [1]
- keys 当前选择的 key 如 ['1k']
- data 完整的 data 值
  - 数组第一项
    - 同 values
  - 数组第二项
    - 同 keys
  - 数组第三项
    - 当前的详情 data
    - 数据格式数组对象
      - value 当前 value
      - key 当前 key
      - index 当前索引
      - 自定义的其它值

new QSelect({
  data: [[1, 2, 3]],
  confirm(values, keys, data) {}
});

cancel

解释选择栏导航点击取消触发
数据格式 function
没有回调参数

new QSelect({
  data: [[1, 2, 3]],
  cancel() {}
});

change

解释选择栏数据更改且全部动画结束后触发
数据格式 function
在调用setData setIndex setKey setValue后不会触发change只会触发ready
回调参数
- weight 当前更改的最高权值的栏目索引比如第一栏和第二栏同时滚动这个值就是第一栏的索引 0
- values 当前选择的值如 [1]
- keys 当前选择的 key 如 ['1k']
- data 完整的 data 值
  - 数组第一项
    - 同 values
  - 数组第二项
    - 同 keys
  - 数组第三项
    - 当前的详情 data
    - 数据格式数组对象
      - value 当前 value
      - key 当前 key
      - index 当前索引
      - 自定义的其它值

new QSelect({
  data: [[1, 2, 3]],
  change(weight, values, keys, data) {}
});

实例上的方法

setTitle

解释设置标题
参数
- title 标题

const s1 = new QSelect({
  data: [[1, 2, 3]]
});

setTimeout(() => {
  s1.setTitle('新的标题')
}, 1000);

setData

解释重新渲染选择栏的数据
参数
- data(必填) 同 options 中的 data
- index 同 options 中的 index

const s1 = new QSelect({
  data: [[1, 2, 3]]
});

setTimeout(() => {
  s1.setData([[4, 5, 6]], [2]);
}, 1000);

getData

解释获取当前 data
数据格式
- values 当前选择的值如 [1]
- keys 当前选择的 key 如 ['1k']
- data 完整的 data 值
  - 数组第一项
    - 同 values
  - 数组第二项
    - 同 keys
  - 数组第三项
    - 当前的详情 data
    - 数据格式数组对象
      - value 当前 value
      - key 当前 key
      - index 当前索引
      - 自定义的其它值

const s1 = new QSelect({
  data: [[1, 2, 3]]
});

console.log(s1.getData());

setValue

解释在当前选择栏下设定选择的值,选择栏会自动聚焦到当前值,如果没有这个值,则会聚焦到当前栏目第一项
参数
- value(必填)
  - 数据格式数组直接指定要聚焦到的值如 [1,2,3]

const s1 = new QSelect({
  data: [[1, 2, 3]]
});

setTimeout(() => {
  s1.setValue([3]);
}, 1000);

getValue

解释获取当前 value
数据格式
- values 当前选择的值如 [1]

const s1 = new QSelect({
  data: [[1, 2, 3]]
});

console.log(s1.getValue());

setKey

解释在当前选择栏下设定选择的 key 值,选择栏会自动聚焦到当前值,如果没有这个值,则会聚焦到当前栏目第一项
参数
- key(必填)
  - 数据格式数组直接指定要聚焦到的 key 值如 ['1k','2k','3k']

const s1 = new QSelect({
  data: [[{ value: 1, key: '1k' }, { value: 2, key: '2k' }]]
});

setTimeout(() => {
  s1.setKey(['2k']);
}, 1000);

getKey

解释获取当前 key
数据格式
- keys 当前选择的 key 值如 ['1k']

const s1 = new QSelect({
  data: [[{ value: 1, key: '1k' }, 2, 3]]
});

console.log(s1.getKey());

setIndex

解释在当前选择栏下设定选择的索引值,选择栏会自动聚焦到当前值,如果没有这个值,则会聚焦到当前栏目第一项
参数
- key(必填)
  - 数据格式数组直接指定要聚焦到的索引如 [0,0,0]

const s1 = new QSelect({
  data: [[{ value: 1, key: '1k' }, { value: 2, key: '2k' }]]
});

setTimeout(() => {
  s1.setIndex([0]);
}, 1000);

scrollTo

解释这个是setIndex的子方法,scrollTo 可以指定特定的栏目的特定栏目的索引,而setIndex需要指定当前栏目和当前栏目前的索引
参数
- column(必填) 栏目 Number
- index（必填）栏目索引 Number

const s1 = new QSelect({
  data: [[{ value: 1, key: '1k' }, { value: 2, key: '2k' }]]
});

setTimeout(() => {
  s1.scrollTo(0, 0);
}, 1000);

getIndex

解释获取当前索引
数据格式
- index 当前选择的值如 [0]

const s1 = new QSelect({
  data: [[1, 2, 3]]
});

console.log(s1.getIndex());

setColumnData

解释 setData 是设置所有的 data,而 setColumnData 是设定指定栏目的 data,也就是异步一栏一栏加载 data 的
参数
- column(必填) 栏目索引可以指定多个栏目多个栏目用数组表示比如[1,2] 单栏目就直接是数字比如 1
- data(必填) 当前栏目的值同 options 中非联动下的 data

const s1 = new QSelect({
  data: [[{ value: 1, key: '1k' }, { value: 2, key: '2k' }]]
});

setTimeout(() => {
  s1.setColumnData(1, [[1, 2, 3]]);
}, 1000);

setLoading

解释调出 loading 加载图案

const s1 = new QSelect({
  data: [[{ value: 1, key: '1k' }, { value: 2, key: '2k' }]]
});

s1.setLoading();
setTimeout(() => {
  s1.setData([[1, 2, 3]]);
  s1.cancelLoading();
}, 1000);

cancelLoading

解释关闭 loading 加载图案

const s1 = new QSelect({
  data: [[{ value: 1, key: '1k' }, { value: 2, key: '2k' }]]
});

s1.setLoading();
setTimeout(() => {
  s1.setData([[1, 2, 3]]);
  s1.cancelLoading();
}, 1000);

show

解释手动呼出下拉选择

const s1 = new QSelect({
  data: [[{ value: 1, key: '1k' }, { value: 2, key: '2k' }]]
});

s1.show();
setTimeout(() => {
  s1.setData([[1, 2, 3]]);
  s1.hide();
}, 1000);

close

解释手动关闭下拉选择

const s1 = new QSelect({
  data: [[{ value: 1, key: '1k' }, { value: 2, key: '2k' }]]
});

s1.show();
setTimeout(() => {
  s1.close();
}, 1000);

destroy

解释摧毁下拉选择

const s1 = new QSelect({
  data: [[{ value: 1, key: '1k' }, { value: 2, key: '2k' }]]
});

setTimeout(() => {
  s1.destroy();
}, 1000);

Vue

在线体验

demo 在线体验

下载

npm install @qymh/vue-q-select

cnpm

cnpm install @qymh/vue-q-select

yarn

yarn add @qymh/vue-q-select

下载完后在入口 js 文件中引用

import Vue from 'vue';
import QSelect from '@qymh/vue-q-select';
import '@qymh/vue-q-select/dist/q-select.css';
Vue.use(QSelect);

然后就可以在 vue 文件中使用了

<template>
  <div>
    <q-select></q-select>
  </div>
</template>

你也可以通过Vue.use的options更改注册组件的名字,默认是QSelect

import Vue from 'vue';
import QSelect from '@qymh/vue-q-select';
import '@qymh/vue-q-select/dist/q-select.css';
Vue.use(QSelect, { name: 'QPicker' });

对应的组件就是这样

<template>
  <div>
    <q-picker></q-picker>
  </div>
</template>

沙盒演示

沙盒演示可以配合 props refs events 一起查看食用更佳

沙盒演示中无法触发touchmove事件,点击沙盒右侧网址的右边的新窗口打开,在新窗口中查看演示,在当前页面查看代码

一层非联动
- 沙盒演示
- 图片演示
非联动内联展示异步设置值
- 沙盒演示
- 图片演示
多层非联动实测
- 沙盒演示
- 图片演示
简单联动
- 沙盒演示
- 图片演示
省市区联动实测
- 沙盒演示
- 图片演示

异步加载的难度会大于简单联动,如果不是格外追求加载性能,建议使用非异步联动,如果要使用请参考下面的列子

省市区非联动异步实测
- 沙盒演示
- 图片演示

props

prop	类型	是否必填	默认值	描述	数据格式
v-model	Boolean	true	false	是否显示下拉组件
data	Array	true	[[]]	下拉数据值	同 data
index	Array	false	[0]	索引值	同 index
count	Number	false	7	栏目展示数目	同 count
chunkHeight	Number	false	40	栏目块的高度	同 chunkHeight
bkIndex	Number	false	500	背景的 z-index	同 bkIndex
selectIndex	Number	false	600	选择栏的 z-index	同 selectIndex
title	String	false	请选择	选择栏的标题	同 title
confirmBtn	String	false	确定	选择栏的确认文案	同 confirmBtn
cancelBtn	String	fales	取消	选择栏的取消文案	同 cancelBtn
disableDefaultCancel	Boolean	false	false	禁止默认取消事件	同 disableDefaultCancel
target	String	false	''	内联挂载元素	同 target
loading	Boolean	false	false	是否启用加载图	同 loading
deep	Boolean	false	false		是否深度观察 data
defaultKey	Array	false	[]	默认选中的 key 值	同 ref 中的设置 defaultKey
defaultValue	Array	false	[]	默认选中的 value 值	同 ref 中的设置 defaultValue

注意事项

vue 下q-select的使用和在 js 下不同,我们运用了vue响应式的优势,去掉了在原生 js 中的setIndex show close setLoading cancelLoading 方法

设置 data

直接通过改变 props 下 data 将会重新渲染 data,不过考虑到性能优化,这里的 data 并不是深度观察的,如果需要深度观察,可以将deep属性设置为 true,也可以使用this.$refs.select.setData进行原生设置
设置 index

直接通过改变 props 下 index 将会设置 index
设置是否显示

通过改变 v-model 的布尔值改变显示与否
设置是否有 loading

通过改变 props 下 loading 的布尔值将会设置是否显示 loading
设置默认 defaultKey 默认 defaultValue

通过改变 props 下 defaultKey defaultValue 进行设置,这里要注意的是设置默认值得前提条件是 data 必须的初始化完成,不然无法设置默认值,换句话来说,如果 data 是异步获取的,那么设置默认值得放在 data 成功异步获取之后
设置 title

通过改变props下title的值直接改变title的值

refs

� 以下方法通过在组件上绑定 ref 通过 this.$refs.select调用

<template>
  <q-select ref="select"></q-select>
</template>

setData
- 解释重新渲染选择栏的数据
- 参数
  - data(必填) 同 options 中的 data
  - index 同 options 中的 index

this.$refs.select.setData([[4, 5, 6], [2]]);

setValue
- 解释在当前选择栏下设定选择的值,选择栏会自动聚焦到当前值,如果没有这个值,则会聚焦到当前栏目第一项
- 也可以直接改变 props 下的 defaultValue
- 参数
  - value(必填)
    - 数据格式数组直接指定要聚焦到的值如 [1,2,3]

this.$refs.select.setValue([3]);

setKey
- 解释在当前选择栏下设定选择的 key 值,选择栏会自动聚焦到当前值,如果没有这个值,则会聚焦到当前栏目第一项
- 也可以直接改变 props 下的 defaultKey
- 参数
- key(必填)
  - 数据格式数组直接指定要聚焦到的 key 值如 ['1k','2k','3k']

this.$refs.select.setKey(['2k']);

scrollTo
- 解释这个是setIndex的子方法,scrollTo 可以指定特定的栏目的特定栏目的索引,而setIndex需要指定当前栏目和当前栏目前的索引
- 参数
  - column(必填) 栏目 Number
  - index（必填）栏目索引 Number

this.$refs.select.scrollTo(0, 0);

setColumnData
- 解释 setData 是设置所有的 data,而 setColumnData 是设定指定栏目的 data,也就是异步一栏一栏加载 data 的
- 参数
  - column(必填) 栏目索引可以指定多个栏目多个栏目用数组表示比如[1,2] 单栏目就直接是数字比如 1
  - data(必填) 当前栏目的值同 options 中非联动下的 data

this.$refs.select.setColumnData(1, [[1, 2, 3]]);

getData
- 解释获取当前 data
- 数据格式
  - values 当前选择的值如 [1]
  - keys 当前选择的 key 如 ['1k']
  - data 完整的 data 值
    - 数组第一项
      - 同 values
    - 数组第二项
      - 同 keys
    - 数组第三项
      - 当前的详情 data
      - 数据格式数组对象
        
        value 当前 value
        
        key 当前 key
        
        index 当前索引
        
        自定义的其它值

this.$refs.select.getData();

getValue
- 解释获取当前 value
- 数据格式
  - values 当前选择的值如 [1]

this.$refs.select.getValue();

getKey
- 解释获取当前 key
- 数据格式
  - keys 当前选择的 key 值如 ['1k']

this.$refs.select.getKey();

getIndex
- 解释获取当前索引
- 数据格式
  - index 当前选择的索引如 [0]

this.$refs.select.getIndex();

destroy
- 解释摧毁下拉选择

this.$refs.select.destroy();

events

ready
- 解释选择栏挂载准备好的时候触发在手动调用setData setKey setValue setIndex后也会触发
- 数据格式 function
- 回调参数
  - values 当前选择的值如 [1]
  - keys 当前选择的 key 如 ['1k']
  - data 完整的 data 值
    - 数组第一项
      - 同 values
    - 数组第二项
      - 同 keys
    - 数组第三项
      - 当前的详情 data
      - 数据格式数组对象
        
        value 当前 value
        
        key 当前 key
        
        index 当前索引
        
        自定义的其它值

<template>
  <q-select @ready="doReady"></q-select>
</template>

<script>
export default {
  methods: {
    doReady(values, keys, data) {}
  }
};
</script>

show
- 解释选择栏显示的时候触发
- 数据格式 function
- 回调参数
  - values 当前选择的值如 [1]
  - keys 当前选择的 key 如 ['1k']
  - data 完整的 data 值
    - 数组第一项
      - 同 values
    - 数组第二项
      - 同 keys
    - 数组第三项
      - 当前的详情 data
      - 数据格式数组对象
        
        value 当前 value
        
        key 当前 key
        
        index 当前索引
        
        自定义的其它值

<template>
  <q-select @show="doShow"></q-select>
</template>

<script>
export default {
  methods: {
    doShow(values, keys, data) {}
  }
};
</script>

hide
- 解释选择栏隐藏的时候触发
- 数据格式 function
- 回调参数
  - values 当前选择的值如 [1]
  - keys 当前选择的 key 如 ['1k']
  - data 完整的 data 值
    - 数组第一项
      - 同 values
    - 数组第二项
      - 同 keys
    - 数组第三项
      - 当前的详情 data
      - 数据格式数组对象
        
        value 当前 value
        
        key 当前 key
        
        index 当前索引
        
        自定义的其它值

<template>
  <q-select @hide="doHide"></q-select>
</template>

<script>
export default {
  methods: {
    doHide(values, keys, data) {}
  }
};
</script>

confirm
- 解释选择栏导航点击确认的时候触发
- 数据格式 function
- 回调参数
  - values 当前选择的值如 [1]
  - keys 当前选择的 key 如 ['1k']
  - data 完整的 data 值
    - 数组第一项
      - 同 values
    - 数组第二项
      - 同 keys
    - 数组第三项
      - 当前的详情 data
      - 数据格式数组对象
        
        value 当前 value
        
        key 当前 key
        
        index 当前索引
        
        自定义的其它值

<template>
  <q-select @confirm="doConfirm"></q-select>
</template>

<script>
export default {
  methods: {
    doConfirm(values, keys, data) {}
  }
};
</script>

cancel
- 解释选择栏导航点击取消触发
- 数据格式 function
- 没有回调参数

<template>
  <q-select @cancel="doCancel"></q-select>
</template>

<script>
export default {
  methods: {
    doCancel(values, keys, data) {}
  }
};
</script>

change
- 解释选择栏数据更改且全部动画结束后触发
- 数据格式 function
- 在调用setData setIndex setKey setValue后不会触发change只会触发readt
- 回调参数
  - weight 当前更改的最高权值的栏目索引比如第一栏和第二栏同时滚动这个值就是第一栏的索引 0
  - values 当前选择的值如 [1]
  - keys 当前选择的 key 如 ['1k']
  - data 完整的 data 值
    - 数组第一项
      - 同 values
    - 数组第二项
      - 同 keys
    - 数组第三项
      - 当前的详情 data
      - 数据格式数组对象
        
        value 当前 value
        
        key 当前 key
        
        index 当前索引
        
        自定义的其它值

<template>
  <q-select @change="doChange"></q-select>
</template>

<script>
export default {
  methods: {
    doChange(values, keys, data) {}
  }
};
</script>

项目即将支持

[*] 沙盒演示
[] 单元测试

项目延后支持

[] React 组件化

bangkk / q-select Goto Github PK

q-select's Introduction

q-select

JavaScript

在线体验

下载

沙盒演示

options

data

index

count

chunkHeight

bkIndex

selectIndex

title

confirmBtn

cancelBtn

disableDefaultCancel

target

loading

ready

show

hide

confirm

cancel

change

实例上的方法

setTitle

setData

getData

setValue

getValue

setKey

getKey

setIndex

scrollTo

getIndex

setColumnData

setLoading

cancelLoading

show

close

destroy

Vue

在线体验

下载

沙盒演示

props

注意事项

refs

events

项目即将支持

项目延后支持

q-select's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org