Vue smarter layout components. Based on css flexbox. Support responsive design, server side render. 5 KB gzipped.

Overview

vue-colrow

Smarter layout components. Based on css flexbox. Support responsive design, server side render. 3 KB gzipped. Document. It also has a React + Typescript version: react-colrow

更智能的布局组件. 基于css flexbox. 支持响应式布局, 服务端渲染. 5 KB gzipped. 文档. 还有React + Typescript的版本: react-colrow

It includes 3 components: Row, Col, BreakRow. Follow is a demo with Vuetify:

image

In small screen: image

It is easy:

<Row>
  <Col :width="300"><Card1 /></Col>
  <Col grow :xs="1">
    <Row>
      <Col :width="1/3" :xs="1/2">
        <label>First Name</label><v-text-field solo></v-text-field>
      </Col>
      <Col :width="1/3" :xs="1/2">
        <label>Last Name</label><v-text-field solo></v-text-field>
      </Col>
      <Col :width="1/3" :xs="1">
        <label>Email</label><v-text-field solo></v-text-field>
      </Col>
      <Col :width="3/5" :xs="1">
        <label>Website</label><v-text-field solo></v-text-field>
      </Col>
      <Col :width="2/5" :xs="1">
        <label>Title</label><v-text-field solo></v-text-field>
      </Col>
      <Col>
        <label>About</label><v-textarea solo></v-textarea>
      </Col>
    </Row>
  </Col>
</Row>

Demo 2: Responsive card list with gutter

image

<Row>
  <Col :xl="1/5" :lg="1/4" :md="1/3" :sm="1/2" :xs="1" v-for="i in 23" :key="i+'card'"><Card1 /></Col>
</Row>

License

MIT

Owner
Xinxin
I am a js, python, php developer. I live in the hometown of pandas.
Xinxin
Vue Layout System is a pack of Vue components that solve daily layout problems.

A pack of Vue components that solve daily layout problems

boyin.lee 8 Jul 2, 2021
Vue Layout System is a pack of Vue components that solve daily layout problems.

Vue Layout System is a pack of Vue components that solve daily layout problems.

boyin.lee 6 May 30, 2021
Default layout or create custom layouts for the pages of your Vue.js SPA (Multiple layouts)

vue-extend-layout A simple extend the default layout or create custom layouts for your SPA Vue.js, using dynamic import component. For vue-extend-layo

Alan Ktquez 132 May 20, 2021
Vue smarter layout components. Based on css flexbox. Support responsive design, server side render. 5 KB gzipped.

vue-colrow Smarter layout components. Based on css flexbox. Support responsive design, server side render. 3 KB gzipped. Document. It also has a React

Xinxin 6 Apr 21, 2021
A VueJS flexbox partitionable layout

A VueJS flexbox partitionable layout

José Porto 1 Aug 30, 2020
Responsive grid system based on Bootstrap for Vue

Vue Grid Responsive Responsive grid system based on Bootstrap for Vue. • • Installation NPM vue 2.0 npm i vue-grid-responsive // OR yarn add vue-grid-

André Lins 17 Jun 20, 2021
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

JBay Solutions 4.8k Jul 22, 2021
🗃️Smart widget is a flexible and extensible content container component for Vue2.x.

vue-smart-widget Smart widget is a flexible and extensible content container component. It includes header and body part, and widget body includes edi

Yunwei Xiao 73 Jul 15, 2021
Responsive, Draggable & Resizable Dashboard (Grid) for Vue

vue-responsive-dash A Responsive, Draggable & Resizable Dashboard (grid) made with vue and typescript. Inspired by React-Grid-Layout & Vue-Grid-Layout

Ben Sladden 154 Jul 23, 2021
A reusable flexbox component using functional css and functional Vue components.

vue-flex A Vue.js functional component to wrap anything in flexbox. (1.8kb gzipped js+css, or 1.2k js & .6k css) Getting Started import Vue from "vue"

Alex Regan 61 Mar 1, 2021
A Vue plugin to quickly generate a webapplication layout.

vue-ads-layout This is a vue component library to create a default web application layout. You can create a toolbar, footer, left and right drawers. A

Arne De Smedt 29 Nov 30, 2020
Flexbox based responsive fraction grid system

vue-fraction-grid Flexbox based responsive fraction grid system for Vue.js Live Demo and Full Documentation <container> <grid vertical="middle" :rwd

Bartłomiej Kozal 88 May 7, 2021
Starter responsive dashboard layout built with tailwindcss & vue 3 (vitejs)

Starter Responsive Dashboard Layout Starter responsive dashboard layout built with tailwindcss & vue 3 (vitejs) See live Another projects Alpine versi

Ahmed Kamel 12 Jun 9, 2021
Vue.js Masonry layout component powered by CSS, dependancy free

A new masonry component powered by CSS to be fast loading and free of jQuery or other dependencies. Build specifically for Vue.js projects. ?? Why? Ex

Paul Collett 402 Jul 20, 2021