v-row & v-col

Question

v-row & v-col

eschirtz opened this issue 5 years ago · comments

Hey, trying to upgrade to Vuetify 2.0.0 and I've installed eslint-plugin-vuetify via npm. When I add the rules vuetify/no-legacy-grid, my v-flex/v-layout tags are corrected to use v-col and v-row. However, I can't seem to find anything about these two new tags in the docs? Is this a future feature that hasn't yet been implemented in the latest release of Vuetify?

Thanks!

Eric Schirtzinger · Answer 1 · Thu Jul 25 2019 03:47:43 GMT+0800 (China Standard Time)

Just saw the footnote about documentation not being updated. I will look in the API explorer.

Kael · Answer 2 · Thu Jul 25 2019 09:20:10 GMT+0800 (China Standard Time)

Yeah it's been implemented, I just wrote this plugin before documentation so it's all a bit hard to actually use right now. The previous grid system will keep working if you just disable the two grid rules, and you can turn them back on once the documentation is done.

Eric Schirtzinger · Answer 3 · Thu Jul 25 2019 10:13:50 GMT+0800 (China Standard Time)

That makes total sense, so far the plug-in has been working like a charm. Great work!

HG · Answer 4 · Tue Jul 30 2019 08:45:35 GMT+0800 (China Standard Time)

I lost all paddings and margins with V-row and V-col in mobile and there is no single example or documentation I could refer to in order to find a solution

Simon · Answer 5 · Tue Jul 30 2019 14:24:58 GMT+0800 (China Standard Time)

Same issue here, paddings and margins are way of compared to v-layout / v-flex. Assuming this will be fixed by the time it reaches official Vuetify documentation. Until then I'd recommend sticking with 'legacy'.

Eric Schirtzinger · Answer 6 · Tue Jul 30 2019 22:07:24 GMT+0800 (China Standard Time)

One thing you should be sure to do is use the Regex expressions in the migration guide to change the margins/paddings to their new equivalent values.

find: ([\s"][mp][axytblr])-5
replace: $1-12

find: ([\s"][mp][axytblr])-4
replace: $1-6

find: ([\s"][mp][axytblr])-3
replace: $1-4

When I first let the linter change everything my margins/paddings we're all off, but after this step everything went back to normal!

horaciosolorio · Answer 7 · Wed Jul 31 2019 21:57:37 GMT+0800 (China Standard Time)

I use eslint-plugin-vuetify to update from 1.5 and all was replaced but for the below code don't

v-layout
column
align-center

and linter show error in "column".

I replace with:
v-col aling-self="center"

But my component is broken , i don't understand what is the correct way to use the new grind system, could you help me with some example , still i can see de documentation updated

I was using the column approche in all my proyect and now its broken.
Can you help please.

Ben Richter · Answer 8 · Tue Aug 06 2019 18:14:34 GMT+0800 (China Standard Time)

@horaciosolorio v-layout must be replaced by v-row.
If you search in https://vuetifyjs.com/en/components/api-explorer for v-col you find a list with its props, but without description yet. I guess the column direction has been dropped because it's not part of the bootstrap 4 grid.

abelit · Answer 9 · Sat Dec 14 2019 00:56:25 GMT+0800 (China Standard Time)

Maybe vuetify should add draggable and resizable on element base on vuetify especally v-row or v-col grid element,just as "jbaysolutions/vue-grid-layout".