BUIContainer

This component must be used in conjunction with BUINavbar and BUISidebar. It is necessary to establish the necessary spacing for these components according to the state of the sidebar, to provide responsiveness and support RTL.
Please visit the Layout page to see how these components work together

Basic usage

<bui-container sidebar-state="expanded"></bui-container>

Demo

Code

<template>
  <div class="fake-container">
    <nav class="fake-navbar" />
    <bui-container :sidebar-state="sidebarState">
      <b-button
        v-for="option in options"
        :key="option"
        class="mx-1"
        :disabled="sidebarState == option"
        @click="sidebarState = option"
      >
        {{ option }}
      </b-button>
    </bui-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
      sidebarState: 'expanded',
      options: ['disabled', 'expanded', 'mini']
    }
  }
}
</script>

API Reference

Props

Property	Type	Default	Description
sidebar-state	String	'expanded'	Sidebar state (possible values: 'expanded', 'mini', 'disabled')

Slots

Name	Description
default	Content to display inside the container. It is usually a BUIPage