This section explains about different types and styles of ButtonGroup.
An Outline ButtonGroup has a border with transparent background. To create Outline ButtonGroup, e-outline
class should
be added to the target element and to each button elements using cssClass
property.
The following sample illustrates how to achieve an Outline ButtonGroup,
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To render ButtonGroup. -->
<div class='e-btn-group e-outline'>
<button ejs-button cssClass='e-outline'>HTML</button>
<button ejs-button cssClass='e-outline'>CSS</button>
<button ejs-button cssClass='e-outline'>Javascript</button>
</div>`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ButtonModule
],
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);
ButtonGroup does not have support for
flat
andround
types.
The Essential JS 2 ButtonGroup has the following predefined styles. This can be achieved by adding corresponding class name
in each button elements using cssClass
property.
Class | Description |
---|---|
e-primary | Used to represent a primary action. |
e-success | Used to represent a positive action. |
e-info | Used to represent an informative action. |
e-warning | Used to represent an action with caution. |
e-danger | Used to represent a negative action. |
The following example illustrates how to achieve predefined styles in ButtonGroup.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To render ButtonGroup. -->
<div class='e-btn-group'>
<button ejs-button cssClass='e-info'>View</button>
<button ejs-button>Edit</button>
<button ejs-button cssClass='e-danger'>Delete</button>
</div>`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ButtonModule
],
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);
Predefined ButtonGroup styles provide only the visual indication. So, ButtonGroup content should define the ButtonGroup style for the users of assistive technologies such as screen readers.