الكود · النمط البصري

    <.menu class="menu" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Default</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu menu--accent" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Accent</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu menu--brand" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Brand</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu menu--alert" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Alert</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu menu--info" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Info</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu menu--success" value="menu" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>Success</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>

  

    <.menu class="menu menu--sm" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>SM</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu menu--md" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>MD</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu menu--lg" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>LG</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>
<.menu class="menu menu--xl" items={[
      %Corex.Tree.Item{value: "menu", label: "Menu"},
      %Corex.Tree.Item{value: "combobox", label: "Combobox"},
      %Corex.Tree.Item{value: "select", label: "Select"}
    ]}>
  <:trigger>XL</:trigger>
  <:indicator><.heroicon name="hero-chevron-down" /></:indicator>
</.menu>