تنسيق Select ·
ألوان دلالية وكثافة وطباعة ونصف قطر وعرض عبر فئات المعدّل على جذر القائمة المنسدلة.
اللون
Default
- France
- Belgium
- Germany
Accent
- France
- Belgium
- Germany
Brand
- France
- Belgium
- Germany
Alert
- France
- Belgium
- Germany
Info
- France
- Belgium
- Germany
Success
- France
- Belgium
- Germany
<.select class="select" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
<:label>Default</:label>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--accent" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
<:label>Accent</:label>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--brand" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
<:label>Brand</:label>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--alert" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
<:label>Alert</:label>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--info" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
<:label>Info</:label>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--success" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
<:label>Success</:label>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
الحجم
- France
- Belgium
- Germany
- France
- Belgium
- Germany
- France
- Belgium
- Germany
- France
- Belgium
- Germany
<.select class="select select--sm" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--lg" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
نص
- France
- Belgium
- Germany
- France
- Belgium
- Germany
- France
- Belgium
- Germany
- France
- Belgium
- Germany
<.select class="select select--text-sm" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--text-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--text-2xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--text-4xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
نصف القطر
- France
- Belgium
- Germany
- France
- Belgium
- Germany
- France
- Belgium
- Germany
- France
- Belgium
- Germany
- France
- Belgium
- Germany
<.select class="select select--rounded-none" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--rounded-md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--rounded-lg" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--rounded-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select select--rounded-full" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
أقصى عرض
- France
- Belgium
- Germany
- France
- Belgium
- Germany
- France
- Belgium
- Germany
- France
- Belgium
- Germany
<.select class="select max-w-2xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select max-w-md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select max-w-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select max-w-2xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>