当前位置: 首页 > 文档资料 > WeUI 帮助文档 >

Grid

优质
小牛编辑
128浏览
2023-12-01

grid 九宫格,功能类似于微信钱包界面中的九宫格,用于展示有多个相同级别的入口。包含功能的图标和简洁的文字描述。

<div class="weui-grids">
    <a href="javascript:;" class="weui-grid">
        <div class="weui-grid__icon">
            <img src="./images/icon_nav_button.png" alt="">
        </div>
        <p class="weui-grid__label">
            Button
        </p>
    </a>
    <a href="javascript:;" class="weui-grid">
        <div class="weui-grid__icon">
            <img src="./images/icon_nav_cell.png" alt="">
        </div>
        <p class="weui-grid__label">
            Cell
        </p>
    </a>
</div>

注意:九宫格图标约定尺寸是 28px 28px (2x图即 56px 56px)