Cyberpunk Vue

# Layout

  • <c-layout>：wrapper container.
  • <c-header>：container for headers.
  • <c-aside>：container for side sections。
  • <c-main>：container for main sections。
  • <c-footer>：container for footers。

WARNING

When nested with a <c-header> or <c-footer>, all its child elements will be vertically arranged. Otherwise horizontally.

WARNING

These components use flex for layout, so please make sure your browser supports it. Besides, <c-layout>'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a <c-layout>.

Common layouts

Container components for layout, easy to quickly build the basic structure of the page

Header
Main
Footer
Header
Main
Footer
Header
Main
Footer
Header
Main
Footer
<c-layout>
  <c-header height="50">Header</c-header>
  <c-main>Main</c-main>
  <c-footer height="50">Footer</c-footer>
</c-layout>

<c-layout>
  <c-aside width="200">Aside</c-aside>
  <c-layout>
    <c-header height="50">Header</c-header>
    <c-main>Main</c-main>
    <c-footer height="50">Footer</c-footer>
  </c-layout>
</c-layout>

<c-layout>
  <c-header height="50">Header</c-header>
  <c-layout>
    <c-aside width="200">Aside</c-aside>
    <c-main>Main</c-main>
  </c-layout>
  <c-footer height="50">Footer</c-footer>
</c-layout>

<c-layout>
  <c-header height="50">Header</c-header>
  <c-layout>
    <c-aside width="200">Aside</c-aside>
    <c-layout>
      <c-main>Main</c-main>
      <c-footer height="50">Footer</c-footer>
    </c-layout>
  </c-layout>
</c-layout>

<style>
  header,
  footer,
  main,
  aside, {
    font-size: 16px;
    font-weight: bold;
    color: #2E2E32;
  }
  header,
  footer {
    background-color: #99a9bf;
    line-height: 50px;
    text-align: center;
  }

  main,
  aside {
    background-color: #d3dce6;
    line-height: 70px;
    text-align: center;
  }

  aside {
    background-color: #80889c;
  }
</style>
Expand

Header Attributes

Attribute Description Type Accepted Values Default
height height of the header string —— 60px

Aside Attributes

Attribute Description Type Accepted Values Default
width width of the aside string —— 300px

Footer Attributes

Attribute Description Type Accepted Values Default
height height of the footer string —— 60px

← Menu →