noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Head a group with M3's divider-with-subheader

Browse Source 
Plan step 23, containment.md § Missing ("Divider: the divider-with-text /
subheader configuration"). `<x-divider text="…">` draws the label at the
start and the rule running on from it, with the divider specs table's
geometry: 4dp between the words and the rule, 8dp right margin, 8dp
bottom margin. The label is M3's subhead — title-small in
on-surface-variant, the only subhead type M3 publishes (the rich
tooltip's specs), since the divider page names none. The words stay text
naming the group; only the rule is the separator.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 07:15:33 +02:00
co-authored by Claude Opus 5
parent bb9473b0b2
commit a54f79a085
4 changed files with 71 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/divider.blade.php
+38 -12
View File
@@ -2,23 +2,49 @@
Horizontal by default; `vertical` stands it between items in a row (give the row a height).
`inset` indents it from the start by 16px, as under a list's leading icon; `middle` from both
ends. It is `role="separator"`; with `decorative` it is hidden from assistive tech. --}}
ends. It is `role="separator"`; with `decorative` it is hidden from assistive tech.
`text` is the divider with a subheader, as M3 draws it to head a group in a list or a menu:
the label at the start and the rule running on from it. The divider specs table gives the
geometry — "space between divider & supporting text 4dp", "divider right margin 8dp",
"divider bottom margin 8dp" — so the rule starts 4px after the words, stops 8px short of the
end and leaves 8px under the row. The label is M3's subhead: title-small in
on-surface-variant, the type the rich tooltip's specs give a subhead, since the divider's own
page names none (docs/reference/m3/components-actions-communication-containment.md
§ Divider → Specs, § Tooltips → Specs). The words stay readable text that names the group
after them; only the rule is the separator, and `decorative` hides the rule and leaves the
words. `text` is for a horizontal divider; a vertical one ignores it. --}}
@props([
'vertical' => false,
'inset' => false,
'middle' => false,
'decorative' => false,
'text' => null,
])
<div
@if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="{{ $vertical ? 'vertical' : 'horizontal' }}" @endif
{{ $attributes->class([
'shrink-0 bg-outline-variant',
'h-px w-auto' => ! $vertical,
'w-px self-stretch' => $vertical,
'ms-4' => $inset && ! $vertical,
'mx-4' => $middle && ! $vertical,
'my-2' => $middle && $vertical,
]) }}
></div>
@if (filled($text) && ! $vertical)
<div {{ $attributes->class([
'flex shrink-0 items-center gap-1 pb-2',
'ms-4' => $inset,
'mx-4' => $middle,
]) }}>
<span class="shrink-0 type-title-sm text-on-surface-variant">{{ $text }}</span>
<div
@if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="horizontal" @endif
class="me-2 h-px min-w-0 flex-1 bg-outline-variant"
></div>
</div>
@else
<div
@if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="{{ $vertical ? 'vertical' : 'horizontal' }}" @endif
{{ $attributes->class([
'shrink-0 bg-outline-variant',
'h-px w-auto' => ! $vertical,
'w-px self-stretch' => $vertical,
'ms-4' => $inset && ! $vertical,
'mx-4' => $middle && ! $vertical,
'my-2' => $middle && $vertical,
]) }}
></div>
@endif