Yy Craft

主题

Layout 布局容器 ​

基本用法 ​

查看示例
vue
<template>
  <yy-layout>
    <yy-layout-header>Header</yy-layout-header>
    <yy-layout-content>Content</yy-layout-content>
    <yy-layout-footer>Footer</yy-layout-footer>
  </yy-layout>
</template>

侧边栏布局 ​

查看示例
vue
<template>
  <yy-layout has-sider>
    <yy-layout-sider>Sider</yy-layout-sider>
    <yy-layout-content>Content</yy-layout-content>
  </yy-layout>
</template>

显示边框 ​

查看示例
vue
<template>
  <yy-layout has-sider>
    <yy-layout-sider bordered>
      Sider 带边框
    </yy-layout-sider>
    <yy-layout>
      <yy-layout-header bordered>
        Header 带下边框
      </yy-layout-header>
      <yy-layout-content>Content</yy-layout-content>
      <yy-layout-footer bordered>
        Footer 带上边框
      </yy-layout-footer>
    </yy-layout>
  </yy-layout>
</template>

更多关于侧边栏 ​

查看示例
vue
<template>
  <yy-layout has-sider>
    <yy-layout-sider width="40">
      Sider 带边框
    </yy-layout-sider>
    <yy-layout-content>
      <yy-text type="info">
        侧边栏宽度为 40px
      </yy-text>
    </yy-layout-content>
  </yy-layout>
</template>
查看示例
vue
<template>
  <yy-layout has-sider>
    <yy-layout-sider collapsed-width="20" width="40">
      Sider 带边框
    </yy-layout-sider>
    <yy-layout-content>
      <yy-text type="info">
        侧边栏可以折叠啦
      </yy-text>
    </yy-layout-content>
  </yy-layout>
</template>
查看示例
vue
<template>
  <yy-layout has-sider>
    <yy-layout-sider collapsed collapsed-width="20" width="40">
      Sider 带边框
    </yy-layout-sider>
    <yy-layout-content>
      <yy-text type="info">
        这是一个默认收起的侧边栏
      </yy-text>
    </yy-layout-content>
  </yy-layout>
</template>
查看示例
vue
<template>
  <yy-layout has-sider>
    <yy-layout-sider
      collapsed
      collapsed-width="20"
      width="40"
      :show-collapsed-content="false"
    >
      Sider 带边框
    </yy-layout-sider>
    <yy-layout-content>
      <yy-text type="info">
        侧边栏收起后还有宽度, 但是内容隐藏了
      </yy-text>
    </yy-layout-content>
  </yy-layout>
</template>

区域 Props ​

Layout ​

参数说明类型默认值
hasSider是否有侧边栏boolean-
contentClass内容类名any-
contentStyle内容样式StyleValue-

LayoutSider ​

参数说明类型默认值
width宽度string | number-
collapsed默认收起boolean-
collapsedWidth收起时宽度string | number-
showCollapsedContent收起时内容显示booleantrue
bordered是否显示边框boolean-
contentClass内容类名any-
contentStyle内容样式StyleValue-

LayoutHeader ​

参数说明类型默认值
bordered是否显示下边框boolean-

LayoutContent ​

参数说明类型默认值
contentClass内容类名any-
contentStyle内容样式StyleValue-

LayoutFooter ​

参数说明类型默认值
bordered是否显示上边框boolean-