Size and color in Vue Appbar component

11 Jun 202421 minutes to read

Size

The size of the AppBar can be set using the mode property. The available types of the AppBar are as follows:

Regular AppBar
Prominent AppBar
Dense AppBar

Regular AppBar

This mode is the default one in which the AppBar is displayed with the default height.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Primary">
      <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
      <span class="regular">Regular AppBar</span>
      <div class="e-appbar-spacer"></div>
      <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script setup>

import { AppBarComponent as EjsAppbar } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.control-container .e-btn.e-inherit {
  margin: 0 3px;
}
</style>
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Primary">
      <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
      <span class="regular">Regular AppBar</span>
      <div class="e-appbar-spacer"></div>
      <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script>

import { AppBarComponent } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  name: "App",
  components: {
    "ejs-appbar": AppBarComponent,
    "ejs-button": ButtonComponent
  },
  data: function () {
    return {};
  }
};

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.control-container .e-btn.e-inherit {
  margin: 0 3px;
}
</style>

Prominent AppBar

This height mode can be set to the AppBar by setting Prominent to the property mode. The prominent AppBar is displayed with a longer height and can be used for larger titles, images, or texts. It is also longer than the regular AppBar. In the following example, we have customized the prominent text using align-self and white-space CSS properties. You can change the prominent AppBar height if larger titles, images, or texts are used.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Primary" mode="Prominent" cssClass="prominent-appbar">
      <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
      <span class="prominent">AppBar Component with Prominent mode</span>
      <div class="e-appbar-spacer"></div>
      <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script setup>

import { AppBarComponent as EjsAppbar } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.prominent-appbar .prominent {
  align-self: center;
  white-space: break-spaces;
  text-align: inherit;
  font-size: 35px;
  line-height: 50px;
}

.prominent-appbar.e-appbar {
  background-image: url("https://ej2.syncfusion.com/demos/src/appbar/images/prominent.png");
  background-size: 100% 350px;
  color: #ffffff;
  background-repeat: no-repeat;
  height: 350px;
}

.prominent-appbar .e-inherit.e-btn {
  background: transparent;
}

.prominent-appbar .e-inherit.e-btn:hover,
.prominent-appbar .e-inherit.e-btn:focus,
.prominent-appbar .e-inherit.e-btn:active,
.prominent-appbar .e-inherit.e-btn.e-active,
.prominent-appbar .e-inherit.e-css.e-btn:hover,
.prominent-appbar .e-inherit.e-css.e-btn:focus .prominent-appbar .e-inherit.e-css.e-btn:active .prominent-appbar .e-inherit.e-css.e-btn.e-active {
  background: rgba(255, 255, 255, .08);
}
</style>
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Primary" mode="Prominent" cssClass="prominent-appbar">
      <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
      <span class="prominent">AppBar Component with Prominent mode</span>
      <div class="e-appbar-spacer"></div>
      <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script>

import { AppBarComponent } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  name: "App",
  components: {
    "ejs-appbar": AppBarComponent,
    "ejs-button": ButtonComponent
  },
  data: function () {
    return {};
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.prominent-appbar .prominent {
  align-self: center;
  white-space: break-spaces;
  text-align: inherit;
  font-size: 35px;
  line-height: 50px;
}

.prominent-appbar.e-appbar {
  background-image: url("https://ej2.syncfusion.com/demos/src/appbar/images/prominent.png");
  background-size: 100% 350px;
  color: #ffffff;
  background-repeat: no-repeat;
  height: 350px;
}

.prominent-appbar .e-inherit.e-btn {
  background: transparent;
}

.prominent-appbar .e-inherit.e-btn:hover,
.prominent-appbar .e-inherit.e-btn:focus,
.prominent-appbar .e-inherit.e-btn:active,
.prominent-appbar .e-inherit.e-btn.e-active,
.prominent-appbar .e-inherit.e-css.e-btn:hover,
.prominent-appbar .e-inherit.e-css.e-btn:focus .prominent-appbar .e-inherit.e-css.e-btn:active .prominent-appbar .e-inherit.e-css.e-btn.e-active {
  background: rgba(255, 255, 255, .08);
}
</style>

Dense AppBar

This height mode can be set to the AppBar by setting Dense to the property mode. Dense AppBar is displayed with shorter height which is denser to accommodate all the AppBar content.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Primary" mode="Dense">
      <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
      <span class="dense">Dense AppBar</span>
      <div class="e-appbar-spacer"></div>
      <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script setup>

import { AppBarComponent as EjsAppbar } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.control-container .e-btn.e-inherit {
  margin: 0 3px;
}
</style>
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Primary" mode="Dense">
      <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
      <span class="dense">Dense AppBar</span>
      <div class="e-appbar-spacer"></div>
      <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script>

import { AppBarComponent } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  name: "App",
  components: {
    "ejs-appbar": AppBarComponent,
    "ejs-button": ButtonComponent
  },
  data: function () {
    return {};
  }
};

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.control-container .e-btn.e-inherit {
  margin: 0 3px;
}
</style>

Color

The background and font colors can be set using the colorMode property. The available types of background color for the AppBar are as follows:

Light AppBar
Dark AppBar
Primary AppBar
Inherit AppBar

Light AppBar

This color mode is the default one in which the AppBar can be displayed with a light background and its corresponding font color.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-container">
    <ejs-appbar>
      <a href="https://www.syncfusion.com/vue-components" target="_blank" rel="noopener" role="link" aria-label="Syncfusion vue controls">
        <div class="syncfusion-logo"></div>
      </a>
      <div class="e-appbar-spacer"></div>
      <ejs-button :isPrimary="true">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script setup>
  
  import { AppBarComponent as EjsAppbar } from "@syncfusion/ej2-vue-navigations";
  import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
  
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

  .control-container .syncfusion-logo {
    background: url(https://cdn.syncfusion.com/blazor/images/demos/syncfusion-logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 30px;
    width: 150px;
  }
</style>
<template>
  <div class="control-container">
    <ejs-appbar>
      <a href="https://www.syncfusion.com/vue-components" target="_blank" rel="noopener" role="link"
        aria-label="Syncfusion vue controls">
        <div class="syncfusion-logo"></div>
      </a>
      <div class="e-appbar-spacer"></div>
      <ejs-button :isPrimary="true">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script>

import { AppBarComponent } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  name: "App",
  components: {
    "ejs-appbar": AppBarComponent,
    "ejs-button": ButtonComponent
  },
  data: function () {
    return {};
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.control-container .syncfusion-logo {
  background: url(https://cdn.syncfusion.com/blazor/images/demos/syncfusion-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 30px;
  width: 150px;
}
</style>

Dark AppBar

This color mode can be set to the AppBar by setting Dark to the property colorMode. A dark AppBar can be displayed with a dark background and its corresponding font color.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Dark">
      <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
      <div class="e-appbar-spacer"></div>
      <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script setup>

import { AppBarComponent as EjsAppbar } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.control-container .e-btn.e-inherit {
  margin: 0 3px;
}
</style>
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Dark">
      <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
      <div class="e-appbar-spacer"></div>
      <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script>

import { AppBarComponent } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  name: "App",
  components: {
    "ejs-appbar": AppBarComponent,
    "ejs-button": ButtonComponent
  },
  data: function () {
    return {};
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.control-container .e-btn.e-inherit {
  margin: 0 3px;
}
</style>

Primary AppBar

This color mode can be set to the AppBar by setting Primary to the property colorMode. The primary AppBar can be displayed with primary colors.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Primary">
      <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
      <div class="e-appbar-spacer"></div>
      <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script setup>

import { AppBarComponent as EjsAppbar } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.control-container .e-btn.e-inherit {
  margin: 0 3px;
}
</style>
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Primary">
      <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
      <div class="e-appbar-spacer"></div>
      <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script>

import { AppBarComponent } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  name: "App",
  components: {
    "ejs-appbar": AppBarComponent,
    "ejs-button": ButtonComponent
  },
  data: function () {
    return {};
  }
};

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.control-container .e-btn.e-inherit {
  margin: 0 3px;
}
</style>

Inherit AppBar

This color mode can be set to the AppBar by setting Inherit to the property colorMode. The AppBar inherits the background and font color from its parent element.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Inherit">
      <a href="https://www.syncfusion.com/vue-components" target="_blank" rel="noopener" role="link"
        aria-label="Syncfusion vue controls">
        <div class="syncfusion-logo"></div>
      </a>
      <div class="e-appbar-spacer"></div>
      <ejs-button :isPrimary="true">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script setup>

import { AppBarComponent as EjsAppbar } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.control-container .syncfusion-logo {
  background: url(https://cdn.syncfusion.com/blazor/images/demos/syncfusion-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 30px;
  width: 150px;
}
</style>
<template>
  <div class="control-container">
    <ejs-appbar colorMode="Inherit">
      <a href="https://www.syncfusion.com/vue-components" target="_blank" rel="noopener" role="link"
        aria-label="Syncfusion vue controls">
        <div class="syncfusion-logo"></div>
      </a>
      <div class="e-appbar-spacer"></div>
      <ejs-button :isPrimary="true">FREE TRIAL</ejs-button>
    </ejs-appbar>
  </div>
</template>

<script>

import { AppBarComponent } from "@syncfusion/ej2-vue-navigations";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  name: "App",
  components: {
    "ejs-appbar": AppBarComponent,
    "ejs-button": ButtonComponent
  },
  data: function () {
    return {};
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.control-container .syncfusion-logo {
  background: url(https://cdn.syncfusion.com/blazor/images/demos/syncfusion-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 30px;
  width: 150px;
}
</style>