Vue Component Library

Appearance

HorizontalAppBar Component Demo ​

This page demonstrates the OHorizontalAppBar component with various configurations and examples.

Basic HorizontalAppBar ​

A simple app bar with default configuration.

Code Example ​

vue
<template>
  <OHorizontalAppBar title="My Application" :elevation="false" />
</template>

Demo ​

Custom Styling ​

App bar with custom colors and styling.

Code Example ​

vue
<template>
  <OHorizontalAppBar
    title="Custom Styled App Bar"
    backgroundColor="rgba(40, 10, 81, 0.95)"
    textColor="#ffffff"
    height="5rem"
    :elevation="false"
  />
</template>

Demo ​

App bar with a custom logo and title.

Code Example ​

vue
<template>
  <OHorizontalAppBar
    :logo="customLogo"
    title="Custom Logo App Bar"
    :roundLogo="true"
    :elevation="false"
  />
</template>

Demo ​

Position Examples ​

App bar with different positioning options.

Code Example ​

vue
<template>
  <div class="position-demo">
    <h3>Fixed Position (Default)</h3>
    <OHorizontalAppBar
      title="Fixed Position"
      position="fixed"
      :elevation="false"
    />

    <h3>Sticky Position</h3>
    <OHorizontalAppBar
      title="Sticky Position"
      position="sticky"
      :elevation="false"
    />

    <h3>Static Position</h3>
    <OHorizontalAppBar
      title="Static Position"
      position="static"
      :elevation="false"
    />
  </div>
</template>

Demo ​

With Custom Content ​

App bar with custom content in different slots.

Code Example ​

vue
<template>
  <OHorizontalAppBar :elevation="false">
    <template #left-content>
      <button class="custom-btn">Menu</button>
    </template>

    <template #center-content>
      <div class="search-bar">
        <input type="text" placeholder="Search..." />
      </div>
    </template>

    <template #right-content>
      <button class="custom-btn">Profile</button>
      <button class="custom-btn">Settings</button>
    </template>
  </OHorizontalAppBar>
</template>

Demo ​

With Elevation ​

App bar with and without elevation.

Code Example ​

vue
<template>
  <div class="elevation-demo">
    <h3>With Elevation (Default)</h3>
    <OHorizontalAppBar title="With Elevation" :elevation="true" />

    <h3>Without Elevation</h3>
    <OHorizontalAppBar title="Without Elevation" :elevation="false" />
  </div>
</template>

Demo ​

Custom Z-Index ​

App bar with custom z-index for layering.

Code Example ​

vue
<template>
  <OHorizontalAppBar title="Custom Z-Index" :zIndex="2000" :elevation="false" />
</template>

Demo ​