theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Theluyuan
2022-12-09 16:41:41 +08:00
parent c1cce5a7c2
commit ff7aa8774f
2003 changed files with 156639 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
.svn/pristine/20/20e0d4fcc7a7e5e8e6b8fc0b388b6895bbce633d.svn-base Normal file
View File

@@ -0,0 +1,133 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 更灵活的布局方案。
:::
::: title 基础使用
:::
::: demo
<template>
<div>
<lay-split-panel style="height: 300px">
<lay-split-panel-item>A</lay-split-panel-item>
<lay-split-panel-item>B</lay-split-panel-item>
<lay-split-panel-item>C</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
</script>
<style>
.lay-split-panel-item{
display: flex;
font-size: 16px;
font-weight: bold;
justify-content: center;
align-items: center;
}
</style>
:::
::: title 自定义比例
:::
::: demo
<template>
<div>
<lay-split-panel style="height: 300px">
<lay-split-panel-item :space="200">1</lay-split-panel-item>
<lay-split-panel-item>2</lay-split-panel-item>
<lay-split-panel-item :space="200">3</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
</script>
:::
::: title 垂直布局
:::
::: demo
<template>
<div>
<lay-split-panel :vertical="true" style="height: 600px; width: 100%">
<lay-split-panel-item>1</lay-split-panel-item>
<lay-split-panel-item>2</lay-split-panel-item>
<lay-split-panel-item>3</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
</script>
:::
::: title 组合用法
:::
::: demo
<template>
<div>
<lay-split-panel style="height: 600px;">
<lay-split-panel-item :space="300">
<lay-split-panel :vertical="true" style="height: 600px; width: 100%">
<lay-split-panel-item :space="200">1</lay-split-panel-item>
<lay-split-panel-item>2</lay-split-panel-item>
</lay-split-panel>
</lay-split-panel-item>
<lay-split-panel-item>2</lay-split-panel-item>
<lay-split-panel-item>2</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
</script>
:::
::: title splitPanel属性
:::
::: table
| 属性 | 描述 | 类型 |可选值 | 默认值|
| ----- | ---- | ------ | ---| ---|
| vertical | 是否垂直布局 | Boolean |`true` `false`| false |
| minSize | 块拉动最小范围(按像素 `px`) | number | - | 50 |
:::
::: title splitPanelItem属性
:::
::: table
| 属性 | 描述 | 类型 |可选值 | 默认值|
| ----- | ---- | ------ | ---| ---|
| space | 默认每个占 `px` , 其他的自动平分 | number | - | 按照个数平分 |
:::
::: contributor splitPanel
:::
::: previousNext splitPanel
:::