Components for organizing content, creating responsive layouts, and managing application structure.
Image and content carousel with navigation controls and auto-play support.
export const BCarousel: Component<{
modelValue?: number;
animated?: string;
interval?: number;
hasDrag?: boolean;
autoplay?: boolean;
pauseHover?: boolean;
pauseInfo?: boolean;
pauseInfoType?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' |
'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
pauseText?: string;
arrow?: boolean;
arrowBoth?: boolean;
indicator?: boolean;
indicatorBackground?: boolean;
indicatorCustom?: boolean;
indicatorInside?: boolean;
indicatorMode?: 'click' | 'hover';
indicatorPosition?: 'is-bottom' | 'is-top';
indicatorStyle?: 'is-boxes' | 'is-dots' | 'is-lines';
iconPack?: string;
iconSize?: string;
iconPrev?: string;
iconNext?: string;
repeat?: boolean;
itemsToShow?: number;
itemsToList?: number;
}>;
export const BCarouselItem: Component<{
visible?: boolean;
active?: boolean;
}>;
export const BCarouselList: Component<{
data?: any[];
hasGrayscale?: boolean;
repeat?: boolean;
}>;Usage example:
import { BCarousel } from "buefy";
// Image carousel
<BCarousel :autoplay="true" :interval="5000">
<BCarouselItem v-for="(image, i) in images" :key="i">
<figure class="image">
<img :src="image.url" :alt="image.alt">
</figure>
</BCarouselItem>
</BCarousel>
// Card carousel
<BCarousel :items-to-show="3" :items-to-list="1">
<BCarouselItem v-for="card in cards" :key="card.id">
<div class="card">
<div class="card-content">{{ card.content }}</div>
</div>
</BCarouselItem>
</BCarousel>Collapsible content container with smooth animations.
export const BCollapse: Component<{
modelValue?: boolean;
animation?: string;
ariaId?: string;
position?: 'is-top' | 'is-bottom';
}>;Usage example:
import { BCollapse } from "buefy";
// Basic collapse
<BCollapse v-model="isOpen" aria-id="contentIdForA11y">
<template #trigger="props">
<BButton @click="props.toggle" :icon-right="props.open ? 'menu-up' : 'menu-down'">
{{ props.open ? 'Hide' : 'Show' }} Details
</BButton>
</template>
<div class="notification">
<p>This content is collapsible</p>
</div>
</BCollapse>Off-canvas sidebar for navigation or additional content.
export const BSidebar: Component<{
modelValue?: boolean;
type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' |
'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
overlay?: boolean;
position?: 'is-fixed' | 'is-absolute' | 'is-static';
fullheight?: boolean;
fullwidth?: boolean;
right?: boolean;
mobile?: string;
reduce?: boolean;
expandOnHover?: boolean;
expandOnHoverFixed?: boolean;
canCancel?: boolean | string[];
onCancel?: () => void;
scroll?: 'clip' | 'keep';
}>;Usage example:
import { BSidebar } from "buefy";
// Mobile sidebar
<BSidebar
v-model="isSidebarOpen"
type="is-light"
:can-cancel="['escape', 'outside']"
mobile="reduce"
>
<div class="p-1">
<BMenu>
<BMenuList label="General">
<BMenuItem icon="account" label="Profile" />
<BMenuItem icon="cog" label="Settings" />
</BMenuList>
</BMenu>
</div>
</BSidebar>
// Persistent sidebar
<BSidebar
v-model="isPersistentOpen"
position="is-static"
:reduce="true"
:expand-on-hover="true"
>
<!-- Sidebar content -->
</BSidebar>Loading placeholder for content that is being fetched (also in data-display for reference).
export const BSkeleton: Component<{
active?: boolean;
animated?: boolean;
width?: string | number;
height?: string | number;
circle?: boolean;
rounded?: boolean;
count?: number;
position?: 'is-centered' | 'is-right';
size?: 'is-small' | 'is-medium' | 'is-large';
}>;Usage example:
import { BSkeleton } from "buefy";
// Layout skeleton
<div class="columns">
<div class="column">
<BSkeleton :active="loading" height="200px" />
</div>
<div class="column">
<BSkeleton :active="loading" :count="5" height="20px" />
</div>
</div>
// Card skeleton
<div class="card">
<BSkeleton :active="loading" circle width="50px" height="50px" />
<BSkeleton :active="loading" width="80%" height="15px" />
<BSkeleton :active="loading" width="60%" height="15px" />
</div>Common layout patterns using Buefy components:
// Main application layout
<div id="app">
<!-- Top navigation -->
<BNavbar type="is-primary" fixed-top>
<template #brand>
<BNavbarItem>Logo</BNavbarItem>
</template>
<template #start>
<BNavbarItem @click="toggleSidebar">
<BIcon icon="menu" />
</BNavbarItem>
</template>
</BNavbar>
<!-- Sidebar navigation -->
<BSidebar v-model="sidebarOpen" type="is-light">
<BMenu>
<BMenuList label="Navigation">
<BMenuItem icon="home" label="Dashboard" />
<BMenuItem icon="account-group" label="Users" />
</BMenuList>
</BMenu>
</BSidebar>
<!-- Main content area -->
<div class="main-content">
<router-view />
</div>
</div>// Dashboard with cards and sidebar
<div class="columns is-fullheight">
<div class="column is-narrow">
<BSidebar
v-model="sidebarOpen"
position="is-static"
:reduce="true"
>
<!-- Navigation menu -->
</BSidebar>
</div>
<div class="column">
<div class="container">
<!-- Dashboard content -->
<div class="columns is-multiline">
<div class="column is-half">
<div class="card">
<div class="card-content">
<BProgress :value="75" type="is-success" />
</div>
</div>
</div>
<div class="column is-half">
<BCarousel :autoplay="true">
<!-- Chart carousel -->
</BCarousel>
</div>
</div>
</div>
</div>
</div>