This section explains the supported display modes of the Toolbar when the content exceeds the viewing area. Possible modes are:
The default overflow mode of the Toolbar is Scrollable
. Scrollable display mode supports display of commands in a single line with
horizontal scrolling enabled when commands overflow to available space.
left
side is disabled, you can see the hidden commands by moving to the right
.
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-container',
template: `
<ejs-toolbar width="300px">
<e-items>
<e-item text='Cut' prefixIcon = 'e-cut-icon tb-icons'></e-item>
<e-item text='Copy' prefixIcon = 'e-copy-icon tb-icons'></e-item>
<e-item text='Paste' prefixIcon = 'e-paste-icon tb-icons'></e-item>
<e-item type='Separator'></e-item>
<e-item text='bold' prefixIcon = 'e-bold-icon tb-icons'></e-item>
<e-item text='underline' prefixIcon = 'e-underline-icon tb-icons'></e-item>
<e-item text='italic' prefixIcon = 'e-italic-icon tb-icons'></e-item>
<e-item type='Separator'></e-item>
<e-item text='A-Z Sort' prefixIcon = 'e-ascending-icon tb-icons'></e-item>
<e-item text='Z-A Sort' prefixIcon = 'e-descending-icon tb-icons'></e-item>
<e-item text='Clear' prefixIcon = 'e-clear-icon tb-icons'></e-item>
</e-items>
</ejs-toolbar>
`
})
export class AppComponent {
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ToolbarModule
],
declarations: [AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Popup
is another type of overflowMode
in which the Toolbar container holds the commands that can be placed in the available
space. The rest of the overflowing commands that do not fit within
the viewing area moves to the overflow popup container.
The commands placed in the popup can be viewed by opening the popup using the drop down icon given at the end of the Toolbar.
If the popup content overflows the height of the page, then the rest of the commands will be hidden.
Default popup priority is set as none
, and when the commands of the Toolbar overflow, the ones listed last will be moved to the popup.
You can customize the priority of commands to be displayed on the Toolbar and popup by using the overflow
property.
Property | Description |
---|---|
show | Always shows items on the Toolbar with primary priority. |
hide | Always shows items in the popup with secondary priority. |
none | No priority display, and as per the normal order commands are moved to popup when content exceeds viewing area. |
If primary priority commands also exceed available space, they are moved to the popup container at top order position and placed before the secondary priority commands.
You can maintain toolbar item on popup always by using the ‘showAlwaysInPopup’ property, and this behavior is not applicable for toolbar items with overflow property as ‘show’.
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-container',
template: `
<ejs-toolbar overflowMode = 'Popup' width= 380>
<e-items>
<e-item text='Cut' prefixIcon = 'e-cut-icon tb-icons' overflow ='Show'></e-item>
<e-item text='Copy' prefixIcon = 'e-copy-icon tb-icons' overflow ='Show'></e-item>
<e-item text='Paste' prefixIcon = 'e-paste-icon' overflow ='Show'></e-item>
<e-item type='Separator'></e-item>
<e-item text='Bold' prefixIcon = 'e-bold-icon tb-icons' ></e-item>
<e-item text='Italic' prefixIcon = 'e-italic-icon tb-icons' ></e-item>
<e-item text='underline' prefixIcon = 'e-underline-icon tb-icons' ></e-item>
<e-item type='Separator'></e-item>
<e-item text='A-Z Sort' prefixIcon = 'e-ascending-icon tb-icons' overflow ='Show'></e-item>
<e-item text='Z-A Sort' prefixIcon = 'e-descending-icon tb-icons' overflow ='Show'></e-item>
</e-items>
</ejs-toolbar>
`
})
export class AppComponent {
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ToolbarModule
],
declarations: [AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The showTextOn
property is used to decide button text display area on the Toolbar, popup, or both. This is useful for
customization of both text and image representation of commands.
For example, you can show icon only button on the Toolbar, and in the popup container display more information about the commands with icon and text.
Possible values are,
Property | Description |
---|---|
Both | Button Text is visible in both Toolbar and Popup . |
Overflow | Button Text is only visible in Popup . |
Toolbar | Button Text is only visible on the Toolbar . |
In the following code sample, text is only visible in the popup container and not in the Toolbar container.
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-container',
template: `
<ejs-toolbar overflowMode = 'Popup' width= 330>
<e-items>
<e-item text='Cut' prefixIcon = 'e-cut-icon tb-icons' overflow ='Show' showTextOn = 'overflow'></e-item>
<e-item text='Copy' prefixIcon = 'e-copy-icon tb-icons' overflow ='Show' showTextOn = 'overflow'></e-item>
<e-item text='Paste' prefixIcon = 'e-paste-icon tb-icons' overflow ='Show' showTextOn = 'overflow'></e-item>
<e-item type='Separator'></e-item>
<e-item text='bold' prefixIcon = 'e-bold-icon tb-icons' overflow ='Show' showTextOn = 'overflow' ></e-item>
<e-item text='underline' prefixIcon = 'e-underline-icon tb-icons' overflow ='Show' showTextOn = 'overflow' ></e-item>
<e-item text='italic' prefixIcon = 'e-italic-icon tb-icons' overflow ='Show' showTextOn = 'overflow' ></e-item>
<e-item text='Color-Picker' prefixIcon = 'e-color-icon tb-icons' overflow ='Hide' showTextOn = 'overflow' ></e-item>
<e-item type='Separator'></e-item>
<e-item text='A-Z Sort' prefixIcon = 'e-ascending-icon tb-icons' overflow ='Show' showTextOn = 'overflow'></e-item>
<e-item text='Z-A Sort' prefixIcon = 'e-descending-icon tb-icons' overflow ='Show' showTextOn = 'overflow'></e-item>
<e-item text='Clear' prefixIcon = 'e-clear-icon tb-icons' overflow ='Show' showTextOn = 'overflow'></e-item>
</e-items>
</ejs-toolbar>
`
})
export class AppComponent {
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ToolbarModule
],
declarations: [AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);