slothd

Sloth Design

一套基于jQuery的前端组件库。

特性

• 支持IE8+。
• 对于后端开发友好。
• 使用 ES2017 构建。
• 基于 npm + webpack 的企业级开发框架。

安装

yarn add slothd -D

示例

import Sloth from 'slothd';

在页面上使用：

<div class="Carousel" component="Carousel">
    <ul>
        <li><img src="http://file.edufe.cn/b2c_mob_pic/ba8055f183564029a387e4820af4549d.jpg" alt=""></li>
        <li><img src="http://file.edufe.cn/b2c_mob_pic/ba8055f183564029a387e4820af4549d.jpg" alt=""></li>
        <li><img src="http://file.edufe.cn/b2c_mob_pic/ba8055f183564029a387e4820af4549d.jpg" alt=""></li>
        <li><img src="http://file.edufe.cn/b2c_mob_pic/ba8055f183564029a387e4820af4549d.jpg" alt=""></li>
    </ul>
</div>

你也可以使用如下方式按需加载组件

import Sloth from 'slothd/Sloth';
import "slothd/dist/sass"
import "slothd/dist/Carousel"
Sloth.init();

本地开发

$ svn co svn://path to your svn server/slothd
$ yarn
$ yarn start

打开浏览器访问 http://127.0.0.1:3000 。

使用脚手架

$ yarn global add slothd-cli

初始化网站项目

$ slothd-cli addsite <SiteName>
$ cd <SiteName>
$ yarn
$ yarn start

添加一个新组件

$ slothd-cli addcomponent

发布npm新版本

$ yarn publish

一期要实现的功能

• Affix固钉
• Dropdown下拉菜单
• Input输入框
• Select选择器 (SlothUI原来的不要了)
• Upload上传
• Modal对话框
• Anchor锚点 (SlothUI原来的Catalog不要了)
• BackTop回到顶部
• Video视频播放

二期要实现的功能

• Checkbox多选框
• Radio单选框
• DatePicker日期选择框
• Rate评分
• Switch开关
• Avatar头像
• Collapse折叠面板
• Popover气泡卡片
• Tooltip文字提示
• Table表格
• Tag标签
• Timeline时间轴
• Message全局提示
• Progress进度条
• Spin加载中