组件

下拉菜单

用最简的语义化 HTML 创建下拉菜单与自定义选择框，无需 JavaScript。

下拉菜单以 <details class="dropdown"> 作为包裹容器，<summary> 与 <ul> 作为它的直接子元素。除非位于 Nav 中，下拉菜单默认为 width: 100%;。

下拉菜单在无类版本中不可用。

为了与表单元素保持样式一致，下拉菜单默认按 select 的样式呈现。

查看源码

<!-- Dropdown -->
<details class="dropdown">
<summary>Dropdown</summary>
<ul>
  <li><a href="#">Solid</a></li>
  <li><a href="#">Liquid</a></li>
  <li><a href="#">Gas</a></li>
  <li><a href="#">Plasma</a></li>
</ul>
</details>

<!-- Select -->
<select name="select" aria-label="Select" required>
<option selected disabled value="">Select</option>
<option>Solid</option>
<option>Liquid</option>
<option>Gas</option>
<option>Plasma</option>false
</select>

带复选框与单选按钮的下拉菜单

下拉菜单可以配合 <input type="radio"> 或 <input type="checkbox"> 作为自定义选择框使用。

查看源码

<!-- Radios -->
<details class="dropdown">
<summary>
  Select a phase of matter...
</summary>
<ul>
  <li>
    <label>
      <input type="radio" name="phase" value="solid" />
      Solid
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="phase" value="liquid" />
      Liquid
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="phase" value="gas" />
      Gas
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="phase" value="plasma" />
      Plasma
    </label>
  </li>
</ul>
</details>

<!-- Checkboxes -->
<details class="dropdown">
<summary>
  Select phases of matter...
</summary>
<ul>
  <li>
    <label>
      <input type="checkbox" name="solid" />
      Solid
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="liquid" />
      Liquid
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="gas" />
      Gas
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="plasma" />
      Plasma
    </label>
  </li>
</ul>
</details>

Pico 不包含 JavaScript 代码。要与这些自定义下拉菜单交互，你多半需要自行编写一些 JavaScript。

按钮变体

<summary role="button"> 可以把下拉菜单变成按钮。

查看源码

<details class="dropdown">
<summary role="button">
  Dropdown as a button
</summary>
<ul>
  ...
</ul>
</details>

与普通按钮一样，它们带有 .secondary、.contrast 和 .outline 变体（无类版本中不可用）。

查看源码

<!-- Primary -->
<details class="dropdown">
<summary role="button">
  Primary
</summary>
<ul>
  ...
</ul>
</details>

<!-- Secondary -->
<details class="dropdown">
<summary role="button" class="secondary">
  Secondary
</summary>
<ul>
  ...
</ul>
</details>

<!-- Contrast -->
<details class="dropdown">
<summary role="button" class="contrast">
  Contrast
</summary>
<ul>
  ...
</ul>
</details>

<!-- Primary outline -->
<details class="dropdown">
<summary role="button" class="outline">
  Primary outline
</summary>
<ul>
  ...
</ul>
</details>

<!-- Secondary outline -->
<details class="dropdown">
<summary role="button" class="outline secondary">
  Secondary outline
</summary>
<ul>
  ...
</ul>
</details>

<!-- Contrast outline -->
<details class="dropdown">
<summary role="button" class="outline contrast">
  Contrast outline
</summary>
<ul>
  ...
</ul>
</details>

校验状态

与所有表单元素一样，校验状态通过 aria-invalid 来标记。

查看源码

<details class="dropdown">
<summary aria-invalid="false">
  Valid phase of matter: Solid
</summary>
<ul>
  ...
</ul>
</details>

<details class="dropdown">
<summary aria-invalid="true">
  Debated classification: Plasma
</summary>
<ul>
  ...
</ul>
</details>

与 Nav 搭配使用

你可以在 Nav 内使用下拉菜单。

要改变子菜单的对齐方向，只需使用 <ul dir="rtl">。

查看源码

<nav>
<ul>
  <li><strong>Acme Corp</strong></li>
</ul>
<ul>
  <li><a href="#" class="secondary">Services</a></li>
  <li>
    <details class="dropdown">
      <summary>
        Account
      </summary>
      <ul dir="rtl">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Security</a></li>
        <li><a href="#">Logout</a></li>
      </ul>
    </details>
  </li>
</ul>
</nav>