BootstrapVue: popover e barre di avanzamento

Prova Il Nostro Strumento Per Eliminare I Problemi

BootstrapVue è una delle librerie di componenti Vue JS più popolari e fornisce oltre 100 componenti dell'interfaccia utente reattiva. In questa guida completa, esploreremo due utili componenti BootstrapVue: popover E barre di avanzamento .

Panoramica dei popover BootstrapVue

I popover sono utili per trasmettere informazioni contestuali per vari elementi dell'interfaccia. Il |_+_| Il componente consente di aggiungere popover nelle app BootstrapVue.

Caratteristiche b-popover

  • Attiva al passaggio del mouse, fai clic, metti a fuoco e altro ancora
  • Controlla il posizionamento dei popover
  • Supporto HTML nel corpo del popover
  • Pulsante di chiusura opzionale

Ora diamo un'occhiata a |_+_| esempi e opzioni di personalizzazione.



Utilizzo del componente b-popover di BootstrapVue

Ecco un semplice popover BootstrapVue implementato su un pulsante:

|_+_|

Questo mostrerà il popover su |_+_|. Facile!

Posizionamento popover

Controlla il posizionamento dei popover utilizzando |_+_| puntello:

|_+_|

Opzioni di posizionamento:

  • superiore
  • metter il fondo a
  • Sinistra
  • Giusto
Inoltre varianti come |_+_|

Personalizzazione avanzata dei popover

Ulteriori utili opzioni per personalizzare il b-popover di BootstrapVue:

Puntello Descrizione
grilletto Specifica il metodo di attivazione: passaggio del mouse, clic, messa a fuoco, ecc.
ritardo Controlla il ritardo prima che il popover venga mostrato/nascosto
customClass Aggiungi classi CSS personalizzate al popover
closeButton Includi il pulsante di chiusura opzionale

Fare riferimento alla documentazione popover BootstrapVue per ulteriori opzioni.

Componente di avanzamento BootstrapVue

Ora esaminiamo la creazione di barre di avanzamento, che indicano i tempi di attesa o le percentuali di avanzamento/completamento.

|_+_| Panoramica

Caratteristiche:

  • Varianti lineari e circolari
  • Etichette personalizzate
  • Barre/avanzamento multiple
  • Animato e a strisce
  • Controllo dell'altezza

Esempi di progresso

Utilizzo di base:

|_+_|

Barra rigata con etichetta:

|_+_|

Esplora altri esempi in Documenti sulla barra di avanzamento BootstrapVue .

Personalizzazione e barre multiple

Per personalizzare: |_+_|

  • Impostare l'altezza tramite il sostegno dell'altezza
  • Usa la variante per cambiare colore
  • Aggiungi più

Conclusione

Abbiamo esplorato le caratteristiche principali e le opzioni di personalizzazione di due utili componenti BootstrapVue: popover e indicatori di avanzamento.

Funzionalità come l'attivazione flessibile, il supporto HTML e l'avanzamento animato mostrano davvero la potenza di BootstrapVue per la creazione di app e siti Web Vue completi di funzionalità.

Per ulteriori informazioni, consulta:

Guarda Anche: