علامات التبويب · النمط البصري

    <.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."}
])} />
<.tabs class="tabs tabs--accent" 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."}
])} />
<.tabs class="tabs tabs--brand" 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."}
])} />
<.tabs class="tabs tabs--alert" 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."}
])} />
<.tabs class="tabs tabs--info" 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."}
])} />
<.tabs class="tabs tabs--success" 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."}
])} />

  

    <.tabs class="tabs tabs--sm" 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."}
])} />
<.tabs class="tabs tabs--md" 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."}
])} />
<.tabs class="tabs tabs--lg" 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."}
])} />
<.tabs class="tabs tabs--xl" 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."}
])} />

  

    <.tabs class="tabs tabs--text-sm" 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."}
])} />
<.tabs class="tabs tabs--text-xl" 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."}
])} />
<.tabs class="tabs tabs--text-2xl" 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."}
])} />
<.tabs class="tabs tabs--text-4xl" 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."}
])} />

  

    <.tabs class="tabs tabs--rounded-none" 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."}
])} />
<.tabs class="tabs tabs--rounded-md" 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."}
])} />
<.tabs class="tabs tabs--rounded-lg" 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."}
])} />
<.tabs class="tabs tabs--rounded-xl" 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."}
])} />
<.tabs class="tabs tabs--rounded-full" 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."}
])} />

  

    <.tabs class="tabs max-w-2xs" 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."}
])} />
<.tabs class="tabs max-w-md" 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."}
])} />
<.tabs class="tabs max-w-xl" 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."}
])} />
<.tabs class="tabs max-w-2xl" 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."}
])} />