BootstrapVue — wyskakujące okienka i paski postępu

Wypróbuj Nasz Instrument Do Eliminowania Problemów

BootstrapVue to jedna z najpopularniejszych bibliotek komponentów Vue JS, udostępniająca ponad 100 responsywnych komponentów interfejsu użytkownika. W tym obszernym przewodniku omówimy dwa przydatne komponenty BootstrapVue: popovery I paski postępu .

Przegląd wyskakujących okienek BootstrapVue

Popover są przydatne do przekazywania informacji kontekstowych dla różnych elementów interfejsu. |_+_| Komponent umożliwia dodawanie wyskakujących okienek w aplikacjach BootstrapVue.

Funkcje b-popover

  • Wyzwalaj po najechaniu myszką, kliknięciu, zaznaczeniu i nie tylko
  • Kontroluj rozmieszczenie wyskakujących okienek
  • Obsługa HTML w treści popover
  • Opcjonalny przycisk zamykania

Teraz spójrzmy na |_+_| przykłady i opcje dostosowywania.

Korzystanie z komponentu b-popover BootstrapVue

Oto prosta nakładka BootstrapVue zaimplementowana na przycisku:

|_+_|

Spowoduje to wyświetlenie popoveru na |_+_|. Łatwy!

Umieszczenie wyskakującego okienka

Kontroluj położenie wyskakującego okienka za pomocą |_+_| rekwizyt:

|_+_|

Opcje umieszczenia:

  • szczyt
  • spód
  • lewy
  • Prawidłowy
Plus warianty takie jak |_+_|

Zaawansowane dostosowywanie wyskakującego okienka

Dodatkowe przydatne opcje dostosowywania b-popover BootstrapVue:

Rekwizyt Opis
spust Określ metodę wyzwalania: najechanie kursorem, kliknięcie, fokus itp.
opóźnienie Opóźnienie sterowania przed pokazaniem/ukryciem popoveru
klasa niestandardowa Dodaj niestandardowe klasy CSS do popover
zamknijPrzycisk Dołącz opcjonalny przycisk zamykania

Aby uzyskać jeszcze więcej opcji, zapoznaj się z dokumentacją wyskakującą BootstrapVue.

Komponent postępu BootstrapVue

Przyjrzyjmy się teraz tworzeniu pasków postępu, które wskazują czas oczekiwania lub procent postępu/ukończenia.

|_+_| Przegląd

Cechy:

  • Warianty liniowe i kołowe
  • Etykiety niestandardowe
  • Wiele pasków/postępu
  • Animowane i w paski
  • Kontrola wysokości

Przykłady postępu

Podstawowe zastosowanie:

|_+_|

Pasek w paski z etykietą:

|_+_|

Więcej przykładów znajdziesz w Dokumentacja paska postępu BootstrapVue .

Personalizacja i wiele pasków

Aby dostosować: |_+_|

  • Ustaw wysokość za pomocą podpory wysokości
  • Użyj wariantu, aby zmienić kolor
  • Dodaj wiele

Wniosek

Zbadaliśmy kluczowe funkcje i opcje dostosowywania dwóch przydatnych komponentów BootstrapVue – wyskakujących okienek i wskaźników postępu.

Funkcje takie jak elastyczne wyzwalanie, obsługa HTML i animowany postęp naprawdę pokazują siłę BootstrapVue w tworzeniu w pełni funkcjonalnych aplikacji i stron internetowych Vue.

Więcej informacji znajdziesz na:

Zobacz Też: