بنية Tabs ·
علامات تبويب بعناصر ومشغّلات مخصصة.
أساسي
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.tabs
class="tabs"
items={Corex.Content.new([
[label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."],
[label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."],
[label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."]
])}
/>
مع indicator
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.tabs
class="tabs"
indicator
items={Corex.Content.new([
[value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."],
[label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."],
[value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."]
])}
>
</.tabs>
متداخل
Outer content
Inner tabs
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.tabs class="tabs" value="outer-2">
<:trigger value="outer-1">Outer 1</:trigger>
<:trigger value="outer-2">Outer 2</:trigger>
<:content value="outer-1">
Outer content
</:content>
<:content value="outer-2">
<.tabs
class="tabs"
value="lorem"
items={Corex.Content.new([
%{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
/>
</:content>
</.tabs>