slothd

前端组件库

Usage no npm install needed!

<script type="module">
  import slothd from 'https://cdn.skypack.dev/slothd';
</script>

README

Sloth Design

npm package NPM downloads

一套基于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加载中