Search results

Position in React AppBar component

31 Jan 2023 / 4 minutes to read

The position of the AppBar can be set using the position and isSticky property. The AppBar provides the following options for setting its position:

  • Top AppBar
  • Bottom AppBar
  • Sticky AppBar

Top AppBar

The top AppBar is the default one in which it positions the AppBar at the top of the 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">
    <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 className="appbar-content" style={{ fontSize: '12px' }}>
    <p>
      The AppBar also known as action bar or nav bar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The control supports height mode, color mode, positioning, and more.
    </p>
    <p>
      The AppBar control provides flexible ways to configure the look and feel of the bar to match your requirement.
    </p>
    <p>
      Developers can control the appearance and behaviors of the AppBar using a rich set of APIs.
    </p>
    <p>
      The AppBar component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application.
    </p>
  </div>
</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.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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 {
	height: 220px;
	margin: 0 auto;
	width: 500px;
	overflow-y: scroll;
}
.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 className="appbar-content" style={{ fontSize: '12px' }}>
    <p>
      The AppBar also known as action bar or nav bar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The control supports height mode, color mode, positioning, and more.
    </p>
    <p>
      The AppBar control provides flexible ways to configure the look and feel of the bar to match your requirement.
    </p>
    <p>
      Developers can control the appearance and behaviors of the AppBar using a rich set of APIs.
    </p>
    <p>
      The AppBar component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application.
    </p>
  </div>
</div>
  );
}

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

Bottom AppBar

This position can be set to the AppBar by setting Bottom to the property position. The bottom AppBar positions the AppBar at the bottom of the 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" position="Bottom">
    <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 className="appbar-content" style={{ fontSize: '12px' }}>
    <p>
      The AppBar also known as action bar or nav bar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The control supports height mode, color mode, positioning, and more.
    </p>
    <p>
      The AppBar control provides flexible ways to configure the look and feel of the bar to match your requirement.
    </p>
    <p>
      Developers can control the appearance and behaviors of the AppBar using a rich set of APIs.
    </p>
    <p>
      The AppBar component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application.
    </p>
  </div>
</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.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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 {
	height: 300px;
	width: 500px;
	margin: 0 auto;
	position: relative;
}
.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" position="Bottom">
    <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 className="appbar-content" style={{ fontSize: '12px' }}>
    <p>
      The AppBar also known as action bar or nav bar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The control supports height mode, color mode, positioning, and more.
    </p>
    <p>
      The AppBar control provides flexible ways to configure the look and feel of the bar to match your requirement.
    </p>
    <p>
      Developers can control the appearance and behaviors of the AppBar using a rich set of APIs.
    </p>
    <p>
      The AppBar component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application.
    </p>
  </div>
</div>
  );
}

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

Sticky AppBar

This position can be set to the AppBar by setting true to the property isSticky. AppBar will be sticky while scrolling 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" isSticky>
    <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 className="appbar-content" style={{ fontSize: '12px' }}>
    <p>
      The AppBar also known as action bar or nav bar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The control supports height mode, color mode, positioning, and more.
    </p>
    <p>
      The AppBar control provides flexible ways to configure the look and feel of the bar to match your requirement.
    </p>
    <p>
      Developers can control the appearance and behaviors of the AppBar using a rich set of APIs.
    </p>
    <p>
      The AppBar component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application.
    </p>
  </div>
</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.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/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 {
	height: 220px;
	margin: 0 auto;
	width: 500px;
	overflow-y: scroll;
}
.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" isSticky>
    <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 className="appbar-content" style={{ fontSize: '12px' }}>
    <p>
      The AppBar also known as action bar or nav bar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The control supports height mode, color mode, positioning, and more.
    </p>
    <p>
      The AppBar control provides flexible ways to configure the look and feel of the bar to match your requirement.
    </p>
    <p>
      Developers can control the appearance and behaviors of the AppBar using a rich set of APIs.
    </p>
    <p>
      The AppBar component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application.
    </p>
  </div>
</div>
  );
}

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