Just Devise

白/夜

本页目录

Layout  布局 ​

协助进行页面级整体布局。

无侧边栏布局 ​

预览 ​

header
content
footer

代码 ​

vue
<template>
  <j-layout class="wrapper">
    <j-header
      class="custom"
      style="height: 50px; background-color: rgba(16, 185, 129, 0.7)"
      >header</j-header
    >
    <j-content
      class="custom"
      style="height: 100px; background: rgba(16, 185, 129, 1)"
      >content</j-content
    >
    <j-footer
      class="custom"
      style="height: 50px; background: rgba(16, 185, 129, 0.7)"
      >footer</j-footer
    >
  </j-layout>
</template>

内容含侧边栏布局 ​

预览 ​

header
sider
content
footer

代码 ​

html
<j-layout class="wrapper">
   <j-header
     class="custom"
     style="height: 50px; background: rgba(16, 185, 129, 0.6)"
     >header</j-header
   >
   <j-layout>
     <j-sider
       class="custom"
       style="height: 100px; background: rgba(16, 185, 129, 0.8); width: 200px"
     >
       slider
     </j-sider>
     <j-content
       class="custom"
       style="height: 100px; background: rgba(16, 185, 129, 1)"
       >content</j-content
     >
   </j-layout>

   <j-footer
     class="custom"
     style="height: 50px; background: rgba(16, 185, 129, 0.6)"
     >footer</j-footer
   >
 </j-layout>

含侧边栏布局 ​

预览 ​

sider
header
content
footer

代码 ​

html
<j-layout class="wrapper">
   <j-sider class="custom" style="background: rgba(16, 185, 129, 0.8); width: 200px"
     >sider</j-sider
   >
   <j-layout>
     <j-header
       class="custom"
       style="height: 50px; background: rgba(16, 185, 129, 0.6)"
       >header</j-header
     >
     <j-content
       class="custom"
       style="height: 100px; background: rgba(16, 185, 129, 1)"
       >content</j-content
     >
     <j-footer
       class="custom"
       style="height: 50px; background: rgba(16, 185, 129, 0.6)"
       >footer</j-footer
     >
   </j-layout>
 </j-layout>