快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

容器 Docker

概述

设置类j-docker来定义父级容器。j-docker默认支持iOSsafe-area-inset的兼容设定。如:

padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
基础容器

页面的基础容器由headermainasidefooter组成。

header:顶栏容器。

main:主容器。

aside:边栏容器。

footer:底栏容器。

    <header>Header</header>
    <div class="j-page">
        <main>Main</main>
        <aside>Aside</aside>
    </div>
    <footer>Footer</footer>
Header
Main
Footer

容器主题

设定父级容器的类j-container,定义页面宽度和垂直居中,默认值--pageWidth。Mobile模式下,请使用类container,默认页面宽度100%且垂直居中。

main标签默认容器宽度100%;设定类j-main,自定义容器宽度,默认值--mainWidth

aside标签默认容器宽度100%;设定类j-aside,自定义侧边栏宽度,默认值--asideWidth

设定类j-page,定义页面两栏布局风格。

<div class="j-container">
    <div class="j-page">
        <main class="j-main">Main</main>
        <aside class="j-aside">Aside</aside>
    </div>
</div>

你可以在jui.cssStyle Configuration中进行页面结构尺寸的主题定义。

列表容器

定义:设定类j-list来定义列表容器,设定类j-list-item来定义列表中的每一个项目。

主题:列表容器包含列表和网格两种主题,分别用类j-is-list和类j-is-grid定义。

列表 列表容器之列表主题 j-is-list,如:

列表容器的子项目结构由3部分组成:prefixcontentsuffix

<div class="j-list j-is-list">
    <a class="j-list-item" href="">
        <div class="j-list-item-prefix">
            <i class="iconfont icon_1"></i>
        </div>
        <div class="j-list-item-content">
            <span>第一个项目</span>
        </div>
        <div class="j-list-item-suffix">
            <i class="iconfont icon_right"></i>
        </div>
    </a>
</div>
网格 列表容器之网格主题 j-is-grid,如:

在列表容器网格主题中,继承 网格布局j-is-*的网格列计数方式,最大支持12列。如在示例中一行4列,即为j-is-4

你可以在父级容器上自定义类来自定义项目高度等个性样式,如示例中添加类docker-grid-demo自定义样式。

<div class="j-list j-is-grid j-is-4 docker-grid-demo">
    <a class="j-list-item" href="">
        <div class="j-list-item-prefix">
            <i class="iconfont icon_1"></i>
        </div>
        <div class="j-list-item-content">
            <span>项目一</span>
        </div>
        <div class="j-list-item-suffix">
            <i class="iconfont icon_right"></i>
        </div>
    </a>
    <a class="j-list-item" href="">
        <div class="j-list-item-prefix">
            <i class="iconfont icon_2"></i>
        </div>
        <div class="j-list-item-content">
            <span>项目二</span>
        </div>
    </a>
    <a class="j-list-item" href="">
        <div class="j-list-item-prefix">
            <i class="iconfont icon_list"></i>
        </div>
        <div class="j-list-item-content">
            <span>项目三</span>
        </div>
    </a>
    <a class="j-list-item" href="">
        <div class="j-list-item-prefix">
            <i class="iconfont icon_4"></i>
        </div>
        <div class="j-list-item-content">
            <span>项目四</span>
        </div>
        <div class="j-list-item-suffix">
            <i class="iconfont icon_emoji"></i>
        </div>
    </a>
</div>
安全视窗

在最新的ios设备中,由于刘海屏的存在,对页面的视窗显示安全造成一定影响。Safari浏览器特别针对这一问题提出了safe-area-inset的方法。JUI围绕safe-area-inset的常见使用场景,封装了6个类,方便大家直接使用。

类 Class 值 Value
.j-ios-safe-x padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right)
.j-ios-safe-y padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom)
.j-ios-safe-left padding-left: env(safe-area-inset-left)
.j-ios-safe-right padding-right: env(safe-area-inset-right)
.j-ios-safe-top padding-top: env(safe-area-inset-top)
.j-ios-safe-bottom padding-bottom: env(safe-area-inset-bottom)
上一章:布局 Layout
下一章:定位 Position