https://github.com/terryz/v-layouts

Web page layouts for vue3
https://github.com/terryz/v-layouts

accordion layout panel-group

Last synced: 4 months ago
JSON representation

Web page layouts for vue3

• Host: GitHub
• URL: https://github.com/terryz/v-layouts
• Owner: TerryZ
• License: mit
• Created: 2024-08-06T04:10:47.000Z (almost 2 years ago)
• Default Branch: dev
• Last Pushed: 2024-08-25T08:44:33.000Z (almost 2 years ago)
• Last Synced: 2025-10-23T15:49:08.508Z (9 months ago)
• Topics: accordion, layout, panel-group
• Language: JavaScript
• Homepage: https://terryz.github.io/docs-vue3/layout/
• Size: 231 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG-CN.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# [v-layouts](https://terryz.github.io/docs-vue3/layout/)

[![CircleCI](https://circleci.com/gh/TerryZ/v-layouts/tree/main.svg?style=svg)](https://circleci.com/gh/TerryZ/v-layouts/tree/main)

[![code coverage](https://codecov.io/gh/TerryZ/v-layouts/branch/main/graph/badge.svg)](https://codecov.io/gh/TerryZ/v-layouts)

[![npm version](https://img.shields.io/npm/v/v-layouts.svg)](https://www.npmjs.com/package/v-layouts)

[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/)

[![npm](https://img.shields.io/npm/dy/v-layouts.svg)](https://www.npmjs.com/package/v-layouts)

Web page layout collection for **Vue3**

## Examples and Documentation

Documentation and examples please visit below sites

- [Github pages](https://terryz.github.io/docs-vue3/layout/)

### Layout and modules diagram

admin classic layout

![admin-classic](assets/admin-classic.svg)

content press layout

![content-press](assets/content-press.svg)

panel group modules

![panel-group](assets/panel-group.svg)

## Installation

```sh

# npm

npm i v-layouts

# yarn

yarn add v-layouts

# pnpm

pnpm add v-layouts

```

## Usage

### LayoutAdminClassic

```vue

  

    

      Header

    

    

      Aside

    

    

      Breadcrumb

    

    

      Footer

    

    
Main content

  


import { LayoutAdminClassic } from 'v-layouts'

```

### Panel group

```vue

  

    

      

      panel 1 header

      

      panel 1 content

    

    

      

      panel 2 header

      

      panel 2 content

    

  

import { PanelGroup, PanelItem } from 'v-layouts'

```