Builderall Vue UI

# BUIPage

BUIPage must be the root component of all views in your application. Through it you will display the title and subtitle of the current page, search input and button to create a new item

# Demo

Dashboard

Welcome to a Builderall application!
Content

# Code

<template>
  <bui-page
    title="Dashboard"
    subtitle="Welcome to a Builderall application!"
  >
    <template #page-header-right>
      <b-button variant="primary">
        <bui-icon
          name="plus"
          white
          :size="18"
        />
        New calendar
      </b-button>
    </template>
    Content
  </bui-page>
</template>

# Custom content

You can customize the content of the two columns. But it is preferable that you do not use the #page-header-left slot and insert the customized content in the #page-header-right slot

# Demo

Dashboard

Title of my page with custom styles
Content

# Code

<template>
  <bui-page>
    <template #page-header-left>
      <h1 class="bui-page-title">
        Dashboard
      </h1>
      <b-badge>Title of my page with custom styles</b-badge>
    </template>
    <template #page-header-right>
      <b-input
        type="search"
        placeholder="Search"
        class="mx-2"
        style="max-width: 200px"
      />
      <b-button variant="primary">
        <bui-icon
          name="plus"
          variant="white"
          :size="18"
        />
        New
      </b-button>
    </template>
    Content
  </bui-page>
</template>
  1. Admin
  2. Manage

Dashboard

Welcome to a Builderall application!
Content

# Code

<template>
  <bui-page
    title="Dashboard"
    subtitle="Welcome to a Builderall application!"
    :breadcrumbs="breadcrumbs"
  >
    <template #breadcrumb-end>
      <b-button variant="primary">
        Back
      </b-button>
    </template>
    Content
  </bui-page>
</template>

<script>
export default {
  data () {
    return {
      breadcrumbs: [
        { text: 'Admin', href: 'http://www.google.com' },
        { text: 'Manage', href: '#', active: true }
      ]
    }
  }
}
</script>

# API Reference

# Props

Property Type Default Description
title String null Page title
subtitle String null Page subtitle
breadcrumbs Array [] A array of breadcrumb items (opens new window)

# Slots

Name Description
default Content to display below the title
page-header-right Content to be displayed on the reverse side of the title ("new" button goes here)
page-header-left Content to be displayed instead of the title and subtitle
breadcrumb-item Slot that customize breadcrumb items
breadcrumb-end Slot after breadcrumbs

← Alert →