بنية صندوق التحرير والسرد

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select a country", empty: "No results"}}
  items={Corex.List.new([
    %{label: "France", value: "fra"},
    %{label: "Belgium", value: "bel"},
    %{label: "Germany", value: "deu"},
    %{label: "Netherlands", value: "nld"},
    %{label: "Switzerland", value: "che"},
    %{label: "Austria", value: "aut"}
  ])}
>
  <:trigger>
    <.heroicon name="hero-chevron-down" />
  </:trigger>
</.combobox>

  

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select a country", empty: "No results"}}
  items={Corex.List.new([
    %{label: "France", value: "fra"},
    %{label: "Belgium", value: "bel"},
    %{label: "Germany", value: "deu"},
    %{label: "Netherlands", value: "nld"},
    %{label: "Switzerland", value: "che"},
    %{label: "Austria", value: "aut"}
  ])}
>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" /></:clear_trigger>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.combobox>

  

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select a country", empty: "No results"}}
  items={Corex.List.new(items_minimal())}
>
  <:empty>No results</:empty>
  <:label>Country</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
  <:item_indicator><.heroicon name="hero-check" class="icon" /></:item_indicator>
</.combobox>

  

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select a country", empty: "No results"}}
  items={Corex.List.new([
    %{label: "France", value: "fra", group: "Europe"},
    %{label: "Belgium", value: "bel", group: "Europe"},
    %{label: "Germany", value: "deu", group: "Europe"},
    %{label: "Netherlands", value: "nld", group: "Europe"},
    %{label: "Switzerland", value: "che", group: "Europe"},
    %{label: "Austria", value: "aut", group: "Europe"},
    %{label: "Japan", value: "jpn", group: "Asia"},
    %{label: "China", value: "chn", group: "Asia"},
    %{label: "South Korea", value: "kor", group: "Asia"},
    %{label: "Thailand", value: "tha", group: "Asia"},
    %{label: "USA", value: "usa", group: "North America"},
    %{label: "Canada", value: "can", group: "North America"},
    %{label: "Mexico", value: "mex", group: "North America"}
  ])}
>
  <:trigger>
    <.heroicon name="hero-chevron-down" />
  </:trigger>
</.combobox>

  

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select a country", empty: "No results"}}
  items={Corex.List.new([
    %{label: "France", value: "fra"},
    %{label: "Belgium", value: "bel"},
    %{label: "Germany", value: "deu"},
    %{label: "Netherlands", value: "nld"},
    %{label: "Switzerland", value: "che"},
    %{label: "Austria", value: "aut"}
  ])}
>
  <:item :let={item}>
    <% Code.ensure_loaded!(Flagpack) %>
    <Flagpack.flag name={String.to_existing_atom(to_string(item.value))} />
    {item.label}
  </:item>
  <:trigger>
    <.heroicon name="hero-chevron-down" />
  </:trigger>
  <:clear_trigger>
    <.heroicon name="hero-backspace" />
  </:clear_trigger>
  <:item_indicator>
    <.heroicon name="hero-check" />
  </:item_indicator>
</.combobox>

  

    <.combobox
  class="combobox"
  translation={%Corex.Combobox.Translation{placeholder: "Select a country", empty: "No results"}}
  items={Corex.List.new([
    %{label: "France", value: "fra", group: "Europe"},
    %{label: "Belgium", value: "bel", group: "Europe"},
    %{label: "Germany", value: "deu", group: "Europe"},
    %{label: "Japan", value: "jpn", group: "Asia"},
    %{label: "China", value: "chn", group: "Asia"},
    %{label: "South Korea", value: "kor", group: "Asia"}
  ])}
>
  <:item :let={item}>
    <% Code.ensure_loaded!(Flagpack) %>
    <Flagpack.flag name={String.to_existing_atom(to_string(item.value))} />
    {item.label}
  </:item>
  <:trigger>
    <.heroicon name="hero-chevron-down" />
  </:trigger>
  <:clear_trigger>
    <.heroicon name="hero-backspace" />
  </:clear_trigger>
  <:item_indicator>
    <.heroicon name="hero-check" />
  </:item_indicator>
</.combobox>