Files

liyang 8cc55e1bf7 no message

Former-commit-id: afef3af60139bd559aa150052fc3a72ec2f384a4
Former-commit-id: e2b324d8476ca2a52c625f2aee16972708a43bec
Former-commit-id: ab3a3d9097c684c0fb1b54b1a5f228157b2f81ff

2018-06-10 08:39:06 +08:00

1.6 KiB

Raw Blame History

页面容器

页面容器组件是每个页面的基础，为了在整个项目中统一效果，它应该是 <template> 组件的直接子组件

参数

参数名	介绍	必选	值类型	可选值	默认值
type	容器类型	非	String	card ghost full	card
responsive	响应式宽度	非	Boolean		false

::: tip responsive 参数设置只在 type 等于 card 或 ghost 时生效 :::

使用方法

一个基础单文件页面组件的示例

<template>
  <d2-container>
    <template slot="header">
      可选的 header 内容 ...
    </template>
    主体内容 ...
  </d2-container>
</template>

<script>
export default {
  name: 'your-component-name'
}
</script>

<style lang="scss">
// 需要的话引入
@import '~@/assets/style/public.scss';
</style>

基础页面容器

高度根据内容适应

<d2-container>
  主体内容
</d2-container>

使用 slot

<d2-container>
  <template slot="header">我是插入到 header 中的内容</template>
  主体内容
</d2-container>

自适应填充页面容器

无论内容高度多少，都会自动撑满页面，并有可选的 header 和 footer 插槽

示例：

<template>
  <d2-container type="full">
    <template slot="header">
      可选的 header 内容 ...
    </template>
    主体内容 ...
    <template slot="footer">
      可选的 footer 内容 ...
    </template>
  </d2-container>
</template>

隐形页面容器

不显示任何背景色和边框

<d2-container type="ghost">
  主体内容
</d2-container>

1.6 KiB Raw Blame History