Search results

Size and Color in React AppBar component

02 Feb 2023 / 5 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.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div className='control-container'>
  <AppBarComponent colorMode="Primary">
    <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
    <span className="regular">Regular AppBar</span>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.control-container .e-btn.e-inherit {
	margin: 0 3px;
}
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return (
<div className='control-container'>
  <AppBarComponent colorMode="Primary">
    <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
    <span className="regular">Regular AppBar</span>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

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.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div className='control-container'>
  <AppBarComponent colorMode="Primary" mode="Prominent" cssClass="prominent-appbar">
    <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
    <span className="prominent">AppBar Component with Prominent mode</span>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.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://blazor.syncfusion.com/demos/_content/BlazorServerCommon_NET6/images/appbar/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);
  }
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return (
<div className='control-container'>
  <AppBarComponent colorMode="Primary" mode="Prominent" cssClass="prominent-appbar">
    <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
    <span className="prominent">AppBar Component with Prominent mode</span>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

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.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div className='control-container'>
  <AppBarComponent colorMode="Primary" mode="Dense">
    <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
    <span className="dense">Dense AppBar</span>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.control-container .e-btn.e-inherit {
	margin: 0 3px;
}
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return (
<div className='control-container'>
  <AppBarComponent colorMode="Primary" mode="Dense">
    <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
    <span className="dense">Dense AppBar</span>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

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.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div className='control-container'>
  <AppBarComponent>
    <a href="https://www.syncfusion.com/react-components" target="_blank" rel="noopener" role="link" aria-label="Syncfusion react components">
      <div className="syncfusion-logo"></div>
    </a>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent isPrimary>FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.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;
}
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return (
<div className='control-container'>
  <AppBarComponent>
    <a href="https://www.syncfusion.com/react-components" target="_blank" rel="noopener" role="link" aria-label="Syncfusion react components">
      <div className="syncfusion-logo"></div>
    </a>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent isPrimary>FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

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.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div className='control-container'>
  <AppBarComponent colorMode="Dark">
    <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.control-container .e-btn.e-inherit {
	margin: 0 3px;
}
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return (
<div className='control-container'>
  <AppBarComponent colorMode="Dark">
    <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

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.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div className='control-container'>
  <AppBarComponent colorMode="Primary">
    <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.control-container .e-btn.e-inherit {
	margin: 0 3px;
}
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return (
<div className='control-container'>
  <AppBarComponent colorMode="Primary">
    <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
  </AppBarComponent>
</div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

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.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div className='control-container'>
    <AppBarComponent colorMode="Inherit">
      <a href="https://www.syncfusion.com/react-components" target="_blank" rel="noopener" role="link" aria-label="Syncfusion react components">
        <div className="syncfusion-logo"></div>
      </a>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent isPrimary>FREE TRIAL</ButtonComponent>
    </AppBarComponent>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Carousel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
.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;
}
Copied to clipboard
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
return (
  <div className='control-container'>
    <AppBarComponent colorMode="Inherit">
      <a href="https://www.syncfusion.com/react-components" target="_blank" rel="noopener" role="link" aria-label="Syncfusion react components">
        <div className="syncfusion-logo"></div>
      </a>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent isPrimary>FREE TRIAL</ButtonComponent>
    </AppBarComponent>
  </div>
);
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);