yugrid
Version:
yugrid 现代化响应式 Grid 布局系统，支持 ES Module 和 CommonJS
279 lines (220 loc) • 5.93 kB
Markdown
# YuGrid
现代化响应式 Grid 布局系统，支持 ES Module 和 CommonJS
## 特性
- 🎯 **24列栅格系统** - 灵活的栅格布局
- 📱 **响应式设计** - 支持 6 个断点 (xs, sm, md, lg, xl, xxl)
- 🔧 **双模块支持** - 同时支持 ES Module 和 CommonJS
- 💪 **TypeScript 支持** - 完整的类型定义
- 🎨 **灵活配置** - 支持间距、对齐、偏移等配置
- 🚀 **轻量级** - 无依赖，体积小
- 🌐 **浏览器兼容** - 支持现代浏览器
## 安装
```bash
npm install yugrid
```
## 快速开始
### HTML 结构
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/yugrid/src/grid.css">
</head>
<body>
<div class="yu-container">
<div class="yu-row">
<div class="yu-col yu-col-12">
<div>列 1</div>
</div>
<div class="yu-col yu-col-12">
<div>列 2</div>
</div>
</div>
</div>
</body>
</html>
```
### ES Module 使用
```javascript
import YuGrid from 'yugrid';
// 或者按需导入
import { YuContainer, YuRow, YuCol } from 'yugrid';
// 创建容器
const container = new YuGrid.Container('#container', {
fluid: false,
maxWidths: {
sm: 540,
md: 720,
lg: 960,
xl: 1140,
xxl: 1320
}
});
// 创建行
const row = new YuGrid.Row('#row', {
gutter: 20,
justify: 'center',
align: 'middle'
});
// 创建列
const col = new YuGrid.Col('#col', {
span: 12,
offset: 0,
responsive: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 8 },
lg: { span: 6 }
}
});
```
### CommonJS 使用
```javascript
const YuGrid = require('yugrid');
// 使用方式相同
const container = YuGrid.createContainer('#container');
const row = YuGrid.createRow('#row', { gutter: 16 });
const col = YuGrid.createCol('#col', { span: 8 });
```
### 浏览器直接使用
```html
<script src="node_modules/yugrid/dist/yugrid.umd.min.js"></script>
<script>
const container = new YuGrid.Container('#container');
const row = new YuGrid.Row('#row');
const col = new YuGrid.Col('#col', { span: 12 });
</script>
```
## API 文档
### YuContainer
容器组件，提供响应式的最大宽度限制。
```javascript
const container = new YuGrid.Container(element, options);
```
**参数：**
- `element`: 字符串选择器或 DOM 元素
- `options`: 配置选项
- `fluid`: 是否为流式容器（默认：false）
- `maxWidths`: 各断点的最大宽度
- `breakpoints`: 断点配置
### YuRow
行组件，管理列的布局和间距。
```javascript
const row = new YuGrid.Row(element, options);
```
**参数：**
- `element`: 字符串选择器或 DOM 元素
- `options`: 配置选项
- `gutter`: 列间距（默认：0）
- `justify`: 水平对齐方式（start, end, center, space-around, space-between, space-evenly）
- `align`: 垂直对齐方式（top, middle, bottom, stretch）
- `wrap`: 是否换行（默认：true）
**方法：**
- `setGutter(gutter)`: 动态设置间距
### YuCol
列组件，支持响应式布局。
```javascript
const col = new YuGrid.Col(element, options);
```
**参数：**
- `element`: 字符串选择器或 DOM 元素
- `options`: 配置选项
- `span`: 列宽（1-24）
- `offset`: 左侧偏移列数
- `push`: 向右移动列数
- `pull`: 向左移动列数
- `order`: 排序
- `flex`: CSS flex 属性
- `responsive`: 响应式配置
**方法：**
- `setSpan(span, breakpoint)`: 动态设置列宽
## 响应式断点
| 断点 | 屏幕宽度 | 容器最大宽度 |
|------|----------|-------------|
| xs | < 576px | 100% |
| sm | ≥ 576px | 540px |
| md | ≥ 768px | 720px |
| lg | ≥ 992px | 960px |
| xl | ≥ 1200px | 1140px |
| xxl | ≥ 1400px | 1320px |
## 响应式使用示例
```html
<!-- 在不同屏幕尺寸下显示不同的列数 -->
<div class="yu-row">
<div class="yu-col yu-col-xs-24 yu-col-sm-12 yu-col-md-8 yu-col-lg-6">
响应式列 1
</div>
<div class="yu-col yu-col-xs-24 yu-col-sm-12 yu-col-md-8 yu-col-lg-6">
响应式列 2
</div>
<div class="yu-col yu-col-xs-24 yu-col-sm-12 yu-col-md-8 yu-col-lg-6">
响应式列 3
</div>
<div class="yu-col yu-col-xs-24 yu-col-sm-12 yu-col-md-8 yu-col-lg-6">
响应式列 4
</div>
</div>
```
```javascript
// JavaScript 响应式配置
const col = new YuGrid.Col('#col', {
responsive: {
xs: { span: 24 }, // 手机：全宽
sm: { span: 12 }, // 平板：半宽
md: { span: 8 }, // 桌面：1/3宽
lg: { span: 6 } // 大屏：1/4宽
}
});
```
## 工具函数
```javascript
// 获取当前断点
const breakpoint = YuGrid.getCurrentBreakpoint();
console.log(breakpoint); // 'md'
// 批量初始化
const instances = YuGrid.initGrid('[data-yu-grid]');
// 工厂函数
const container = YuGrid.createContainer('#container');
const row = YuGrid.createRow('#row');
const col = YuGrid.createCol('#col');
```
## CSS 类名
### 容器
- `.yu-container`: 响应式容器
- `.yu-container-fluid`: 流式容器
### 行
- `.yu-row`: 基础行
- `.yu-row-nowrap`: 不换行
- `.yu-row-justify-*`: 水平对齐
- `.yu-row-align-*`: 垂直对齐
### 列
- `.yu-col`: 基础列
- `.yu-col-{1-24}`: 列宽
- `.yu-col-offset-{0-23}`: 偏移
- `.yu-col-push-{0-23}`: 右移
- `.yu-col-pull-{0-23}`: 左移
- `.yu-col-{breakpoint}-{1-24}`: 响应式列宽
## 构建和开发
```bash
# 安装依赖
npm install
# 构建
npm run build
# 开发服务器
npm run dev
# 运行测试
npm test
# 代码检查
npm run lint
```
## 浏览器支持
- Chrome ≥ 60
- Firefox ≥ 60
- Safari ≥ 12
- Edge ≥ 79
## 许可证
CC BY-NC-SA 4.0
## 作者
广州迅羽软件科技有限公司
- 网站: https://xin5.xin/
- 邮箱: 924714597@qq.com