tessl/npm-buefy

Lightweight UI components for Vue.js (v3) based on Bulma

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Layout Components

Name: tessl/npm-buefy
Author: tessl

Components for organizing content, creating responsive layouts, and managing application structure.

Carousel Component

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>

Collapse Component

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>

Sidebar Component

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>

Skeleton Component

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>

Layout Patterns

Common layout patterns using Buefy components:

App Shell Layout

// 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 Layout

// 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>

Install with Tessl CLI