Popovery

Przegląd

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

• Popovery polegają na zewnętrznej bibliotece Popper do pozycjonowania. Aby popovery działały , musisz dołączyć popper.min.js przed bootstrap.js lub użyć bootstrap.bundle.min.js/ bootstrap.bundle.jsktóry zawiera Poppera!
• Popovery wymagają wtyczki podpowiedzi 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ład: Włącz popovery wszędzie

Jednym ze sposobów na zainicjowanie wszystkich okienek popover na stronie byłoby wybranie ich według ich data-bs-toggleatrybutów:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Przykład: Korzystanie z containeropcji

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.

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

Przykład

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" 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: wyrównanie do góry, do prawej, do dołu i do lewej. Kierunki są odzwierciedlane podczas używania Bootstrap w RTL.

<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>

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" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.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ć popover z otoki <div>lub <span>, najlepiej, gdy 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>

Sass

Zmienne

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$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;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Stosowanie

Włącz popovery przez JavaScript:

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

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-bs-, jak w data-bs-animation="". 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 zamiast używać data-bs-customClass="beautifier", użyj data-bs-custom-class="beautifier".

Korzystanie z funkcji zpopperConfig

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

Metody

pokazać

Ujawnia popover elementu. Wraca do dzwoniącego przed faktycznym wyświetleniem popovera (tj. przed shown.bs.popoverwystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie popover. Popovery, których tytuł i treść mają zerową długość, nigdy nie są wyświetlane.

myPopover.show()

ukryć

Ukrywa popover elementu. Powraca do dzwoniącego, zanim popover został faktycznie ukryty (tj. przed hidden.bs.popoverwystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie popover.

myPopover.hide()

przełącznik

Przełącza popover elementu. Powraca do dzwoniącego, zanim popover został faktycznie wyświetlony lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.popoverlub ). hidden.bs.popoverJest to uważane za „ręczne” wyzwalanie popover.

myPopover.toggle()

dysponować

Ukrywa i niszczy popover elementu (usuwa dane zapisane w elemencie DOM). Popovery korzystające z delegowania (utworzone za pomocą opcji selector) nie mogą być indywidualnie niszczone w potomnych elementach wyzwalających.

myPopover.dispose()

włączać

Daje możliwość pokazania popoverowi elementu. Popovery są domyślnie włączone.

myPopover.enable()

wyłączyć

Usuwa możliwość wyświetlania popovera elementu. Popover będzie można wyświetlić tylko wtedy, gdy zostanie ponownie włączony.

myPopover.disable()

toggleEnabled

Przełącza możliwość pokazywania lub ukrywania popover elementu.

myPopover.toggleEnabled()

aktualizacja

Aktualizuje pozycję popovera elementu.

myPopover.update()

uzyskac instancje

Metoda statyczna , która pozwala uzyskać instancję popover skojarzoną z elementem DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Metoda statyczna , która pozwala uzyskać instancję popover skojarzoną z elementem DOM lub utworzyć nową w przypadku, gdy nie została zainicjowana

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Wydarzenia

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