5 ms·
This article is not advocating using spacer components like so: <MyComponent></MyComponent> <div class="spacer"></div> <MyComponent></MyComponent> They
by __ryan__ 7y ago
This article is not advocating using spacer components like so:
<MyComponent></MyComponent>
<div class="spacer"></div>
<MyComponent></MyComponent>
They are describing using layout components to define how children should be oriented and spaced.
The article's example:
<Stack space={3}>
<Item />
<Item />
<Item />
</Stack>
Would be basically equivalent to this:
<style>
.layout-space-3 {
> * {
margin: 6px; // Or whatever spacing value to use
}
}
</style>
<div class="layout-space-3">
<Item />
<Item />
<Item />
</div>
- tylerchilds 7y agoeven better: Stack { display: grid; gap: 6px; } https://codepen.io/tychi-nflx/pen/OJVBZzV https://codepen.io/tychi-nflx/pen/OJVBZzV
- pikelet 7y agoThank you! There are so many knee jerk reactions here which completely miss the point of the article (especially the post about images as spacers). It's not really anything new, wildly complex, or hacky. It doesn't even require components or a frontend framework, it's just a good way to structure your code.
- dpc_pw 7y agoThis should be the top comment. It makes a lot of sense. Margin should be a property of the enclosing container, not the items in it.
- longnguyen 7y agoIn QML/QtQuick, the Positioner does exactly this[1] [1]: https://doc.qt.io/qt-5/qml-qtquick-column.html#spacing-prop https://doc.qt.io/qt-5/qml-qtquick-column.html#spacing-prop