Use css grid to layout form
WangLarry opened this issue · comments
Is your feature request related to a problem? Please describe.
Current react-layout use Section and Box to align component, which is flexible. But I feel it is not Intuitive，specially Box nested Box in source code.
Describe the solution you'd like
Css grid is modern layout, which is intuitive and powerful. Specially grid-area is suit to layout form.
Describe alternatives you've considered
For example, we can define form layout like this:
// CSS
.container {
grid-template-areas:
"name name age age" // <<---------- define component occupy which cell, can span rows or cols
"phone phone " //
}
.name {
grid-area: name;
}
.age {
grid-area: age;
}
.phone {
grid-area: phone;
}
// JS
<Field id="name" className="name" />
<Field id="age" className="age" />
<Field id="phone" className="phone" />
...
Changing grid-template-areas will change layout. Grid-template-areas string is just like EXCEL, can span cols and rows, is very flexible.
@WangLarry
Thats a great idea and definitely more intuitive, thank you! :)
Let me check how we can offer a different / newer sections version based on grid.
we can have for example that each section will get content - array of strings (or array of arrays) instead of boxes like:
sections: [{
id: 'basic-info',
title: 'Basic Info',
content: [
"name name . . age age . .",
". . . . phone . . ."
],
}]
BTW - our advanced goal is to create also a Layout editor, where you will have all your defined fields in a list and you can drag & drop fields to some area - to create different layouts, and behind the scene it will translate to the sections json.
We had this feature in a prior version of Jafar in our portal, and it was very useful for non UI developers - such as backend devs or product manages to create different layouts for the same form based on user role / permissions.
For example - one set of user can get a different layout that another set of users (different sections and fields order) - but both based on the same form model fields. :)
pr - #65
demo - https://yahoo.github.io/jafar/demo-react-layout.html#/item/sections-grid/html
available on v1.0.7
Beautiful and elegant! @galhavivi
Maybe It looks pleasant to get rid of 'getGrid()' in array?
grid: [
'firstName lastName .',
'personalId address .',
],
...
sections.map(section => ({...section, grid: getGrid(section.grid)})
Oh, current syntax can style every row.
I agree its more clean :) and when I'll use it ill probably do like you suggested... but i think it might be better to keep the demo with the getGrid so it will be more clear to people that the grid configuration is an object of { templateAreas, elements } - rather than array (they might miss the last row of sections.map if well change it)
Maybe we should show the feature of gird - can span rows. For example:
grid: getGrid([
'department benefits . ',
'level benefits . ',
]),
Not sure i understand what you meant ..?
like this?
'benefits' can occupy two rows. See my updated picture
done :) i was slow here lol