# sheral

**Repository Path**: daiqxbb/sheral

## Basic Information

- **Project Name**: sheral
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-27
- **Last Updated**: 2025-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# sheral

Focus in mobile UI.

基于[sandal](https://github.com/marvin1023/sandal)（基础sass库）扩展的移动端UI库。具体设计思想可参看[sheral——一个方便定制及扩展的UI组件库](http://imweb.io/topic/578392f6ba724c663b83527d)

## demo

[在线demo](http://imweb.github.io/sheral)

相关教程可参看：

- [移动端重构实战系列1——基础知识](http://imweb.io/topic/577e64a47c99347163ec0b10)
- [移动端重构实战系列2——line list](http://imweb.io/topic/577e7bb87c99347163ec0b14)
- [移动端重构实战系列3——各种等分](http://imweb.io/topic/577e7c0f7c99347163ec0b15)
- [移动端重构实战系列4——进入离开动画](http://imweb.io/topic/577e7cf17c99347163ec0b16)
- [移动端重构实战系列5——form元素](http://imweb.io/topic/578307abba724c663b835279)
- [移动端重构实战系列6——icon与图片](http://imweb.io/topic/57830874ba724c663b83527a)
- [移动端重构实战系列7——环形UI](http://imweb.io/topic/57860c1962a261a62914407f)

PS：sheral目前只专注重构这块，所以js写得比较简略，只是为了简单演示使用，同时欢迎感兴趣的小伙伴加入重构或转成其他js组件库

## 本地搭建

先克隆到本地，再运行npm install，安装完毕运行`gulp`命令，然后浏览器输入`http://localhost:8888/index.html`即可

```js
npm install
```

```js
gulp
```
## webpack 调用

```scss
// 先调用 sandal 的 _function.scss，如需要reset样式则调用 _core.scss
@import '~sass-sandal/_function';
// or
@import '~sass-sandal/_core';

// 再调用需要的模块
@import '~sheral/components/_btn';
@import '~sheral/components/_line-list';
```