PageSourceSearch
Opt out API access

https://buefy.org/assets/Sidebar-B9S4A5-L.js

js buefy.org collected 2026-10-03 20:43:30 UTC 22,359 bytes, 370 lines download raw bytes 

1import{d as f,Y as V,aP as x,aH as k,aI as M,aJ as A,j as D,Z as $,$ as L,a0 as U,y as F,_ as v,h as i,o as g,c as w,e,w as o,a as d,f as a,ab as H,a4 as O,W,a1 as j}from"./index-BK-NJTUW.js";import{s as P}from"./index-CoRUuF9K.js";import{v as R}from"./sidebar-DE-FaJo3.js";import{_ as I}from"./buefy-logo-1sjrri2g.js";const T=[{title:"Sidebar",props:[{name:"<code>v-model</code>",description:"To control the behaviour of the sidebar programmatically (two-way binding)",type:"Boolean",values:"—",default:"<code>false</code>"},{name:"<code>open</code>",description:"To control the behaviour of the sidebar programmatically, use the <code>.sync</code> modifier to make it two-way binding",type:"Boolean",values:"—",default:"<code>false</code>"},{name:"<code>position</code>",description:"Set display position of sidebar",type:"String",values:"<code>fixed</code>,<code>static</code>,<code>absolute</code>",default:"<code>fixed</code>"},{name:"<code>type</code>",description:"Type (color) of the background, optional",type:"String, Object",values:`<code>is-white</code>, <code>is-black</code>, <code>is-light</code>,
2                  <code>is-dark</code>, <code>is-primary</code>, <code>is-info</code>, <code>is-success</code>,
3                  <code>is-warning</code>, <code>is-danger</code>,
4                  and any other colors you've set in the <code>$colors</code> list on Sass`,default:"—"},{name:"<code>can-cancel</code>",description:"Can close Sidebar pressing escape or clicking outside",type:"Boolean, Array",values:"<code>escape</code>, <code>outside</code>",default:"<code>['escape', 'outside']</code>"},{name:"<code>on-cancel</code>",description:"Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside)",type:"Function",values:"—",default:"—"},{name:"<code>fullwidth</code>",description:"Show sidebar in fullwidth. A close button will be present for a fullwidth sidebar.",type:"Boolean",values:"-",default:"<code>false</code>"},{name:"<code>fullheight</code>",description:"Show sidebar in fullheight.",type:"Boolean",values:"-",default:"<code>false</code>"},{name:"<code>mobile</code>",description:"Custom layout on mobile",type:"String",values:"<code>fullwidth</code>,<code>reduce</code>,<code>hide</code>",default:"—"},{name:"<code>right</code>",description:"Show the sidebar on right",type:"Boolean",values:"",default:"<code>false</code>"},{name:"<code>overlay</code>",description:"Show an overlay when sidebar is open",type:"Boolean",values:"—",default:"<code>false</code>"},{name:"<code>expand-on-hover</code>",description:"Expand sidebar on hover when <code>reduced</code> or <code>mobile</code> is <code>reduce</code>",type:"Boolean",values:"—",default:"<code>false</code>"},{name:"<code>expand-on-hover-fixed</code>",description:"Expand sidebar on hover with fixed position when <code>reduced</code> or <code>mobile</code> is <code>reduce</code>",type:"Boolean",values:"—",default:"<code>false</code>"},{name:"<code>reduce</code>",description:"Show a small sidebar",type:"Boolean",values:"—",default:"<code>false</code>"},{name:"<code>scroll</code>",description:`<code>clip</code> to remove the <code>&lt;body&gt;</code> scrollbar, <code>keep</code> to have a non scrollable scrollbar
5                    to avoid shifting background, but will set <code>&lt;body&gt;</code> to position fixed, might break some layouts`,type:"String",values:"<code>clip</code>, <code>keep</code>",default:"<code>clip</code>"},{name:"<code>delay</code>",description:"Sidebar delay before it open (number in ms)",type:"Number",values:"—",default:"<code>0</code>"}],slots:[{name:"default",description:"Content of sidebar",props:"—"}],events:[{name:"<code>update:modelValue</code>",description:"Triggers when sidebar is opened/closed",parameters:"<code>value: Boolean</code>"},{name:"<code>close</code>",description:"Triggers when user closed/canceled",parameters:"—"}],methods:[{name:"<code>close</code>",description:"Programmatically close the sidebar",return:"—"},{name:"<code>cancel</code>",description:"Close the sidebar with a specific cancel method",parameters:"<code>method: String, ...args</code>",return:"—"}]}],N=f({components:{BButton:F,BDropdown:U,BDropdownItem:L,BField:$,BIcon:D,BMenu:A,BMenuList:M,BMenuItem:k,BSidebar:x,BSwitch:V},data(){return{open:!1,overlay:!0,fullheight:!0,fullwidth:!1,right:!1}}}),J={class:"p-1"},X=d("img",{src:I,alt:"Lightweight UI components for Vue.js based on Bulma"},null,-1),Y={class:"block"},Z={class:"control"},q={class:"control"},z={class:"control"},G={class:"control"};function K(n,l,_,y,B,S){const t=i("b-menu-item"),u=i("b-icon"),m=i("b-dropdown-item"),p=i("b-dropdown"),r=i("b-menu-list"),b=i("b-menu"),h=i("b-sidebar"),s=i("b-switch"),E=i("b-field"),C=i("b-button");return g(),w("section",null,[e(h,{type:"is-light",fullheight:n.fullheight,fullwidth:n.fullwidth,overlay:n.overlay,right:n.right,modelValue:n.open,"onUpdate:modelValue":l[0]||(l[0]=c=>n.open=c)},{default:o(()=>[d("div",J,[X,e(b,null,{default:o(()=>[e(r,{label:"Menu"},{default:o(()=>[e(t,{icon:"information-outline",label:"Info"}),e(t,{icon:"settings"},{label:o(c=>[a(" Administrator "),e(u,{class:"is-pulled-right",icon:c.expanded?"menu-down":"menu-up"},null,8,["icon"])]),default:o(()=>[e(t,{icon:"account",label:"Users"}),e(t,{icon:"cellphone-link"},{label:o(()=>[a(" Devices "),e(p,{"aria-role":"list",class:"is-pulled-right",position:"is-bottom-left"},{trigger:o(()=>[e(u,{icon:"dots-vertical"})]),default:o(()=>[e(m,{"aria-role":"listitem"},{default:o(()=>[a("Action")]),_:1}),e(m,{"aria-role":"listitem"},{default:o(()=>[a("Another action")]),_:1}),e(m,{"aria-role":"listitem"},{default:o(()=>[a("Something else")]),_:1})]),_:1})]),_:1}),e(t,{icon:"cash-multiple",label:"Payments",disabled:""})]),_:1}),e(t,{icon:"account",label:"My Account"},{default:o(()=>[e(t,{label:"Account data"}),e(t,{label:"Addresses"})]),_:1})]),_:1}),e(r,null,{default:o(()=>[e(t,{label:"Expo",icon:"link",tag:"router-link",target:"_blank",to:"/expo"})]),_:1}),e(r,{label:"Actions"},{default:o(()=>[e(t,{label:"Logout"})]),_:1})]),_:1})])]),_:1},8,["fullheight","fullwidth","overlay","right","modelValue"]),d("div",Y,[e(E,{grouped:"","group-multiline":""},{default:o(()=>[d("div",Z,[e(s,{modelValue:n.overlay,"onUpdate:modelValue":l[1]||(l[1]=c=>n.overlay=c)},{default:o(()=>[a("Overlay")]),_:1},8,["modelValue"])]),d("div",q,[e(s,{modelValue:n.fullheight,"onUpdate:modelValue":l[2]||(l[2]=c=>n.fullheight=c)},{default:o(()=>[a("Fullheight")]),_:1},8,["modelValue"])]),d("div",z,[e(s,{modelValue:n.fullwidth,"onUpdate:modelValue":l[3]||(l[3]=c=>n.fullwidth=c)},{default:o(()=>[a("Fullwidth")]),_:1},8,["modelValue"])]),d("div",G,[e(s,{modelValue:n.right,"onUpdate:modelValue":l[4]||(l[4]=c=>n.right=c)},{default:o(()=>[a("Right")]),_:1},8,["modelValue"])])]),_:1})]),e(C,{onClick:l[5]||(l[5]=c=>n.open=!0)},{default:o(()=>[a("Show")]),_:1})])}const Q=v(N,[["render",K]]),ee=`<template>
6    <section>
7        <b-sidebar
8            type="is-light"
9            :fullheight="fullheight"
10            :fullwidth="fullwidth"
11            :overlay="overlay"
12            :right="right"
13            v-model="open"
14        >
15            <div class="p-1">
16                <img
17                    src="/static/img/buefy-logo.png"
18                    alt="Lightweight UI components for Vue.js based on Bulma"
19                />
20                <b-menu>
21                    <b-menu-list label="Menu">
22                        <b-menu-item
23                            icon="information-outline"
24                            label="Info"
25                        ></b-menu-item>
26                        <b-menu-item icon="settings">
27                            <template #label="props">
28                                Administrator
29                                <b-icon
30                                    class="is-pulled-right"
31                                    :icon="
32                                        props.expanded ? 'menu-down' : 'menu-up'
33                                    "
34                                ></b-icon>
35                            </template>
36                            <b-menu-item
37                                icon="account"
38                                label="Users"
39                            ></b-menu-item>
40                            <b-menu-item icon="cellphone-link">
41                                <template #label>
42                                    Devices
43                                    <b-dropdown
44                                        aria-role="list"
45                                        class="is-pulled-right"
46                                        position="is-bottom-left"
47                                    >
48                                        <template #trigger>
49                                            <b-icon
50                                                icon="dots-vertical"
51                                            ></b-icon>
52                                        </template>
53                                        <b-dropdown-item aria-role="listitem"
54                                            >Action</b-dropdown-item
55                                        >
56                                        <b-dropdown-item aria-role="listitem"
57                                            >Another action</b-dropdown-item
58                                        >
59                                        <b-dropdown-item aria-role="listitem"
60                                            >Something else</b-dropdown-item
61                                        >
62                                    </b-dropdown>
63                                </template>
64                            </b-menu-item>
65                            <b-menu-item
66                                icon="cash-multiple"
67                                label="Payments"
68                                disabled
69                            ></b-menu-item>
70                        </b-menu-item>
71                        <b-menu-item icon="account" label="My Account">
72                            <b-menu-item label="Account data"></b-menu-item>
73                            <b-menu-item label="Addresses"></b-menu-item>
74                        </b-menu-item>
75                    </b-menu-list>
76                    <b-menu-list>
77                        <b-menu-item
78                            label="Expo"
79                            icon="link"
80                            tag="router-link"
81                            target="_blank"
82                            to="/expo"
83                        ></b-menu-item>
84                    </b-menu-list>
85                    <b-menu-list label="Actions">
86                        <b-menu-item label="Logout"></b-menu-item>
87                    </b-menu-list>
88                </b-menu>
89            </div>
90        </b-sidebar>
91        <div class="block">
92            <b-field grouped group-multiline>
93                <div class="control">
94                    <b-switch v-model="overlay">Overlay</b-switch>
95                </div>
96                <div class="control">
97                    <b-switch v-model="fullheight">Fullheight</b-switch>
98                </div>
99                <div class="control">
100                    <b-switch v-model="fullwidth">Fullwidth</b-switch>
101                </div>
102                <div class="control">
103                    <b-switch v-model="right">Right</b-switch>
104                </div>
105            </b-field>
106        </div>
107        <b-button @click="open = true">Show</b-button>
108    </section>
109</template>
110
111<script lang="ts">
112import { defineComponent } from "vue";
113import {
114    BButton,
115    BDropdown,
116    BDropdownItem,
117    BField,
118    BIcon,
119    BMenu,
120    BMenuList,
121    BMenuItem,
122    BSidebar,
123    BSwitch,
124} from "buefy";
125
126export default defineComponent({
127    components: {
128        BButton,
129        BDropdown,
130        BDropdownItem,
131        BField,
132        BIcon,
133        BMenu,
134        BMenuList,
135        BMenuItem,
136        BSidebar,
137        BSwitch,
138    },
139    data() {
140        return {
141            open: false,
142            overlay: true,
143            fullheight: true,
144            fullwidth: false,
145            right: false,
146        };
147    },
148});
149<\/script>
150
151<style>
152.p-1 {
153    padding: 1em;
154}
155</style>
156`,ne=f({components:{BField:$,BMenu:A,BMenuItem:k,BMenuList:M,BSelect:H,BSidebar:x,BSwitch:V},data(){return{expandOnHover:!1,expandWithDelay:!1,mobile:"reduce",reduce:!1}}}),oe={class:"sidebar-page"},te={class:"sidebar-layout"},le={class:"px-4 py-6"},ie=d("div",{class:"block"},[d("figure",{class:"image"},[d("img",{src:I,alt:"Lightweight UI components for Vue.js based on Bulma"})])],-1),de={class:"block component-options"},ae=d("option",{value:null},null,-1),se=d("option",{value:"reduce"},"Reduced",-1),ce=d("option",{value:"hide"},"Hidden",-1),ue=d("option",{value:"fullwidth"},"Fullwidth",-1);function me(n,l,_,y,B,S){const t=i("b-menu-item"),u=i("b-menu-list"),m=i("b-menu"),p=i("b-sidebar"),r=i("b-switch"),b=i("b-field"),h=i("b-select");return g(),w("div",oe,[d("section",te,[e(p,{position:"static",mobile:n.mobile,"expand-on-hover":n.expandOnHover,reduce:n.reduce,delay:n.expandWithDelay?500:null,modelValue:!0},{default:o(()=>[d("div",le,[ie,e(m,{class:"is-custom-mobile"},{default:o(()=>[e(u,{label:"Menu"},{default:o(()=>[e(t,{icon:"information-outline",label:"Info"}),e(t,{"model-value":"",expanded:"",icon:"settings",label:"Administrator"},{default:o(()=>[e(t,{icon:"account",label:"Users"}),e(t,{icon:"cellphone-link",label:"Devices"}),e(t,{icon:"cash-multiple",label:"Payments",disabled:""})]),_:1}),e(t,{icon:"account",label:"My Account"},{default:o(()=>[e(t,{icon:"account-box",label:"Account data"}),e(t,{icon:"home-account",label:"Addresses"})]),_:1})]),_:1}),e(u,null,{default:o(()=>[e(t,{label:"Expo",icon:"link"})]),_:1}),e(u,{label:"Actions"},{default:o(()=>[e(t,{icon:"logout",label:"Logout"})]),_:1})]),_:1})])]),_:1},8,["mobile","expand-on-hover","reduce","delay"]),d("div",de,[e(b,null,{default:o(()=>[e(r,{modelValue:n.reduce,"onUpdate:modelValue":l[0]||(l[0]=s=>n.reduce=s)},{default:o(()=>[a("Reduced")]),_:1},8,["modelValue"])]),_:1}),e(b,null,{default:o(()=>[e(r,{modelValue:n.expandOnHover,"onUpdate:modelValue":l[1]||(l[1]=s=>n.expandOnHover=s)},{default:o(()=>[a("Expand on hover")]),_:1},8,["modelValue"])]),_:1}),e(b,null,{default:o(()=>[e(r,{modelValue:n.expandWithDelay,"onUpdate:modelValue":l[2]||(l[2]=s=>n.expandWithDelay=s)},{default:o(()=>[a("Hover with delay")]),_:1},8,["modelValue"])]),_:1}),e(b,{label:"Mobile Layout"},{default:o(()=>[e(h,{modelValue:n.mobile,"onUpdate:modelValue":l[3]||(l[3]=s=>n.mobile=s)},{default:o(()=>[ae,se,ce,ue]),_:1},8,["modelValue"])]),_:1})])])])}const re=v(ne,[["render",me]]),be=`<template>
157    <div class="sidebar-page">
158        <section class="sidebar-layout">
159            <b-sidebar
160                position="static"
161                :mobile="mobile"
162                :expand-on-hover="expandOnHover"
163                :reduce="reduce"
164                :delay="expandWithDelay ? 500 : null"
165                :modelValue="true"
166            >
167                <div class="px-4 py-6">
168                    <div class="block">
169                        <figure class="image">
170                            <img
171                                src="/static/img/buefy-logo.png"
172                                alt="Lightweight UI components for Vue.js based on Bulma"
173                            />
174                        </figure>
175                    </div>
176                    <b-menu class="is-custom-mobile">
177                        <b-menu-list label="Menu">
178                            <b-menu-item
179                                icon="information-outline"
180                                label="Info"
181                            ></b-menu-item>
182                            <b-menu-item
183                                model-value
184                                expanded
185                                icon="settings"
186                                label="Administrator"
187                            >
188                                <b-menu-item
189                                    icon="account"
190                                    label="Users"
191                                ></b-menu-item>
192                                <b-menu-item
193                                    icon="cellphone-link"
194     

194                               label="Devices"
195                                ></b-menu-item>
196                                <b-menu-item
197                                    icon="cash-multiple"
198                                    label="Payments"
199                                    disabled
200                                ></b-menu-item>
201                            </b-menu-item>
202                            <b-menu-item icon="account" label="My Account">
203                                <b-menu-item
204                                    icon="account-box"
205                                    label="Account data"
206                                ></b-menu-item>
207                                <b-menu-item
208                                    icon="home-account"
209                                    label="Addresses"
210                                ></b-menu-item>
211                            </b-menu-item>
212                        </b-menu-list>
213                        <b-menu-list>
214                            <b-menu-item label="Expo" icon="link"></b-menu-item>
215                        </b-menu-list>
216                        <b-menu-list label="Actions">
217                            <b-menu-item
218                                icon="logout"
219                                label="Logout"
220                            ></b-menu-item>
221                        </b-menu-list>
222                    </b-menu>
223                </div>
224            </b-sidebar>
225
226            <div class="block component-options">
227                <b-field>
228                    <b-switch v-model="reduce">Reduced</b-switch>
229                </b-field>
230                <b-field>
231                    <b-switch v-model="expandOnHover">Expand on hover</b-switch>
232                </b-field>
233                <b-field>
234                    <b-switch v-model="expandWithDelay"
235                        >Hover with delay</b-switch
236                    >
237                </b-field>
238                <b-field label="Mobile Layout">
239                    <b-select v-model="mobile">
240                        <option :value="null"></option>
241                        <option value="reduce">Reduced</option>
242                        <option value="hide">Hidden</option>
243                        <option value="fullwidth">Fullwidth</option>
244                    </b-select>
245                </b-field>
246            </div>
247        </section>
248    </div>
249</template>
250
251<script lang="ts">
252import { defineComponent } from "vue";
253import {
254    BField,
255    BMenu,
256    BMenuItem,
257    BMenuList,
258    BSelect,
259    BSidebar,
260    BSwitch,
261} from "buefy";
262
263export default defineComponent({
264    components: {
265        BField,
266        BMenu,
267        BMenuItem,
268        BMenuList,
269        BSelect,
270        BSidebar,
271        BSwitch,
272    },
273    data() {
274        return {
275            expandOnHover: false,
276            expandWithDelay: false,
277            mobile: "reduce",
278            reduce: false,
279        };
280    },
281});
282<\/script>
283
284<style lang="scss">
285.p-1 {
286    padding: 1em;
287}
288.sidebar-page {
289    display: flex;
290    flex-direction: column;
291    width: 100%;
292    min-height: 100%;
293    .sidebar-layout {
294        display: flex;
295        flex-direction: row;
296        min-height: 100%;
297        gap: 4rem;
298    }
299}
300@media screen and (max-width: 1023px) {
301    .b-sidebar {
302        .sidebar-content {
303            &.is-mini-mobile {
304                &:not(.is-mini-expand),
305                &.is-mini-expand:not(:hover):not(.is-mini-delayed) {
306                    .menu-list {
307                        li {
308                            a {
309                                span:nth-child(2) {
310                                    display: none;
311                                }
312                            }
313                            ul {
314                                padding-left: 0;
315                                li {
316                                    a {
317                                        display: inline-block;
318                                    }
319                                }
320                            }
321                        }
322                    }
323                    .menu-label:not(:last-child) {
324                        margin-bottom: 0;
325                    }
326                }
327            }
328        }
329    }
330}
331@media screen and (min-width: 1024px) {
332    .b-sidebar {
333        .sidebar-content {
334            &.is-mini {
335                &:not(.is-mini-expand),
336                &.is-mini-expand:not(:hover):not(.is-mini-delayed) {
337                    .menu-list {
338                        li {
339                            a {
340                                span:nth-child(2) {
341                                    display: none;
342                                }
343                            }
344                            ul {
345                                padding-left: 0;
346                                li {
347                                    a {
348                                        display: inline-block;
349                                    }
350                                }
351                            }
352                        }
353                    }
354                    .menu-label:not(:last-child) {
355                        margin-bottom: 0;
356                    }
357                }
358            }
359        }
360    }
361}
362.is-mini-expand {
363    .menu-list a {
364        white-space: nowrap;
365        overflow: hidden;
366        text-overflow: ellipsis;
367    }
368}
369</style>
370`,pe=f({components:{ApiView:j,Example:W,VariablesView:O},data(){return{api:T,variables:R,...P({ExSimple:Q,ExStatic:re}),ExSimpleCode:ee,ExStaticCode:be}}});function he(n,l,_,y,B,S){const t=i("Example"),u=i("ApiView"),m=i("VariablesView");return g(),w("div",null,[e(t,{component:n.ExSimple,code:n.ExSimpleCode},null,8,["component","code"]),e(t,{component:n.ExStatic,code:n.ExStaticCode,title:"Static"},null,8,["component","code"]),e(u,{data:n.api},null,8,["data"]),e(m,{data:n.variables},null,8,["data"])])}const _e=v(pe,[["render",he]]);export{_e as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.