Separator
The separator is a proton whose only task is to insert a horizontal line separating two elements if we don't want to use divide class from Tailwind. The line has sizes defining the 'margin' line relative to the elements it separates.
SeparatorBosons
Size
Separator size.
type:
stringdefault:
mdvalues:
xs, sm, md, lg, xlExample
Default using of separator
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin magna mi, mattis sed sollicitudin rhoncus, hendrerit sed neque. Donec euismod hendrerit lobortis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin magna mi, mattis sed sollicitudin rhoncus, hendrerit sed neque. Donec euismod hendrerit lobortis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin magna mi, mattis sed sollicitudin rhoncus, hendrerit sed neque. Donec euismod hendrerit lobortis.
1// Default separator (above example)
2
3<div class="flex w-full flex-col">
4 <div>
5 Lorem ipsum dolor sit amet, consectetur ...
6 </div>
7 @protons.Separator(&protons.SeparatorBosons{})
8 <div>
9 Lorem ipsum dolor sit amet, consectetur ...
10 </div>
11 @protons.Separator(
12 &protons.SeparatorBosons{
13 Size: "xl",
14 },
15 )
16 <div>
17 Lorem ipsum dolor sit amet, consectetur ...
18 </div>
19</div>