vue-colrow

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 8 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-colrow
Smarter layout components. Based on css flexbox. Support responsive design, server side render. 3 KB gzipped. [Document](https://vue-colrow.phphe.com). It also has a React + Typescript version: [react-colrow](https://github.com/phphe/react-colrow)

更智能的布局组件. 基于css flexbox. 支持响应式布局, 服务端渲染. 5 KB gzipped. [文档](https://vue-colrow.phphe.com/zh). 还有React + Typescript的版本: [react-colrow](https://github.com/phphe/react-colrow)

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

![image](https://github.com/phphe/vue-colrow/blob/master/public/colrow-form.png?raw=true)

In small screen: ![image](https://github.com/phphe/vue-colrow/blob/master/public/colrow-form-xs.png?raw=true)

It is easy:
```html
<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](https://github.com/phphe/vue-colrow/blob/master/public/colrow-list.png?raw=true)
```html
<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](http://opensource.org/licenses/MIT)

vue-colrow

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README