Open Enyium opened 3 weeks ago
This is my take on it:
component SeparatorLine {
in property <Orientation> orientation: horizontal;
property <length> overall-thickness: max(10px, 1phx);
property <length> line-thickness: max(1.2px, 1phx);
states [
horizontal when orientation == Orientation.horizontal : {
root.min-height: root.overall-thickness;
line-rectangle.height: root.line-thickness;
line-rectangle.width: root.width;
root.horizontal-stretch: 100%;
root.vertical-stretch: 0%;
}
vertical when orientation == Orientation.vertical : {
root.min-width: root.overall-thickness;
line-rectangle.width: root.line-thickness;
line-rectangle.height: root.height;
root.vertical-stretch: 100%;
root.horizontal-stretch: 0%;
}
]
line-rectangle := Rectangle {
background: Palette.border;
border-radius: root.line-thickness / 2;
}
}
Feel free to use the code as you wish.
In my app, I have a
GroupBox
, and inside of it aGridBox
with labels, check boxes and text boxes. Some check boxes havecolspan: 2
, so are alone on the row. Because the last check box isn't persisted with the rest of theGroupBox
's settings and is only in theGroupBox
because it's functionally related, I thought that a separator line above the last check box would be appropriate.Since a homemade
Rectangle
- orPath
-based separator line may not look as sophisticated in every widget style/theme, and this use case should be easy as pie for the user, a new simple widget may be justified - possibly namedSeparator
orSeparatorLine
.Button
s).1phx
.Palette.border
(an example of a non-solid-color separator would be one with a gradient from transparent over a color with some contrast to transparent).Prior art: HTML's
<hr>
and Markdown's---
.