illli 微信小程序 WXSS 样式库

illli 是一个简洁高效的微信小程序样式库，提供了常用的 UI 组件和样式类。

安装

npm install illli

使用方法

初始化项目

npx illli init

这个命令会在你的项目中创建一个 illli 文件夹，并将 illli.wxss 文件保存到该文件夹中。然后会自动将 illli.wxss 引入到你的 app.wxss 文件中。

添加单个组件

npx illli add button

这个命令会将 button 组件下载到 illli/components 文件夹中，并在 illli.wxss 文件中添加引用。

安装所有组件

npm install illli

或者

npx illli

这两个命令都会下载所有组件到 illli/components 文件夹中，并在 illli.wxss 文件中添加所有组件的引用。

查看所有可用组件

npx illli list

查看组件用法帮助

npx illli help button

可用组件

• button: 按钮组件
• card: 卡片组件
• list: 列表组件
• tag: 标签组件
• form: 表单组件
• avatar: 头像组件
• layout: 布局组件
• utils: 工具类
• animations: 动画效果组件
• transitions: 过渡效果组件

组件使用示例

按钮组件

<!-- 基础按钮 -->
<view class="btn">按钮</view>

<!-- 主要按钮 -->
<view class="btn btn-primary">主要按钮</view>

<!-- 危险按钮 -->
<view class="btn btn-danger">危险按钮</view>

<!-- 动画按钮 -->
<view class="btn btn-primary btn-ripple">波纹按钮</view>
<view class="btn btn-primary btn-pulse">脉冲按钮</view>
<view class="btn btn-gradient-primary">渐变按钮</view>

卡片组件

<!-- 基础卡片 -->
<view class="card">
  <view class="card-body">卡片内容</view>
</view>

<!-- 带标题的卡片 -->
<view class="card">
  <view class="card-header">卡片标题</view>
  <view class="card-body">卡片内容</view>
</view>

<!-- 带过渡效果的卡片 -->
<view class="card card-transition">悬停时有动画效果</view>

动画组件

<!-- 基础动画 -->
<view class="animate fade-in">淡入效果</view>
<view class="animate zoom-in">缩放效果</view>
<view class="animate slide-in-left">从左滑入</view>

<!-- 动画速度控制 -->
<view class="animate animate-slow fade-in">慢速淡入</view>
<view class="animate animate-fast fade-in">快速淡入</view>

<!-- 循环动画 -->
<view class="animate animate-infinite pulse">脉冲效果</view>
<view class="animate animate-infinite rotate">旋转效果</view>

过渡效果组件

<!-- 基础过渡 -->
<view class="transition">基础过渡效果</view>

<!-- 悬停效果 -->
<view class="hover-scale">缩放效果</view>
<view class="hover-lift">上浮效果</view>

<!-- 特殊过渡效果 -->
<view class="btn btn-transition">按钮过渡</view>
<view class="card card-transition">卡片过渡</view>

骨架屏

<!-- 基础骨架屏 -->
<view class="skeleton skeleton-text"></view>
<view class="skeleton skeleton-avatar"></view>

<!-- 带动画效果的骨架屏 -->
<view class="skeleton-gradient skeleton-text"></view>
<view class="skeleton-blink skeleton-text"></view>

<!-- 加载完成后动画 -->
<view class="skeleton-fade-in">内容已加载</view>

主题变量

illli 提供了一组 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

用法示例

<!-- 组合使用动画 -->
<view class="animate slide-in-up animate-slow">慢速从底部滑入</view>

<!-- 使用无限循环动画 -->
<view class="btn btn-primary">
  <view class="animate animate-infinite pulse">脉动按钮</view>
</view>

<!-- 使用过渡效果 -->
<view class="card card-transition">
  <view class="card-body">悬停时有阴影和上浮效果</view>
</view>

许可证

MIT