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 
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.
TOPMenĂą 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 RIGHTCombinazione di colori personalizzata
usa il |_+_| prop per personalizzare i colori della barra dei menu.
BOTTOM 
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
TOPContribuire
- Forchettalo ( https://github.com/prabhuignoto/vue-dock-menu/fork )
- Crea il tuo ramo di funzionalitĂ (|_+_|)
- Conferma le tue modifiche (|_+_|)
- Spingi al ramo (|_+_|)
- 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
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