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

CSS-хитрости, которые должен знать каждый веб-разработчик Программирование и разработка

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>

Выход:

Читайте также:  Как использовать Python csv writer?

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

Меню выбора 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>

Выход:

ример ниже иллюстрирует использование

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector