Border Titles
To add title text to a border,
use an absolutely-positioned Text
inside a Div that provides the border,
inset by -1 onto the border's row.
Give the title clip_to_border.
A box that hides its overflow, as every fill(1) and other constraint item does,
clips its children to its padding box, which would erase a title on its border.
clip_to_border clips the title to the border box instead
(see Drawing on the parent's border).
@component
def root() -> Div:
return Div(
style=col,
children=(
Div(
style=row | fill(1) | center_children | border | border_lightrounded | pad(1),
children=(
Text(
style=position_absolute | inset_left(1) | inset_top(-1) | clip_to_border,
content=" Top-Left Title ",
),
Text(
style=inset_top_center | inset_top(-1) | clip_to_border,
content=" Top-Center Title ",
),
Text(
style=position_absolute | inset_top(-1) | inset_right(1) | clip_to_border,
content=" Top-Right Title ",
),
Text(
style=position_absolute | inset_bottom(-1) | inset_left(1) | clip_to_border,
content=" Bottom-Left Title ",
),
Text(
style=inset_bottom_center | inset_bottom(-1) | clip_to_border,
content=" Bottom-Center Title ",
),
Text(
style=position_absolute | inset_bottom(-1) | inset_right(1) | clip_to_border,
content=" Bottom-Right Title ",
),
Text(
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
),
),
),
),
)
