Հավելվածների բարը յուրաքանչյուր օգտատիրոջ ինտերֆեյսի կարևոր մասն է և սովորաբար կայքի նավիգացիայի հիմնական աղբյուրն է: Ինչպես գործիքադարակը, այն ցուցադրվում է էկրանի վերևում և կարող է զուգակցվել նավիգացիոն դարակի կամ ներդիրի հետ։ Այս հոդվածում մենք կսովորենք, թե ինչպես ստեղծել և հարմարեցնել հավելվածների գծերը Vuetify-ի միջոցով:
v-app-bar բաղադրիչը
Vuetify-ն ապահովում է v-app-bar բաղադրիչը հավելվածների գծեր ստեղծելու համար: Մենք օգտագործում ենք app հենարանը բաղադրիչի վրա, որպեսզի Vuetify-ը հաշվի առնի հավելվածի սանդղակը, երբ դինամիկ կերպով չափում է այլ բաղադրիչներ, օրինակ՝ v-main:
<template> <v-app> <v-app-bar app></v-app-bar> </v-app> </template><script> export default { name: 'App', }; </script>
Հավելվածի բարի վերնագիր
Մենք կարող ենք օգտագործել v-toolbar-title բաղադրիչը՝ հավելվածի բարի անվանումը սահմանելու համար:
<template> <v-app> <v-app-bar app> <v-toolbar-title>Coding Beauty</v-toolbar-title> </v-app-bar> </v-app> </template><script> export default { name: 'App', }; </script>
Նշում․ Թեև մենք կարող էինք օգտագործել v-app-bar-title բաղադրիչը՝ հավելվածի գծի անվանումը սահմանելու համար, Vuetify թիմը խորհուրդ չի տալիս այն օգտագործել առանց shrink-on-scroll-ի (քննարկված է այս հոդվածում ավելի ուշ), քանի որ այն կավելացներ չափի փոփոխման անհարկի դիտող և լրացուցիչ հաշվարկներ։
Հավելվածի բարի Նավ պատկերակ
v-app-bar-nav-icon-ը ոճավորված պատկերակ կոճակի բաղադրիչ է, որը ստեղծվել է հատուկ գործիքագոտու կամ հավելվածների բարում օգտագործելու համար: Հավելվածների տողի նավի պատկերակը սովորաբար տեղադրվում է գործիքագոտու կամ հավելվածների բարի ձախ կողմում՝ որպես համբուրգերի ընտրացանկ, և հաճախ օգտագործվում է նավիգացիոն դարակի վիճակը վերահսկելու համար։ Մենք կարող ենք հարմարեցնել այս բաղադրիչի պատկերակը և գործառույթը default բնիկով:
<template> <v-app> <v-app-bar app> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-toolbar-title>Coding Beauty</v-app-bar-title> </v-app-bar> </v-app> </template><script> export default { name: 'App', }; </script>
Հավելվածի բարերի գույները
Հավելվածների գծի բաղադրիչը գալիս է color հենարանով՝ հավելվածի բարի գույնը հարմարեցնելու համար: dark հենարանը տեքստի գույնը դարձնում է սպիտակ
<template> <v-app> <v-app-bar app color="green" dark> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-app-bar-title>Coding Beauty</v-app-bar-title> </v-app-bar> </v-app> </template><script> export default { name: 'App', }; </script>
Գեղեցկացրեք Vuetify-ի հետ
Vuetify Material Design շրջանակով էլեգանտ վեբ հավելվածներ ստեղծելու ամբողջական ուղեցույց:
Ստացեք անվճար պատճեն այստեղ:
Ծալված հավելվածի գոտի
v-app-bar-ի վրա collapse հենարանը true-ին դնելով, հավելվածի բարը միշտ կփլվի.
<template> <v-app> <v-app-bar app color="primary" dark collapse> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-app-bar-title>Collapsing Bar</v-app-bar-title> </v-app-bar> </v-app> </template><script> export default { name: 'App', }; </script>
Ծալել ոլորման վրա
Մենք կարող ենք որոշել օգտագործել collapse-on-scroll հենարանը՝ հավելվածի բարը փլուզելու համար միայն այն ժամանակ, երբ օգտատերը ոլորում է:
<template> <v-app> <v-app-bar app color="primary" dark collapse-on-scroll> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-toolbar-title>Collapsing Bar</v-toolbar-title> </v-app-bar> <v-sheet> <v-container style="height: 1000px"> </v-container> </v-sheet> </v-app> </template><script> export default { name: 'App', }; </script>
Հավելվածի բարի գործողություններ
Մենք կարող ենք ֆունկցիոնալություն ավելացնել հավելվածների բարում, որը ցանկանում ենք հեշտությամբ հասանելի լինել օգտատիրոջը icon կոճակներով:
<template> <v-app> <v-app-bar app color="yellow accent-3"> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-toolbar-title>Coding Beauty</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon> mdi-heart </v-icon> </v-btn> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> </v-app-bar> </v-app> </template><script> export default { name: 'App', }; </script>
Հավելվածի բարի ընտրացանկ
Մենք կարող ենք նաև ընդլայնել հավելվածների բարի գործառույթը ցանկի բաղադրիչով (v-menu):
<template> <v-app> <v-app-bar app color="deep-purple accent-4" dark> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-toolbar-title>Coding Beauty</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon> mdi-heart </v-icon> </v-btn> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-menu left bottom> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template><v-list> <v-list-item v-for="n in 4" :key="n" @click="() => {}"> Option {{ n }} </v-list-item> </v-list> </v-menu> </v-app-bar> </v-app> </template><script> export default { name: 'App', }; </script>
Սեղմելով մենյուի պատկերակը կոճակը կցուցադրվի թռուցիկ, որը պարունակում է մեր ավելացրած տարբերակները.
Խիտ հավելվածի բար
Մենք կարող ենք օգտագործել dense հենարանը՝ հավելվածի բարը խիտ դարձնելու համար: Հավելվածի խիտ բարն ավելի ցածր բարձրություն ունի, քան սովորականը:
<template> <v-app> <v-app-bar app color="deep-purple accent-4" dark dense> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-toolbar-title>Coding Beauty</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon> mdi-heart </v-icon> </v-btn> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-menu left bottom> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template><v-list> <v-list-item v-for="n in 4" :key="n" @click="() => {}"> Option {{ n }} </v-list-item> </v-list> </v-menu> </v-app-bar> </v-app> </template><script> export default { name: 'App', }; </script>
Բարձրացնել ոլորման վրա
Երբ մենք elevate-on-scroll հենարանը դնում ենք true, հավելվածի բարը կկանգնի 0dp բարձրության վրա, մինչև օգտագործողը սկսի ոլորել ներքև: Ոլորումը սկսելուց հետո բարձրությունը բարձրանում է մինչև 4dp:
<template> <v-app> <v-app-bar app color="white" elevate-on-scroll> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-toolbar-title>Coding Beauty</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon> mdi-heart </v-icon> </v-btn> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-menu left bottom> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template><v-list> <v-list-item v-for="n in 4" :key="n" @click="() => {}"> Option {{ n }} </v-list-item> </v-list> </v-menu> </v-app-bar> <v-sheet> <v-container style="height: 1000px"> </v-container> </v-sheet> </v-app> </template><script> export default { name: 'App', }; </script>
Հավելվածների բարի ընդլայնում ներդիրներով
Մենք կարող ենք ընդլայնել հավելվածների բարը ներդիրներով՝ ներառելով ներդիրները v-app-bar-ի extension բնիկում:
<template> <v-app> <v-app-bar app color="primary" dark> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-toolbar-title>Coding Beauty</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-menu left bottom> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template> </v-menu><template v-slot:extension> <v-tabs align-with-title> <v-tab>Tab 1</v-tab> <v-tab>Tab 2</v-tab> <v-tab>Tab 3</v-tab> </v-tabs> </template> </v-app-bar> </v-app> </template><script> export default { name: 'App', }; </script>
Նշանավոր հավելվածների բար
prominent հենարանը դնելով true-ին, դրա բարձրությունը կավելանա:
<template> <v-app> <v-app-bar app color="primary" dark prominent> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-toolbar-title>Title</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-menu left bottom> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template> </v-menu><template v-slot:extension> <v-tabs align-with-title> <v-tab>Tab 1</v-tab> <v-tab>Tab 2</v-tab> <v-tab>Tab 3</v-tab> </v-tabs> </template> </v-app-bar> </v-app> </template><script> export default { name: 'App', }; </script>
Shrink on Scroll
shrink-on-scroll հենարանով մենք կարող ենք ակնառու հավելվածի բարը նվազեցնել բարձրությունը, երբ օգտվողը ոլորում է ներքև: Սա թույլ է տալիս սահուն անցում կատարել դեպի ավելի քիչ տեսողական տարածություն գրավելու, երբ օգտվողը պտտվում է բովանդակության մեջ:
<template> <v-app> <v-app-bar app color="primary" dark prominent shrink-on-scroll> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-toolbar-title>Title</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-menu left bottom> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template> </v-menu><template v-slot:extension> <v-tabs align-with-title> <v-tab>Tab 1</v-tab> <v-tab>Tab 2</v-tab> <v-tab>Tab 3</v-tab> </v-tabs> </template> </v-app-bar> <v-sheet> <v-container style="height: 1000px"></v-container> </v-sheet> </v-app> </template><script> export default { name: 'App', }; </script>
Հավելվածի բարի պատկերներ
Մենք կարող ենք ցուցադրել ֆոնային պատկերներ հավելվածի բարում src հենարանով: Երբ մենք պատկեր ենք դնում, color հենարանը գործում է որպես հետադարձ գույն, որը կցուցադրի հավելվածի բարը, երբ պատկերը դեռ բեռնված չէ կամ չի բեռնվում:
<template> <v-app> <v-app-bar app color="primary" dark prominent src="https://picsum.photos/1920/1080?random" > <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-toolbar-title>Title</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-menu left bottom> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template> </v-menu><template v-slot:extension> <v-tabs align-with-title> <v-tab>Tab 1</v-tab> <v-tab>Tab 2</v-tab> <v-tab>Tab 3</v-tab> </v-tabs> </template> </v-app-bar> </v-app> </template><script> export default { name: 'App', }; </script>
Գունաթափել պատկերը ոլորման վրա
Մենք կարող ենք այնպես անել, որ ֆոնային պատկերը հավելվածի բարում խունանա, երբ օգտվողը ոլորում է ներքև: Մենք կարող ենք դա անել fade-img-on-scroll հենարանով: Երբ մենք ոլորում ենք, պատկերը նվազում է անթափանցիկության մեջ, մինչև այն ամբողջովին անհետանա, և մենք կարող ենք տեսնել միայն ֆոնի գույնը:
<template> <v-app> <v-app-bar app color="grey" dark prominent src="https://picsum.photos/1920/1080?random" fade-img-on-scroll > <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-app-bar-title>Title</v-app-bar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-menu left bottom> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template> </v-menu><template v-slot:extension> <v-tabs align-with-title> <v-tab>Tab 1</v-tab> <v-tab>Tab 2</v-tab> <v-tab>Tab 3</v-tab> </v-tabs> </template> </v-app-bar> <v-sheet> <v-container style="height: 1000px"> </v-container> </v-sheet> </v-app> </template><script> export default { name: 'App', }; </script>
Թաքցնել ոլորման վրա
Մենք կարող ենք թաքցնել հավելվածների բարը, երբ օգտվողը սկսում է ոլորել hide-on-scroll հենարանով:
<template> <v-app> <v-app-bar app color="teal" dark hide-on-scroll> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-app-bar-title>Title</v-app-bar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-menu left bottom> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template> </v-menu> </v-app-bar> <v-sheet> <v-container style="height: 1000px"> </v-container> </v-sheet> </v-app> </template><script> export default { name: 'App', }; </script>
Inverted Scroll
Երբ inverted-scroll հենարանը դրված է true-ի վրա, հավելվածի բարը կթաքցվի այնքան ժամանակ, մինչև օգտատերը չանցնի նշանակված շեմը: Շեմը անցնելուց հետո հավելվածի բարը կշարունակի ցուցադրվել այնքան ժամանակ, մինչև օգտատերը անցնի շեմը վերև: Եթե scroll-treshold հենարանը սահմանված չէ, ապա կօգտագործվի 0 լռելյայն արժեքը:
<template> <v-app> <v-app-bar app color="primary" dark inverted-scroll> <v-app-bar-nav-icon> </v-app-bar-nav-icon> <v-app-bar-title>Coding Beauty</v-app-bar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-menu left bottom> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template> </v-menu> </v-app-bar> <v-sheet> <v-container style="height: 1000px"> </v-container> </v-sheet> </v-app> </template><script> export default { name: 'App', }; </script>
Օգտագործելով հավելվածների բարը նավիգացիոն դարակով
Մենք կարող ենք ավելացնել նավիգացիոն գզրոց մեր օգտատիրոջ միջերեսին և օգտագործել v-nav-bar-icon ֆունկցիոնալ բաղադրիչը հավելվածի բարում, որպեսզի փոխարկի դրա տեսանելիությունը:
<template> <v-app> <v-app-bar app color="green" dark> <v-app-bar-nav-icon @click="drawer = true"> </v-app-bar-nav-icon> <v-toolbar-title>Coding Beauty</v-toolbar-title> </v-app-bar> <v-navigation-drawer v-model="drawer" absolute temporary> <v-list nav dense> <v-list-item-group v-model="group" active-class="deep-purple--text text--accent-4" > <v-list-item> <v-list-item-icon> <v-icon>mdi-home</v-icon> </v-list-item-icon> <v-list-item-title>Home</v-list-item-title> </v-list-item><v-list-item> <v-list-item-icon> <v-icon>mdi-account</v-icon> </v-list-item-icon> <v-list-item-title>Account</v-list-item-title> </v-list-item> </v-list-item-group> </v-list> </v-navigation-drawer> </v-app> </template><script> export default { name: 'App', data: () => ({ drawer: false, group: null, }), }; </script>
Եզրակացություն
Մենք կարող ենք հավելվածի բար ավելացնել օգտատիրոջ միջերեսին՝ արագ և հեշտ նավարկելու համար: Vuetify-ն ապահովում է v-app-bar բաղադրիչը՝ հավելվածների բարի վարքն ու տեսքը ստեղծելու և հարմարեցնելու համար:
Գրանցվեք մեր ամենշաբաթյա տեղեկագրի համար, որպեսզի արդիականանաք Vuetify-ի, Vue-ի, JavaScript-ի և այլնի վերաբերյալ բոլոր վերջին խորհուրդներով և ձեռնարկներով:
Ստացեք թարմացված հոդվածը codingbeautydev.com կայքում:
