Content

content 是用来包裹正文的容器,主要包括 wrapper,header,content 组件

总览

content 组件主要是给正文提供一个容器,用法和 nly-contaier并无差异

注意:

  • 请尽量避免 nly-content-wrapper 组件和 nly-wrapper-content 组件出现在同一个页面中,这两个组件功能可以互换
  • content 正文容器是非必须的,页面中也可以用 nly-container 容器组件来代替

以下这个写法是配合左右行中下布局的写法,默认 nly-content-wrapper 会有一个 margin-left: 250px 偏移属性。

如果不需要这偏移量,可以使用 Top Navigation 布局

<nly-content-wrapper>
  <nly-content-header>
    header
  </nly-content-header>
  <nly-content>
    content
  </nly-content>
</nly-content-wrapper>

<!-- 总览.name -->
<!-- nly-content.vue -->

如果不是单页面应用,不需要左右布局,可以直接用 nly-content 作为正文最外层容器

<nly-content>
  <nly-content-header>
    header
  </nly-content-header>
  <nly-content>
    content
  </nly-content>
</nly-content>

<!-- 无偏移正文容器.name -->
<!-- nly-content.vue -->

组件参数

props 参数

props类型默认值描述
tag
String'section'标签

props 参数

props类型默认值描述
tag
String'section'标签

props 参数

props类型默认值描述
tag
String'section'标签

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-content-wrapper>NlyContentWrappernly-adminlte-vue
<nly-content>NlyContentnly-adminlte-vue
<nly-content-header>NlyContentHeadernly-adminlte-vue

例子

import { NlyContentWrapper } from 'nly-adminlte-vue'
Vue.component('nly-content-wrapper', NlyContentWrapper)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
ContentPluginnly-adminlte-vue

例子

import { ContentPlugin } from 'nly-adminlte-vue'
Vue.use(ContentPlugin)