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

Navigation Components

Name: tessl/npm-buefy
Author: tessl

Components for building navigation structures, breadcrumbs, menus, tabs, and pagination interfaces.

Navbar Component

Responsive navigation bar with branding, menu items, and mobile support.

export const BNavbar: Component<{
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  transparent?: boolean;
  fixedTop?: boolean;
  fixedBottom?: boolean;
  isActive?: boolean;
  wrapperClass?: string;
  closeOnClick?: boolean;
  mobileBurger?: boolean;
  spaced?: boolean;
  shadow?: boolean;
}>;

export const BNavbarItem: Component<{
  tag?: string | Component;
  active?: boolean;
  disabled?: boolean;
  expanded?: boolean;
  tab?: boolean;
}>;

export const BNavbarDropdown: Component<{
  label?: string;
  hoverable?: boolean;
  active?: boolean;
  right?: boolean;
  arrowless?: boolean;
  boxed?: boolean;
  closeOnClick?: boolean;
}>;

Breadcrumb Component

Hierarchical navigation breadcrumb trail.

export const BBreadcrumb: Component<{
  items?: BreadcrumbItem[];
  separator?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  align?: 'is-centered' | 'is-right';
}>;

interface BreadcrumbItem {
  text: string;
  href?: string;
  to?: RouteLocationRaw;
  active?: boolean;
}

export const BBreadcrumbItem: Component<{
  tag?: string | Component;
  active?: boolean;
}>;

Menu Component

Vertical navigation menu with nested items support.

export const BMenu: Component<{
  accordion?: boolean;
  activable?: boolean;
  expandIcon?: string;
  iconPack?: string;
  iconSize?: string;
}>;

export const BMenuList: Component<{
  label?: string;
}>;

export const BMenuItem: Component<{
  label?: string;
  modelValue?: boolean;
  expanded?: boolean;
  disabled?: boolean;
  iconPack?: string;
  icon?: string;
  animation?: string;
  tag?: string | Component;
  ariaRole?: string;
  size?: string;
}>;

Tabs Component

Horizontal tab navigation with content panels.

export const BTabs: Component<{
  modelValue?: number | string;
  expanded?: boolean;
  type?: 'is-boxed' | 'is-toggle' | 'is-toggle-rounded' | 'is-fullwidth';
  size?: 'is-small' | 'is-medium' | 'is-large';
  position?: 'is-centered' | 'is-right';
  destroyOnHide?: boolean;
  animated?: boolean;
  animation?: string[];
  multiline?: boolean;
  vertical?: boolean;
}>;

export const BTabItem: Component<{
  label?: string;
  icon?: string;
  iconPack?: string;
  disabled?: boolean;
  visible?: boolean;
  value?: string | number;
  headerClass?: string;
}>;

Steps Component

Step-by-step navigation indicator for multi-step processes.

export const BSteps: Component<{
  modelValue?: number | string;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  size?: 'is-small' | 'is-medium' | 'is-large';
  animated?: boolean;
  destroyOnHide?: boolean;
  iconPack?: string;
  iconPrev?: string;
  iconNext?: string;
  hasNavigation?: boolean;
  vertical?: boolean;
  position?: 'is-right';
  labelPosition?: 'bottom' | 'right' | 'left';
  rounded?: boolean;
  mobileMode?: 'minimalist' | 'compact';
}>;

export const BStepItem: Component<{
  step?: string | number;
  label?: string;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  icon?: string;
  iconPack?: string;
  clickable?: boolean;
  visible?: boolean;
  headerClass?: string;
}>;

Dropdown Component

Dropdown menu component with trigger and menu items.

export const BDropdown: Component<{
  modelValue?: boolean;
  disabled?: boolean;
  hoverable?: boolean;
  inline?: boolean;
  scrollable?: boolean;
  maxHeight?: string | number;
  position?: 'is-top-right' | 'is-top-left' | 'is-bottom-left';
  triggers?: string[];
  mobileModal?: boolean;
  ariaRole?: string;
  animation?: string;
  multiple?: boolean;
  trapFocus?: boolean;
  closeOnClick?: boolean;
  canClose?: string[];
  appendToBody?: boolean;
  appendToBodyCopyParent?: boolean;
}>;

export const BDropdownItem: Component<{
  value?: any;
  separator?: boolean;
  disabled?: boolean;
  custom?: boolean;
  focusable?: boolean;
  paddingless?: boolean;
  hasLink?: boolean;
  ariaRole?: string;
}>;

Icon Component

Icon display component with support for multiple icon libraries.

export const BIcon: Component<{
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  pack?: string;
  icon?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  customSize?: string;
  customClass?: string;
  both?: boolean;
}>;

Pagination Component

Page navigation for large data sets with customizable controls.

export const BPagination: Component<{
  total?: number;
  perPage?: number;
  current?: number;
  rangeBefore?: number;
  rangeAfter?: number;
  size?: 'is-small' | 'is-medium' | 'is-large';
  simple?: boolean;
  rounded?: boolean;
  order?: 'is-centered' | 'is-right';
  iconPack?: string;
  iconPrev?: string;
  iconNext?: string;
  ariaNextLabel?: string;
  ariaPreviousLabel?: string;
  ariaPageLabel?: string;
  ariaCurrentLabel?: string;
}>;

export const BPaginationButton: Component<{
  page?: number;
  tag?: string | Component;
  disabled?: boolean;
}>;

Usage examples:

import { 
  BNavbar, 
  BBreadcrumb, 
  BMenu, 
  BTabs, 
  BSteps, 
  BPagination,
  BDropdown,
  BIcon
} from "buefy";

// Navbar with burger menu
<BNavbar type="is-primary" :mobile-burger="true">
  <template #brand>
    <BNavbarItem tag="router-link" :to="{ path: '/' }">
      <img src="/logo.png" alt="Logo">
    </BNavbarItem>
  </template>
  <template #start>
    <BNavbarItem href="/about">About</BNavbarItem>
    <BNavbarItem href="/contact">Contact</BNavbarItem>
  </template>
</BNavbar>

// Breadcrumb navigation
<BBreadcrumb 
  :items="[
    { text: 'Home', to: '/' },
    { text: 'Products', to: '/products' },
    { text: 'Laptops', active: true }
  ]"
/>

// Tabs with content
<BTabs v-model="activeTab" :animated="true">
  <BTabItem label="Overview" icon="account">
    <p>Overview content</p>
  </BTabItem>
  <BTabItem label="Settings" icon="cog">
    <p>Settings content</p>
  </BTabItem>
</BTabs>

// Step indicator
<BSteps v-model="currentStep" :has-navigation="true">
  <BStepItem step="1" label="Account" :clickable="true">
    <p>Step 1 content</p>
  </BStepItem>
  <BStepItem step="2" label="Profile" :clickable="true">
    <p>Step 2 content</p>
  </BStepItem>
  <BStepItem step="3" label="Confirm">
    <p>Step 3 content</p>
  </BStepItem>
</BSteps>

// Pagination
<BPagination 
  :total="total" 
  :current="current" 
  :per-page="perPage"
  @change="onPageChange"
/>

// Dropdown menu
<BDropdown>
  <template #trigger>
    <BButton icon-right="menu-down">
      Options
    </BButton>
  </template>
  
  <BDropdownItem>Action</BDropdownItem>
  <BDropdownItem>Another action</BDropdownItem>
  <BDropdownItem separator />
  <BDropdownItem>Something else</BDropdownItem>
</BDropdown>

// Icon usage
<BIcon icon="account" />
<BIcon icon="star" type="is-success" size="is-large" />
<BIcon pack="fas" icon="heart" type="is-danger" />

Install with Tessl CLI