Popovery

Przegląd

Co należy wiedzieć podczas korzystania z wtyczki popover:

• Popovery polegają na zewnętrznej bibliotece Popper do pozycjonowania. Musisz dołączyć popper.min.js przed bootstrap.jslub użyć takiego bootstrap.bundle.min.js, który zawiera Poppera.
• Popovery wymagają wtyczki popover jako zależności.
• Popovery są włączane ze względu na wydajność, więc musisz je zainicjować samodzielnie .
• Zerowa długość titlei contentwartości nigdy nie pokażą popovera.
• Określ container: 'body', aby uniknąć problemów z renderowaniem w bardziej złożonych komponentach (takich jak nasze grupy wejściowe, grupy przycisków itp.).
• Wyzwalanie okienek popover na ukrytych elementach nie będzie działać.
• Wyskakujące okienka dla .disabledlub disabledelementy muszą być wyzwalane na elemencie opakowania.
• Po uruchomieniu z kotwic, które zawijają się w wielu liniach, popovery będą wyśrodkowane między całkowitą szerokością kotwic. Użyj .text-nowrapna swoim <a>s, aby uniknąć tego zachowania.
• Popovery muszą być ukryte, zanim odpowiadające im elementy zostaną usunięte z DOM.
• Popovery mogą być wyzwalane dzięki elementowi wewnątrz cienia DOM.

Czytaj dalej, aby zobaczyć, jak działają popovery na kilku przykładach.

Przykłady

Włącz popovery

Jak wspomniano powyżej, musisz zainicjować popovery, zanim będzie można ich użyć. Jednym ze sposobów na zainicjowanie wszystkich okienek popover na stronie byłoby wybranie ich według ich data-bs-toggleatrybutów, na przykład:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Demo na żywo

Używamy JavaScript podobnego do powyższego fragmentu, aby renderować następujący aktywny popover. Tytuły ustawia się za pomocą data-bs-title, a treść treści za pomocą data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Cztery kierunki

Dostępne są cztery opcje: górna, prawa, dolna i lewa. Kierunki są odzwierciedlane podczas używania Bootstrap w RTL. Ustaw data-bs-placement, aby zmienić kierunek.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Zwyczajcontainer

Jeśli masz jakieś style w elemencie nadrzędnym, które kolidują z popoverem, będziesz chciał określić niestandardowy container, aby zamiast tego pojawiał się kod HTML popovera w tym elemencie. Jest to powszechne w responsywnych tabelach, grupach wejściowych i tym podobnych.

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

Inną sytuacją, w której będziesz chciał ustawić własny niestandardowy container, są okienka popover wewnątrz modalnego okna dialogowego , aby upewnić się, że sam popover jest dołączony do modalnego okna dialogowego. Jest to szczególnie ważne w przypadku okienek popover zawierających elementy interaktywne – modalne okna dialogowe przechwytują fokus, więc jeśli okienko popover nie jest elementem podrzędnym modalnego, użytkownicy nie będą mogli skoncentrować się ani aktywować tych interaktywnych elementów.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Niestandardowe popovery

Możesz dostosować wygląd okienek popover za pomocą zmiennych CSS . Ustawiamy niestandardową klasę za pomocą data-bs-custom-class="custom-popover", aby określić zakres naszego niestandardowego wyglądu i używamy jej do zastępowania niektórych lokalnych zmiennych CSS.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

Odrzuć przy następnym kliknięciu

Użyj focuswyzwalacza, aby odrzucić okienka popover przy następnym kliknięciu przez użytkownika innego elementu niż element przełączania.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

Elementy niepełnosprawne

Elementy z disabledatrybutem nie są interaktywne, co oznacza, że ​​użytkownicy nie mogą na nich najeżdżać ani klikać, aby wywołać okienko wyskakujące (lub podpowiedź). Aby obejść ten problem, będziesz chciał wywoływać okienko popover z otoki <div>lub <span>, najlepiej, jeśli jest to możliwe przy użyciu klawiatury, używając tabindex="0".

W przypadku wyłączonych wyzwalaczy okienek popover możesz również preferować data-bs-trigger="hover focus"wyświetlanie okienka popover jako natychmiastowej wizualnej informacji zwrotnej dla użytkowników, ponieważ mogą oni nie oczekiwać kliknięcia wyłączonego elementu.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

CSS

Zmienne

W ramach ewoluującego podejścia Bootstrap do zmiennych CSS, popovery używają teraz lokalnych zmiennych CSS w .popovercelu ulepszenia dostosowywania w czasie rzeczywistym. Wartości zmiennych CSS są ustawiane przez Sass, więc dostosowywanie Sass jest nadal obsługiwane.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Zmienne Sassa

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

Stosowanie

Włącz popovery przez JavaScript:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

Opcje

Ponieważ opcje mogą być przekazywane przez atrybuty danych lub JavaScript, możesz dołączyć nazwę opcji do data-bs-, jak w data-bs-animation="{value}". Pamiętaj, aby zmienić typ wielkości liter w nazwie opcji z „ camelCase ” na „ kebab-case ” podczas przekazywania opcji przez atrybuty danych. Na przykład użyj data-bs-custom-class="beautifier"zamiast data-bs-customClass="beautifier".

Od wersji Bootstrap 5.2.0 wszystkie komponenty obsługują eksperymentalny atrybut zarezerwowanych danych data-bs-config, który może zawierać prostą konfigurację komponentu w postaci ciągu JSON. Gdy element ma atrybuty data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", ostateczną titlewartością będzie, 456a oddzielne atrybuty danych zastąpią wartości podane w data-bs-config. Ponadto istniejące atrybuty danych mogą zawierać wartości JSON, takie jak data-bs-delay='{"show":0,"hide":150}'.

Korzystanie z funkcji zpopperConfig

const popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Metody

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Wydarzenia

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})