@sneverton/vue-grid NPM

Introdução

Plugin Vue de componentes para utilizar Grid Layout.

Instalar

yarn add @sneverton/vue-grid

import { createApp } from 'vue'
import VueGrid from "@sneverton/vue-grid";

const app = createApp({})

app.use(VueGrid)

Componentes

Todas as propiedades dos componentes podem ser utilizadas com pontos de interrupção adicionando -{breakpoint} no final para sm, md, lg e xl.

Exemplo:

<grid-container cols="auto" cols-sm="auto max-content"></grid-container>

`GridContainer`

Nome	Tipo
areas	string
cols	number \| (string \| number)[] \| string"
rows	number \| (string \| number)[] \| string
gap	number \| string
justify	"flex-start" \| "flex-end" \| "center" \| "space-between" \| "space-around"
alignItems	"flex-start" \| "flex-end" \| "center" \| "baseline" \| "stretch"
alignContent	"flex-start" \| "flex-end" \| "center" \| "space-between" \| "space-around" \| "stretch"
autoRows	number \| (string \| number)[] \| string
autoCols	number \| (string \| number)[] \| string
autoFlow	string;

`GridList`

Nome	Tipo
itemWidth	number \| string
itemHeight	number \| string
gap	number \| string
justify	"flex-start" \| "flex-end" \| "center" \| "space-between" \| "space-around"
alignItems	"flex-start" \| "flex-end" \| "center" \| "baseline" \| "stretch"
alignContent	"flex-start" \| "flex-end" \| "center" \| "space-between" \| "space-around" \| "stretch"

`GridItem`

Nome	Tipo
area	number \| (string \| number)[] \| string
col	number \| (string \| number)[] \| string
row	number \| (string \| number)[] \| string
colStart	number \| string
colEnd	number \| string
rowStart	number \| string
rowEnd	number \| string
alignSelf	"flex-start" \| "flex-end" \| "center" \| "baseline" \| "auto" \| "stretch"

@infinitebrahmanuniverse/nolb-_sne @everything-registry/sub-chunk-847 @zalastax/nolb-_sne

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago