He3 Documents

简体中文

English

简体中文

English

Appearance

On this page

Layout ​

何时使用 ​

在He3 App开发中使用约定的布局，可以更快上手

WARNING

所有布局名称都改成<h-xxx-layout>形式

代码演示 ​

水平两栏布局 ​

中等宽（默认） ​

水平中分布局

<template>
  <h-horizontal-layout mode="middle">
    <template #left>
      <div style="background-color: #7dbcea; height: 400px"></div>
    </template>
    <template #right>
      <div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
    </template>
  </h-horizontal-layout>
</template>

左固定 ​

固定边居左的水平布局

<template>
  <h-horizontal-layout mode="left" :width="200">
    <template #left>
      <div style="background-color: #7dbcea; height: 400px"></div>
    </template>
    <template #right>
      <div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
    </template>
  </h-horizontal-layout>
</template>

右固定 ​

固定边居右的水平布局

<template>
  <h-horizontal-layout mode="right" :width="200">
    <template #left>
      <div style="background-color: #7dbcea; height: 400px"></div>
    </template>
    <template #right>
      <div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
    </template>
  </h-horizontal-layout>
</template>

垂直两栏布局 ​

中等宽（默认） ​

上下中分布局

<template>
  <h-vertical-layout mode="middle">
    <template #top>
      <div style="background-color: #7dbcea; height: 400px"></div>
    </template>
    <template #bottom>
      <div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
    </template>
  </h-vertical-layout>
</template>

上固定 ​

上边固定的垂直布局

<template>
  <h-vertical-layout mode="top" :width="200">
    <template #top>
      <div style="background-color: #7dbcea; height: 100%"></div>
    </template>
    <template #bottom>
      <div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
    </template>
  </h-vertical-layout>
</template>

下固定 ​

下边固定的垂直布局

<template>
  <h-vertical-layout mode="bottom" :width="200">
    <template #top>
      <div style="background-color: #7dbcea"></div>
    </template>
    <template #bottom>
      <div style="background-color: rgba(16, 142, 233, 1)"></div>
    </template>
  </h-vertical-layout>
</template>

单栏布局 ​

居中（默认） ​

单栏居中布局

<template>
  <h-single-layout :width="400">
    <div style="background-color: #7dbcea; height: 400px; width: 400px"></div>
  </h-single-layout>
</template>

居左 ​

单栏居左布局

<template>
  <h-single-layout mode="left" :width="400">
    <div style="background-color: #7dbcea; height: 400px; width: 400px"></div>
  </h-single-layout>
</template>

居右 ​

单栏居右布局

<template>
  <h-single-layout mode="right" :width="400">
    <div style="background-color: #7dbcea; height:400px; width:400px"></div>
  </h-single-layout>
</template>

可调节布局 ​

可调节左右宽度占比的布局

<template>
  <h-split-pane-layout>
    <template #left>
      <div style="background-color: #7dbcea; height: 400px"></div>
    </template>
    <template #right>
      <div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
    </template>
  </h-split-pane-layout>
</template>

API ​

Props ​

属性说明类型默认值
mode模式选择enummiddle
mode(vertical)模式选择（垂直布局）enummiddle
width固定局部宽度number300