Меню выбора Primer CSS Borderless

На чтение 6 мин Просмотров 54 Опубликовано 27.04.2022

Primer CSS предлагает меню выбора, которое имеет превосходную помощь для фильтрации, навигации и т. д. В этой статье мы обсудим меню выбора без полей. Select Menu Borderless использует класс SelectMenu-list–borderless для удаления границ между различными элементами списка.

Класс Prime CSS Borderless:

SelectMenu-list–borderless:этот класс используется для удаления границ между различными элементами списка.

Синтаксис:

<details class="details-reset details-overlay">
  <summary class="btn" aria-haspopup="true">
    ...
  </summary>
  <div class="SelectMenu">
    <div class="SelectMenu-modal">
      <div class="SelectMenu-list SelectMenu-list--borderless">
        <button class="SelectMenu-item" role="menuitem">...</button>
        ...
      </div>
    </div>
  </div>
</details>

Пример 1. Пример ниже иллюстрирует использование Primer CSS Borderless с использованием класса SelectMenu-list–borderless.

HTML

<!DOCTYPE html>

<html>

<head>

  <title> Primer CSS Select Menu Borderless </title>

  <link rel="stylesheet" href=

"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />

</head>

<body style="margin-inline: 10rem;">

  <div class="mt-5">

    <h1 class="color-fg-success"> GeeksforGeeks </h1>

    <h3> Primer CSS Select Menu Borderless </h3>



    <details class="details-reset details-overlay mt-3">

      <summary class="btn" aria-haspopup="true">

        Choose any course

      </summary>

      <div class="SelectMenu ">

        <div class="SelectMenu-modal">

          <div class="SelectMenu-list

             SelectMenu-list--borderless">

            <button class="SelectMenu-item"

              role="menuitem">

              DSA

            </button>

            <button class="SelectMenu-item"

              role="menuitem">

              Operating System

            </button>

            <button class="SelectMenu-item"

              role="menuitem">

              DBMS

            </button>

          </div>

        </div>

      </div>

    </details>

  </div>

</body>

</html>

Выход:

Читайте также: Malloc в C

Меню выбора Primer CSS без полей

Пример 2. Пример ниже иллюстрирует использование Primer CSS Borderless без использования класса SelectMenu-list–borderless.

HTML

<!DOCTYPE html>

<html>

<head>

  <title> Primer CSS Select Menu Borderless </title>

  <link rel="stylesheet" href=

"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />

</head>

<body style="margin-inline: 10rem;">

  <div class="mt-5">

    <h1 class="color-fg-success"> GeeksforGeeks </h1>

    <h3> Primer CSS Select Menu Borderless </h3>



    <details class="details-reset details-overlay mt-3">

      <summary class="btn" aria-haspopup="true">

        Choose any course

      </summary>

      <div class="SelectMenu ">

        <div class="SelectMenu-modal">

          <div class="SelectMenu-list

             SelectMenu-list--borderless">

            <button class="SelectMenu-item"

              role="menuitem">

              DSA

            </button>

            <button class="SelectMenu-item"

              role="menuitem">

              Operating System

            </button>

            <button class="SelectMenu-item"

              role="menuitem">

              DBMS

            </button>

          </div>

        </div>

      </div>

    </details>

  </div>

</body>

</html>

Выход: