# tiny-wheels

一套基于原生JavaScript开发的组件库,无依赖、体积小、简单易用

npm npm npm

# 文档

关于各个组件的详细使用方式和效果可以查看本项目的文档:tiny-wheels

# 特点

  • 使用ES6最新语法编写,纯原生JavaScript代码,适合新手阅读
  • 无任何第三方依赖,源码非常精简,可以自由拓展组件功能
  • 基于WebpackBabel的最新版本构建,采用UMD的模块化规范打包,兼容多种引入方式

# 使用

  • 模块化引入(推荐)

npm install tiny-wheels -S

<div class="tabs">
    <div data-tab-name="选项卡1">内容1</div>
    <div data-tab-name="选项卡2">内容2</div>
    <div data-tab-name="选项卡3">内容3</div>
    <div data-tab-name="选项卡4">内容4</div>
</div>
import { Tabs } from 'tiny-wheels'

new Tabs({
    element: document.querySelector('.tabs')
})
  • 标签引入

目前可以通过unpkg.com/tiny-wheels获取到最新版本的资源,在页面上使用script标签引入后即可开始使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
</head>
<body>
    <div class="tabs">
        <div data-tab-name="选项卡1">内容1</div>
        <div data-tab-name="选项卡2">内容2</div>
        <div data-tab-name="选项卡3">内容3</div>
        <div data-tab-name="选项卡4">内容4</div>
    </div>
    <script src="https://unpkg.com/tiny-wheels/dist/index.js"></script>
    <script>
        new TinyWheels.Tabs({
            element: document.querySelector('.tabs')
        })
    </script>
</body>
</html>

由于项目已经暴露了全局变量TinyWheels,所以在浏览器环境可以直接使用,通过标签引入的具体示例可以参考项目根目录下的example.html

组件的HTML结构是固定的,参考文档中的示例使用即可

组件最外层的元素会自动添加tiny-*的类名,你也可以在外层添加自己的容器元素包裹组件,并添加自己的类名,覆盖默认样式

# 开发

此项目为个人项目,非常欢迎大家下载本项目自由开发,如果有优秀的组件提交,我会直接合并进项目中

# 运行

通过如下步骤可以直接运行项目:

  1. git clone https://github.com/csdoker/tiny-wheels.git
  2. npm install
  3. npm run start
  4. open localhost:8000

运行入口为src/main.js文件,该文件中是各个组件的使用代码,可以自由修改测试

# 打包

使用命令:

npm run build

打包入口为src/index.js文件,目前的做法是在各个组件中引入了对应的样式,然后将所有组件导出为一个对象

# 文档

本项目文档使用vuepress进行构建,在docs目录下有各个组件的说明及示例 如果你想添加自己组件的文档,在编辑完成对应的文件后需要重新打包项目,最后将生成的文件重新部署

具体使用方法可以参考官方文档

# 启动

npm run docs:dev

# 构建

npm run docs:build

# 部署

打包后生成的静态文件默认放在本项目的gh-pages分支,文档页面使用Github Pages部署

# 进度

  • Tabs-选项卡
  • Collapse-折叠面板
  • Pager-分页
  • Carousel-走马灯
  • Tree-树形控件
  • Calendar-日历
  • 单元测试
  • TypeScript重构

持续施工中...

# 说明

本项目的开发目的,主要是个人对于技术的学习、研究、总结,其次是探索使用原生JavaScript实现一些复杂组件的方法

由于现在还未完成每个组件的单元测试,无法确保组件的稳定性,所以暂时不推荐在生产环境使用

——Done is better than perfect

这是我很喜欢的一句话,所以本项目的开发原则也是如此,优先实现各个组件的基础功能,而复杂功能的优先级会比较低

# 贡献

如果你遇到什么问题,或者有好的建议,欢迎提 IssuesPull Request

# 教程

本项目各个组件的开发教程会以文章的形式发布在以下几个平台,欢迎关注:

# 参考

本组件库参考了一些比较成熟的UI框架,包括但不限于外观、API设计、甚至源码实现,特此感谢这些开源社区的贡献者