- CssClass
- HtmlAttributes
Contact Support
Style and appearance in Vue Appbar component
11 Jun 20245 minutes to read
To modify the AppBar appearance, you need to override the default CSS of the AppBar component. Please find the list of CSS classes and their corresponding sections in the AppBar component. Also, you have an option to create your own custom theme for the controls using our Theme Studio.
CSS Class | Purpose of Class |
---|---|
.e-appbar | To customize the appbar. |
.e-appbar.e-prominent | To customize the prominent appbar. |
.e-appbar.e-dense | To customize the dense appbar. |
.e-appbar.e-light | To customize the light appbar. |
.e-appbar.e-dark | To customize the dark appbar. |
.e-appbar.e-primary | To customize the dark appbar. |
.e-appbar.e-inherit | To customize the inherit appbar. |
Note: You can change the prominent AppBar height if larger titles, images, or texts are used.
CssClass
CssClass is used for AppBar customization based on the custom class. In the example below, the AppBar background and color are customized using the cssClass property.
<template>
<div class="control-container">
<ejs-appbar colorMode="Primary" cssClass="custom-appbar">
<ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></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-appbar.custom-appbar {
background: #ff0000;
color: #fff;
}
</style>
<template>
<div class="control-container">
<ejs-appbar colorMode="Primary" cssClass="custom-appbar">
<ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></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-appbar.custom-appbar {
background: #ff0000;
color: #fff;
}
</style>
HtmlAttributes
It can be used for additional inline attributes by specifying as inline attributes or by specifying htmlAttributes directive. In the code example below, the aria-label of the AppBar is customized by specifying as attributes.
<template>
<div class="control-container">
<ejs-appbar colorMode="Primary" aria-label="appbar">
<ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></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";
</style>
<template>
<div class="control-container">
<ejs-appbar colorMode="Primary" aria-label="appbar">
<ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></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";
</style>