Skip to content

Latest commit

 

History

History
199 lines (159 loc) · 4.81 KB

xy-layout.md

File metadata and controls

199 lines (159 loc) · 4.81 KB
Raw

xy-layout

布局，基于flex和grid的简单实现。

使用方式

<!-- 引入 -->
<script type="module">
    import './node_modules/xy-ui/components/xy-layout.js';
</script>
<!-- 使用 -->
<xy-layout row expand>
    <xy-layout class="side"></xy-layout>
    <xy-layout expand center class="main">
        <xy-layout center class="box">xy-layout</xy-layout>
    </xy-layout>
    <xy-layout class="side"></xy-layout>
</xy-layout>

<xy-row gutter="10">
    <xy-col span="4">col-4</xy-col>
    <xy-col span="8">col-8</xy-col>
    <xy-col span="8">col-8</xy-col>
    <xy-col span="4">col-4</xy-col>
</xy-row>

内部仅仅根据属性选择器实现，属性可叠加使用。

水平排列row

默认为垂直排列，row表示水平排列。

1 2 
<xy-layout row>
    <xy-layout class="box">1</xy-layout>
    <xy-layout class="box box-o">2</xy-layout>
</xy-layout>

填充expand

根据剩余空间填充（主轴方向）。

1 2 
<xy-layout row>
    <xy-layout class="box" expand>1</xy-layout>
    <xy-layout class="box box-o">2</xy-layout>
</xy-layout>

如果有多个，则会等分剩余空间。

1 2 3 
<xy-layout row>
    <xy-layout class="box">1</xy-layout>
    <xy-layout class="box box-o" expand>2</xy-layout>
    <xy-layout class="box" expand>3</xy-layout>
</xy-layout>

居中center

默认水平垂直居中，可以指定某一方向居中，主轴mainAxis和交叉轴crosAxis。

1 
<xy-layout center style="height:200px">
    <xy-layout class="box">1</xy-layout>
</xy-layout>

center="crosAxis"

1 
<xy-layout row center="crosAxis" style="height:200px">
    <xy-layout class="box">1</xy-layout>
</xy-layout>

center="mainAxis"

1 
<xy-layout row center="mainAxis" style="height:200px">
    <xy-layout class="box">1</xy-layout>
</xy-layout>

栅格row、col

现在支持栅格系统，基于grid布局

24栅格系统。把水平方向行xy-row平均分为24份，然后指定每一列xy-col的跨越范围span

col-12 col-12 col-4 col-8 col-8 col-4 col-8 col-8 col-8 
<xy-row gutter="10">
    <xy-col span="12">col-12</xy-col>
    <xy-col span="12">col-12</xy-col>
    <xy-col span="4">col-4</xy-col>
    <xy-col span="8">col-8</xy-col>
    <xy-col span="8">col-8</xy-col>
    <xy-col span="4">col-4</xy-col>
    <xy-col span="8">col-8</xy-col>
    <xy-col span="8">col-8</xy-col>
    <xy-col span="8">col-8</xy-col>
</xy-row>

间隔gutter

通过gutter属性可以设置栅格间隔

col-4 col-8 col-8 col-4

JavaScript操作get、set

row.gutter;//获取
row.gutter = 10;
//原生属性操作
row.getAttribute('gutter');
row.setAttribute('gutter',10);

示例

下面是一个xy-layout简单的示例。

HEADER xy-layout FOOTER 
<xy-layout class="layout">
    <xy-layout class="header">HEADER</xy-layout>
    <xy-layout row expand>
        <xy-layout class="side"></xy-layout>
        <xy-layout expand center class="main">
            <xy-layout center class="box">xy-layout</xy-layout>
        </xy-layout>
        <xy-layout class="side"></xy-layout>
    </xy-layout>
    <xy-layout class="footer">FOOTER</xy-layout>
</xy-layout>