@uivjs/vue-layout

Layout component for Vue 3.0. Handling the overall layout of a page.

Install

npm i @uivjs/vue-layout

Usage

<template>
  <v-layout>
    <v-header>header</v-header>
    <v-content>
      content
    </v-content>
    <v-footer>
      footer
    </v-footer>
  </v-layout>
</template>

<script>
import { defineComponent } from 'vue';
import { Layout, Header, Content, Footer, Sider } from '@uivjs/vue-layout';

export default defineComponent({
  components: {
    ['v-layout'] : Layout,
    ['v-header'] : Header,
    ['v-content'] : Content,
    ['v-footer'] : Footer,
    ['v-sider'] : Sider,
  }
});
</script>

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

  <v-layout>
    <v-header> Header </v-header>
    <v-layout>
      <v-sider> Sider </v-sider>
      <v-content> Content </v-content>
    </v-layout>
    <v-footer> Footer </v-footer>
  </v-layout>

  <v-layout>
    <v-header> Header </v-header>
    <v-layout>
      <v-content> Content </v-content>
      <v-sider> Sider </v-sider>
    </v-layout>
    <v-footer> Footer </v-footer>
  </v-layout>

  <v-layout>
    <v-sider> Sider </v-sider>
    <v-layout>
      <v-header> Header </v-header>
      <v-content> Content </v-content>
      <v-footer> Footer </v-footer>
    </v-layout>
  </v-layout>
</template>

collapsed

<template>
  <Layout class="example">
    <Sider :collapsed="collapsed" class="sider"> Sider </Sider>
    <Layout>
      <Header class="header">
        <button @click="onCollapsed">{{ collapsed ? '>>' : '&lt;&lt;' }}</button>
        Header
      </Header>
      <Content class="content"> Content </Content>
      <Footer class="footer"> Footer </Footer>
    </Layout>
  </Layout>
</template>
<script>
import { defineComponent } from 'vue';
import { Layout, Header, Content, Footer, Sider } from '@uivjs/vue-layout';

export default {
  methods: {
    onCollapsed() {
      this.collapsed = !this.collapsed;
    },
  },
  data() {
    return {
      collapsed: false,
    };
  },
  components: {
    Layout, Header, Content, Footer, Sider
  },
};
</script>

Sider Props

Name | Type | Default | Description ---- | ---- | ---- | ---- collapsed | boolean | false | Current collapsed state

Development

npm install       # Installation dependencies
npm run bootstrap # Install dependencies in sub-packages
npm run build     # Compile package

# listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch     # Monitor the compiled package `@uivjs/vue-layout`
npm run start     # development mode, listen to compile preview website instance

License

Licensed under the MIT License.