# illli 微信小程序 WXSS 样式库
illli 是一个简洁高效的微信小程序样式库，提供了常用的 UI 组件和样式类。
## 安装
```bash
npm install illli
```
## 使用方法
### 初始化项目
```bash
npx illli init
```
这个命令会在你的项目中创建一个 `illli` 文件夹，并将 `illli.wxss` 文件保存到该文件夹中。然后会自动将 `illli.wxss` 引入到你的 `app.wxss` 文件中。
### 添加单个组件
```bash
npx illli add button
```
这个命令会将 button 组件下载到 `illli/components` 文件夹中，并在 `illli.wxss` 文件中添加引用。
### 安装所有组件
```bash
npm install illli
```
或者
```bash
npx illli
```
这两个命令都会下载所有组件到 `illli/components` 文件夹中，并在 `illli.wxss` 文件中添加所有组件的引用。
### 查看所有可用组件
```bash
npx illli list
```
### 查看组件用法帮助
```bash
npx illli help button
```
## 可用组件
- button: 按钮组件
- card: 卡片组件
- list: 列表组件
- tag: 标签组件
- form: 表单组件
- avatar: 头像组件
- layout: 布局组件
- utils: 工具类
- animations: 动画效果组件
- transitions: 过渡效果组件
## 组件使用示例
### 按钮组件
```html
按钮
主要按钮
危险按钮
波纹按钮
脉冲按钮
渐变按钮
```
### 卡片组件
```html
卡片内容
卡片内容
悬停时有动画效果
```
### 动画组件
```html
淡入效果
缩放效果
从左滑入
慢速淡入
快速淡入
脉冲效果
旋转效果
```
### 过渡效果组件
```html
基础过渡效果
缩放效果
上浮效果
按钮过渡
卡片过渡
```
### 骨架屏
```html
内容已加载
```
## 主题变量
illli 提供了一组 CSS 变量，方便你自定义样式：
```css
:root {
--color-primary: #07C160;
--color-danger: #FA5151;
--color-warning: #FFC300;
--color-info: #10AEFF;
--color-dark: #333333;
--color-light: #F7F7F7;
--color-white: #FFFFFF;
--color-border: #EEEEEE;
--font-size-xs: 24rpx;
--font-size-sm: 28rpx;
--font-size-md: 32rpx;
--font-size-lg: 36rpx;
--font-size-xl: 40rpx;
--radius-sm: 4rpx;
--radius-md: 8rpx;
--radius-lg: 16rpx;
--spacing-xs: 5rpx;
--spacing-sm: 10rpx;
--spacing-md: 20rpx;
--spacing-lg: 30rpx;
/* 动画变量 */
--animation-duration-fast: 0.3s;
--animation-duration-normal: 0.5s;
--animation-duration-slow: 1s;
--transition-timing-function: ease;
--transition-timing-function-ease-in: ease-in;
--transition-timing-function-ease-out: ease-out;
--transition-timing-function-ease-in-out: ease-in-out;
}
```
## 动画与过渡效果
illli 样式库现在提供了丰富的动画和过渡效果，可以轻松为您的小程序界面添加生动的交互体验：
### 动画类型
- **淡入淡出**: fade-in, fade-out
- **缩放**: zoom-in, zoom-out
- **滑动**: slide-in-left, slide-in-right, slide-in-up, slide-in-down
- **旋转**: rotate
- **脉冲**: pulse
- **弹跳**: bounce
- **摇晃**: shake
- **闪烁**: flash
### 过渡效果
- **基础过渡**: transition
- **悬停效果**: hover-scale, hover-lift, hover-opacity
- **特殊过渡**: btn-transition, card-transition, color-transition, border-transition, shape-transition
### 用法示例
```html
慢速从底部滑入
脉动按钮
悬停时有阴影和上浮效果
```
## 许可证
MIT