Barra dei menu agganciabile per Vue

Blog

Barra dei menu agganciabile per Vue

Caratteristiche

  • âš“ Collega facilmente il tuo menu.
  • 🤏 Ancorare la barra dei menu trascinando e rilasciando ai bordi dello schermo.
  • Supporto per menu annidati fino a qualsiasi livello.
  • I menu si adattano a qualsiasi posizione agganciata e consentono una navigazione del menu intuitiva.
  • ⚡ Zero dipendenze.
  • Costruito con Dattiloscritto .
  • intuitivo FUOCO con un comportamento guidato dai dati.
  • Costruito con il tutto nuovo Visualizza 3 .

Installazione

yarn install vue-dock-menu

Iniziare

|_+_| ha delle ottime impostazioni predefinite. Si prega di controllare puntello sezione per tutte le opzioni disponibili.



Il seguente frammento crea una semplice barra dei menu e la aggancia a |_+_| della pagina.

vue-dock-menu

campione1



oggetti di scena

Nome Descrizione Predefinito
anche se posizione di aggancio predefinita. Può essere uno qualsiasi tra |_+_|, |_+_|, |_+_|, |_+_| top
su-selezionato Richiamata che verrĂ  chiamata su una selezione di una voce di menu
Oggetti Dati per la barra dei menu []
tema prop per personalizzare il tema del colore
trascinabile abilita/disabilita il trascinamento sulla barra dei menu. Vero

Dock

usa il |_+_| prop per ancorare la barra dei menu nella posizione preferita. Il prop può accettare i seguenti valori |_+_|, |_+_|, |_+_|, |_+_|.

cos'è la moneta nera?

Qui ancoriamo la barra dei menu sul lato destro dello schermo.



import { DockMenu } from 'vue-dock-menu'; import 'vue-dock-menu/dist/vue-dock-menu.css'; export default { name: 'example', components: { DockMenu }, data() { return { items = [ { name: 'File', menu: [{ name: 'Open'}, {name: 'New Window'}, {name: 'Exit'}] }, { name: 'Edit', menu: [{ name: 'Cut'}, {name: 'Copy'}, {name: 'Paste'}] } ] } } }

su-selezionato

Il |_+_| prop viene utilizzato per recuperare la voce di menu selezionata. Il callback riceve un oggetto con |_+_| e un |_+_| proprietĂ .

  • nome - Nome della voce di menu selezionata.
  • il percorso - Percorso completo della voce di menu selezionata.

se selezioni il |_+_| voce di menu sotto |_+_| menu, sotto sarebbe il payload ricevuto su |_+_| richiama.

TOP

MenĂą completo

Usa il |_+_| prop per creare menu semplici o nidificati di tuo gradimento.

Qui creiamo una semplice struttura di menu con 3 voci di menu con |_+_| e |_+_| avere sottomenu.

LEFT RIGHT

Combinazione di colori personalizzata

usa il |_+_| prop per personalizzare i colori della barra dei menu.

BOTTOM

tema

Cosa verrĂ  dopo

  • accessibilitĂ  della tastiera.
  • supporto per reagire.
  • supporto per le icone nel menu.
  • rendering in stile fisarmonica in modalitĂ  barra laterale.

Configurazione di costruzione

TOP

Contribuire

  1. Forchettalo ( https://github.com/prabhuignoto/vue-dock-menu/fork )
  2. Crea il tuo ramo di funzionalitĂ  (|_+_|)
  3. Conferma le tue modifiche (|_+_|)
  4. Spingi al ramo (|_+_|)
  5. Crea una nuova richiesta pull

🧱 Costruito con

Appunti

  • Il progetto utilizza Presto invece di @vue/cli. Scelgo vite per la velocitĂ  e credo anche Presto sarĂ  il futuro.

meta

Prabhu Murthy – @prabhumurthy2 - prabhu.m.murthy@gmail.com

https://www.prabhumurthy.com

Distribuito con licenza MIT. Vedi |_+_| per maggiori informazioni.

python google calendar API

https://github.com/prabhuingoto/

Scarica i dettagli:

Autore: prabhuignoto

Codice sorgente: https://github.com/prabhuignoto/vue-dock-menu

#vue #vuejs #javascript