vue-reactive-sidebar

Ta Vue komponenta doda prilagodljiv stranski meni.

Namestitev

To komponento je mogoče namestiti z uporabo npm:
``bash
npm install vue-reactive-sidebar
`

Uporaba

$3

Za prikaz stranskega menija uvozite komponento v projekt:
`javascript
import Sidebar from "vue-reactive-sidebar";
// ...

export default {
components: {
Sidebar,
//...
},
// ...
};
`
in jo nato uporabite v projektu. Primer uporabe:
`html

`

$3

Meni je lahko prikazan na levi strani (za večje zaslone) ali na vrhu (za mobilne telefone in manjše zaslone). Način prikaza menija se nadzoruje z vrednostjo lastnosti mobile. Če je :mobile=false bo meni prikazan na levi, sicer na vrhu (privzeto je :mobile=false).

Elemente, ki bodo v meniju, dodamo z lastnostima items in itemsBottom. Elementi v items bodo prikazani na vrhu, elementi v itemsBottom pa na dnu menija. Njuni vrednosti morata biti Javascript seznama v katerih so elementi, ki bodo prikazani v meniju. Elementi so objekti z lastnostmi:
- label (string): Ime elementa v meniju.
- url (string): Url strani na katero element preusmeri ob kliku. Če element ne preusmerja na drugo stran, naj ta lastnost ne bo nastavljena.
- icon (string): Vsebuje HTML element, ki bo prikazan kot ikona v meniju, zapisan kot string.
- children (list): Seznam enakih objektov, ki so podelementi tega elementa v meniju. Če element nima podelementov, naj ta lastnost ne bo nastavljena.

Primer menija:
`javascript
export default {
components: {
Sidebar,
//...
},
data() {
return {
exampleMenu: [
{
label: "Item 1",
icon: '',
children: [
{
label: "Item 1 Child 1",
url: "",
icon: '',
},
{
label: "Item 1 Child 2",
url: "",
icon: '',
},
]
},
{
label: "Item 2",
url: "",
icon: '',
},
{
label: "Item 3",
url: "",
icon: '',
},
],
exampleMenuBottom: [
{
label: "Item 1",
url: "",
icon: '',
},
],
// ...
}
},
// ...
};
`

$3

Za prikaz menija na levi nastavimo :mobile=false. Komponenta lahko zdaj vsebuje še:
-