yugrid

v1.0.3

Published

10 months ago

yugrid 现代化响应式 Grid 布局系统，支持 ES Module 和 CommonJS

0High
0Medium
0Low

gzxunyu

gzxunyu yugrid h5 迅羽软件科技网站 app 应用 web

YuGrid

现代化响应式 Grid 布局系统，支持 ES Module 和 CommonJS

特性

🎯 24列栅格系统 - 灵活的栅格布局
📱 响应式设计 - 支持 6 个断点 (xs, sm, md, lg, xl, xxl)
🔧 双模块支持 - 同时支持 ES Module 和 CommonJS
💪 TypeScript 支持 - 完整的类型定义
🎨 灵活配置 - 支持间距、对齐、偏移等配置
🚀 轻量级 - 无依赖，体积小
🌐 浏览器兼容 - 支持现代浏览器

安装

npm install yugrid

快速开始

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 使用

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 使用

const YuGrid = require('yugrid');

// 使用方式相同
const container = YuGrid.createContainer('#container');
const row = YuGrid.createRow('#row', { gutter: 16 });
const col = YuGrid.createCol('#col', { span: 8 });

浏览器直接使用

<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

容器组件，提供响应式的最大宽度限制。

const container = new YuGrid.Container(element, options);

参数：

element: 字符串选择器或 DOM 元素
options: 配置选项
- fluid: 是否为流式容器（默认：false）
- maxWidths: 各断点的最大宽度
- breakpoints: 断点配置

YuRow

行组件，管理列的布局和间距。

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

列组件，支持响应式布局。

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 |

响应式使用示例

<!-- 在不同屏幕尺寸下显示不同的列数 -->
<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 响应式配置
const col = new YuGrid.Col('#col', {
    responsive: {
        xs: { span: 24 },  // 手机：全宽
        sm: { span: 12 },  // 平板：半宽
        md: { span: 8 },   // 桌面：1/3宽
        lg: { span: 6 }    // 大屏：1/4宽
    }
});

工具函数

// 获取当前断点
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}: 响应式列宽

构建和开发

# 安装依赖
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/
邮箱: [email protected]

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

YuGrid

特性

安装

快速开始

HTML 结构

ES Module 使用

CommonJS 使用

浏览器直接使用

API 文档

YuContainer

YuRow

YuCol

响应式断点

响应式使用示例

工具函数

CSS 类名

容器

行

列

构建和开发

浏览器支持

许可证

作者