Ghuo Design

简体中文

English

简体中文

English

Appearance

Layout 布局 ​

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

设计规则 ​

尺寸 ​

一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。

  • 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。
  • 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。
  • 顶部导航高度的范围计算公式为：48+8n。
  • 侧边导航宽度的范围计算公式：200+8n。

交互 ​

  • 一级导航和末级的导航需要在可视化的层面被强调出来；
  • 当前项应该在呈现上优先级最高；
  • 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
  • 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。

组件概述 ​

  • Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
  • Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
  • Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
  • Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
  • Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

注意：采用 flex 布局实现，请注意浏览器兼容性问题。

基本结构 ​

典型的页面布局。

vue
<template>
  <g-layout>
    <g-header>Header</g-header>
    <g-content>Content</g-content>
    <g-footer>Footer</g-footer>
  </g-layout>
</template>

上中下布局 ​

最基本的『上-中-下』布局。

一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。

vue
<template>
  <g-layout class="layout">
    <g-header>
      <div class="logo" />
      <g-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
      >
        <g-menu-item key="1">nav 1</g-menu-item>
        <g-menu-item key="2">nav 2</g-menu-item>
        <g-menu-item key="3">nav 3</g-menu-item>
      </g-menu>
    </g-header>
    <g-content style="padding: 0 50px;">
      <g-breadcrumb style="margin: 16px 0;">
        <g-breadcrumb-item>Home</g-breadcrumb-item>
        <g-breadcrumb-item>List</g-breadcrumb-item>
        <g-breadcrumb-item>App</g-breadcrumb-item>
      </g-breadcrumb>
      <div class="site-layout-content">Content</div>
    </g-content>
    <g-footer style="text-align: center;">
      Ghuo Design ©2023 Created by Ghuo Team
    </g-footer>
  </g-layout>
</template>

<style>
.layout {
  min-height: 100vh;
}

.logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout-content {
  background: #fff;
  padding: 24px;
  min-height: 280px;
}
</style>

顶部-侧边布局-通栏 ​

同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。

vue
<template>
  <g-layout>
    <g-header class="header">
      <div class="logo" />
      <g-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
      >
        <g-menu-item key="1">nav 1</g-menu-item>
        <g-menu-item key="2">nav 2</g-menu-item>
        <g-menu-item key="3">nav 3</g-menu-item>
      </g-menu>
    </g-header>
    <g-layout>
      <g-sider width="200" style="background: #fff;">
        <g-menu
          mode="inline"
          :default-selected-keys="['1']"
          :default-open-keys="['sub1']"
          style="height: 100%; border-right: 0;"
        >
          <g-sub-menu key="sub1">
            <template #title>
              <span>
                <g-icon type="user" />
                subnav 1
              </span>
            </template>
            <g-menu-item key="1">option1</g-menu-item>
            <g-menu-item key="2">option2</g-menu-item>
            <g-menu-item key="3">option3</g-menu-item>
            <g-menu-item key="4">option4</g-menu-item>
          </g-sub-menu>
          <g-sub-menu key="sub2">
            <template #title>
              <span>
                <g-icon type="laptop" />
                subnav 2
              </span>
            </template>
            <g-menu-item key="5">option5</g-menu-item>
            <g-menu-item key="6">option6</g-menu-item>
            <g-menu-item key="7">option7</g-menu-item>
            <g-menu-item key="8">option8</g-menu-item>
          </g-sub-menu>
          <g-sub-menu key="sub3">
            <template #title>
              <span>
                <g-icon type="notification" />
                subnav 3
              </span>
            </template>
            <g-menu-item key="9">option9</g-menu-item>
            <g-menu-item key="10">option10</g-menu-item>
            <g-menu-item key="11">option11</g-menu-item>
            <g-menu-item key="12">option12</g-menu-item>
          </g-sub-menu>
        </g-menu>
      </g-sider>
      <g-layout style="padding: 0 24px 24px;">
        <g-breadcrumb style="margin: 16px 0;">
          <g-breadcrumb-item>Home</g-breadcrumb-item>
          <g-breadcrumb-item>List</g-breadcrumb-item>
          <g-breadcrumb-item>App</g-breadcrumb-item>
        </g-breadcrumb>
        <g-content
          class="site-layout-background"
          style="padding: 24px; margin: 0; min-height: 280px;"
        >
          Content
        </g-content>
      </g-layout>
    </g-layout>
  </g-layout>
</template>

<style>
.header {
  position: fixed;
  z-index: 1;
  width: 100%;
}

.logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout-background {
  background: #fff;
}
</style>

侧边布局 ​

侧边两列式布局。页面横向空间有限时，侧边导航可收起。

侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。

vue
<template>
  <g-layout style="min-height: 100vh;">
    <g-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo" />
      <g-menu theme="dark" :default-selected-keys="['1']" mode="inline">
        <g-menu-item key="1">
          <g-icon type="pie-chart" />
          <span>Option 1</span>
        </g-menu-item>
        <g-menu-item key="2">
          <g-icon type="desktop" />
          <span>Option 2</span>
        </g-menu-item>
        <g-sub-menu key="sub1">
          <template #title>
            <span>
              <g-icon type="user" />
              <span>User</span>
            </span>
          </template>
          <g-menu-item key="3">Tom</g-menu-item>
          <g-menu-item key="4">Bill</g-menu-item>
          <g-menu-item key="5">Alex</g-menu-item>
        </g-sub-menu>
        <g-sub-menu key="sub2">
          <template #title>
            <span>
              <g-icon type="team" />
              <span>Team</span>
            </span>
          </template>
          <g-menu-item key="6">Team 1</g-menu-item>
          <g-menu-item key="8">Team 2</g-menu-item>
        </g-sub-menu>
        <g-menu-item key="9">
          <g-icon type="file" />
          <span>File</span>
        </g-menu-item>
      </g-menu>
    </g-sider>
    <g-layout class="site-layout">
      <g-header class="site-layout-background" style="padding: 0;">
        <g-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
      </g-header>
      <g-content
        class="site-layout-background"
        style="margin: 24px 16px; padding: 24px; min-height: 280px;"
      >
        Content
      </g-content>
    </g-layout>
  </g-layout>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const collapsed = ref(false)
    
    return {
      collapsed
    }
  }
}
</script>

<style>
.logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}

.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}
</style>

自定义触发器 ​

要使用自定义触发器，可以设置 :trigger="null" 来隐藏默认设定。

vue
<template>
  <g-layout style="min-height: 100vh;">
    <g-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <g-menu theme="dark" :default-selected-keys="['1']" mode="inline">
        <g-menu-item key="1">
          <g-icon type="user" />
          <span>nav 1</span>
        </g-menu-item>
        <g-menu-item key="2">
          <g-icon type="video-camera" />
          <span>nav 2</span>
        </g-menu-item>
        <g-menu-item key="3">
          <g-icon type="upload" />
          <span>nav 3</span>
        </g-menu-item>
      </g-menu>
    </g-sider>
    <g-layout class="site-layout">
      <g-header class="site-layout-background" style="padding: 0;">
        <g-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
      </g-header>
      <g-content
        class="site-layout-background"
        style="margin: 24px 16px; padding: 24px; min-height: 280px;"
      >
        Content
      </g-content>
    </g-layout>
  </g-layout>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const collapsed = ref(false)
    
    return {
      collapsed
    }
  }
}
</script>

响应式布局 ​

Layout.Sider 支持响应式布局。

说明：配置 breakpoint 属性即生效，视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth 宽度，若将 collapsedWidth 设置为 0，会出现特殊 trigger。

vue
<template>
  <g-layout>
    <g-sider
      breakpoint="lg"
      :collapsed-width="0"
      @breakpoint="onBreakpoint"
      @collapse="onCollapse"
    >
      <div class="logo" />
      <g-menu theme="dark" mode="inline" :default-selected-keys="['4']">
        <g-menu-item key="1">
          <g-icon type="user" />
          <span class="nav-text">nav 1</span>
        </g-menu-item>
        <g-menu-item key="2">
          <g-icon type="video-camera" />
          <span class="nav-text">nav 2</span>
        </g-menu-item>
        <g-menu-item key="3">
          <g-icon type="upload" />
          <span class="nav-text">nav 3</span>
        </g-menu-item>
        <g-menu-item key="4">
          <g-icon type="user" />
          <span class="nav-text">nav 4</span>
        </g-menu-item>
      </g-menu>
    </g-sider>
    <g-layout>
      <g-header style="background: #fff; padding: 0;" />
      <g-content style="margin: 24px 16px 0;">
        <div style="padding: 24px; background: #fff; min-height: 360px;">
          content
        </div>
      </g-content>
      <g-footer style="text-align: center;">
        Ghuo Design ©2023 Created by Ghuo Team
      </g-footer>
    </g-layout>
  </g-layout>
</template>

<script>
export default {
  methods: {
    onBreakpoint(broken) {
      console.log(broken)
    },
    onCollapse(collapsed, type) {
      console.log(collapsed, type)
    }
  }
}
</script>

API ​

Layout ​

布局容器。

参数说明类型默认值
class容器 classstring-
style指定样式object | string-
hasSider表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动boolean-

Layout.Header ​

顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

参数说明类型默认值
class容器 classstring-
style指定样式object | string-

底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

参数说明类型默认值
class容器 classstring-
style指定样式object | string-

Layout.Content ​

内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

参数说明类型默认值
class容器 classstring-
style指定样式object | string-

Layout.Sider ​

侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。

参数说明类型默认值
breakpoint触发响应式布局的断点xs | sm | md | lg | xl | xxl-
class容器 classstring-
collapsed当前收起状态boolean-
collapsedWidth收缩宽度，设置为 0 会出现特殊 triggernumber80
collapsible是否可收起booleanfalse
defaultCollapsed是否默认收起booleanfalse
reverseArrow翻转折叠提示箭头的方向，当 Sider 在右边时可以使用booleanfalse
style指定样式object | string-
theme主题颜色light | darkdark
trigger自定义 trigger，设置为 null 时隐藏 triggerstring | slot-
width宽度number | string200
zeroWidthTriggerStyle指定当 collapsedWidth 为 0 时出现的特殊 trigger 的样式object-

事件 ​

事件名称说明回调参数
breakpoint触发响应式布局断点时的回调(broken) => void
collapse展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发(collapsed, type) => void

更多属性请参考 Flex 布局。

Released under the MIT License.

Copyright © 2024 Ghuo Design