# vue-layout

**Repository Path**: uivjs/vue-layout

## Basic Information

- **Project Name**: vue-layout
- **Description**: 处理页面整体布局的 Vue 3.0+ 组件。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://uivjs.gitee.io/vue-layout
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2021-12-16
- **Last Updated**: 2024-04-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vue3

## README

@uivjs/vue-layout
===

[![Build & Deploy](https://github.com/uivjs/vue-layout/actions/workflows/ci.yml/badge.svg)](https://github.com/uivjs/vue-layout/actions/workflows/ci.yml)
[![Downloads](https://img.shields.io/npm/dm/@uivjs/vue-layout.svg?style=flat)](https://www.npmjs.com/package/@uivjs/vue-layout)
[![npm version](https://img.shields.io/npm/v/@uivjs/vue-layout.svg)](https://www.npmjs.com/package/@uivjs/vue-layout)
[![npm unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uivjs/vue-layout/file/README.md)

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

## Install

```bash
npm i @uivjs/vue-layout
```

## Usage

```vue
<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>
```

```vue
<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

```vue
<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

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

```bash
# 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.