Drift Angular
Search…
Installation and Setup
Stylesheets
Settings
Buttons
To use Buttons, first import
SharedModulein your module.1
import {SharedModule} from '@gaxon/modules';
2
​
3
@NgModule({
4
...
5
imports: [SharedModule, ...],
6
...
7
})
8
export class YourAppModule {
9
}
Copied!
Default Buttons
Preview
HTML
1
<button type="button" class="btn btn-primary mr-2 mb-2">Primary</button>
2
<button type="button" class="btn btn-secondary mr-2 mb-2">Secondary</button>
3
<button type="button" class="btn btn-success mr-2 mb-2">Success</button>
4
<button type="button" class="btn btn-danger mr-2 mb-2">Danger</button>
5
<button type="button" class="btn btn-warning mr-2 mb-2">Warning</button>
6
<button type="button" class="btn btn-info mr-2 mb-2">Info</button>
7
<button type="button" class="btn btn-light mr-2 mb-2">Light</button>
8
<button type="button" class="btn btn-dark mr-2 mb-2">Dark</button>
9
<button type="button" class="btn btn-link mb-2">Link</button>
Copied!
Button Tags
Preview
HTML
1
<a class="btn btn-primary mr-2 mb-2" href="javascript:void(0)" role="button">Link</a>
2
<button class="btn btn-primary mr-2 mb-2" type="submit">Button</button>
3
<input class="btn btn-primary mr-2 mb-2" type="button" value="Input">
4
<input class="btn btn-primary mr-2 mb-2" type="submit" value="Submit">
5
<input class="btn btn-primary mb-2" type="reset" value="Reset">
Copied!
Sizes button
Preview
HTML
1
<button type="button" class="btn btn-primary btn-lg mr-2">Large button</button>
2
<button type="button" class="btn btn-primary mr-2">Default button</button>
3
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
Copied!
Outlines Buttons
First Tab
HTML
1
<button type="button" class="btn btn-outline-primary mr-2 mb-2">Primary</button>
2
<button type="button" class="btn btn-outline-secondary mr-2 mb-2">Secondary</button>
3
<button type="button" class="btn btn-outline-success mb-2">Success</button>
Copied!
Block Buttons
Preview
HTML
1
<button type="button" class="btn btn-primary btn-block">Block level button</button>
2
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
Copied!
Buttons States
Preview
HTML
1
<h5 class="text-muted">Active State Buttons</h5>
2
<div class="mb-5">
3
<button type="button" class="btn btn-primary active mr-2 mb-2">Primary button</button>
4
<button type="button" class="btn btn-secondary active mr-2 mb-2">Button</button>
5
<a href="javascript:void(0)" class="btn btn-primary active mr-2 mb-2" role="button" aria-pressed="true">Primary
6
link</a>
7
<a href="javascript:void(0)" class="btn btn-secondary active mb-2" role="button"
8
aria-pressed="true">Link</a>
9
</div>
10
​
11
<h5 class="text-muted">Disabled State Buttons</h5>
12
<div class="mb-0">
13
<button type="button" class="btn btn-primary mr-2 mb-2" disabled>Primary button</button>
14
<button type="button" class="btn btn-secondary mr-2 mb-2" disabled>Button</button>
15
<a href="javascript:void(0)" class="btn btn-primary mr-2 mb-2 disabled" tabindex="-1" role="button"
16
aria-disabled="true">Primary link</a>
17
<a href="javascript:void(0)" class="btn btn-secondary mb-2 disabled" tabindex="-1" role="button"
18
aria-disabled="true">Link</a>
19
</div>
Copied!
Toggle states
Preview
HTML
TypeScript
1
<button type="button" class="btn btn-primary mr-2 mb-2" [ngClass]="{active:toggle_btn_primary}"
2
(click)="togglePrimaryButton()" aria-pressed="false"
3
autocomplete="off">
4
Single toggle
5
</button>
6
​
7
<button type="button" class="btn btn-outline-secondary mb-2" [ngClass]="{active:toggle_btn_secondary}"
8
(click)="toggleSecondaryButton()" aria-pressed="false"
9
autocomplete="off">
10
Single toggle
11
</button>
Copied!
1
import {Component} from '@angular/core';
2
​
3
@Component({
4
selector: 'ngbd-buttons',
5
templateUrl: './buttons.component.html'
6
})
7
export class NgbdButtons {
8
toggle_btn_primary: boolean = true;
9
toggle_btn_secondary: boolean = false;
10
​
11
togglePrimaryButton() {
12
this.toggle_btn_primary = !this.toggle_btn_primary;
13
}
14
​
15
toggleSecondaryButton() {
16
this.toggle_btn_secondary = !this.toggle_btn_secondary;
17
}
18
}
19
​
Copied!
Checkbox buttons
Preview
HTML
TypeScript
1
<h5 class="text-muted">Checkbox Buttons Example</h5>
2
​
3
<div class="example-row mb-2">
4
<span class="btn-group-toggle mr-2">
5
<label class="btn btn-secondary active" ngbButtonLabel>
6
<input type="checkbox" ngbButton [(ngModel)]="model.button1"> {{(model.button1)? 'Checked' : 'Unchecked'}}
7
</label>
8
</span>
9
​
10
<span class="btn-group-toggle">
11
<label class="btn btn-outline-primary" ngbButtonLabel>
12
<input type="checkbox" ngbButton [(ngModel)]="model.button2"> {{(model.button2)? 'Checked' : 'Unchecked'}}
13
</label>
14
</span>
15
</div>
16
​
17
<h5 class="text-muted">Checkbox Button Group Example</h5>
18
​
19
<div class="example-row mb-2">
20
<div class="btn-group btn-group-toggle">
21
<label class="btn-primary" ngbButtonLabel>
22
<input type="checkbox" ngbButton [(ngModel)]="model.left"> {{(model.left) ? 'Checked' : 'Left'}}
23
</label>
24
<label class="btn-primary" ngbButtonLabel>
25
<input type="checkbox" ngbButton [(ngModel)]="model.middle"> {{(model.middle) ? 'Checked' : 'Middle'}}
26
</label>
27
<label class="btn-primary" ngbButtonLabel>
28
<input type="checkbox" ngbButton [(ngModel)]="model.right"> {{(model.right) ? 'Checked' : 'Right'}}
29
</label>
30
</div>
31
</div>
32
​
Copied!
1
import {Component} from '@angular/core';
2
​
3
@Component({
4
selector: 'app-ngbd-buttons-checkbox',
5
templateUrl: './buttons-checkbox.html'
6
})
7
export class NgbdButtonsCheckbox {
8
model = {
9
button1: true,
10
button2: false,
11
left: true,
12
middle: false,
13
right: false
14
};
15
}
16
​
Copied!
Radio buttons
Preview
HTML
TypeScript
1
<div class="btn-group btn-group-toggle mr-2 mb-2" ngbRadioGroup name="radioBasic" [(ngModel)]="option1">
2
<label ngbButtonLabel class="btn-primary">
3
<input ngbButton type="radio" [value]="1"> {{(option1 == 1)? 'Active' : 'Left'}}
4
</label>
5
<label ngbButtonLabel class="btn-primary">
6
<input ngbButton type="radio" value="middle"> {{(option1 == 'middle')? 'Active' : 'Middle'}}
7
</label>
8
<label ngbButtonLabel class="btn-primary">
9
<input ngbButton type="radio" [value]="false"> {{(!option1)? 'Active' : 'Right'}}
10
</label>
11
</div>
12
​
13
<div class="btn-group btn-group-toggle mb-2" ngbRadioGroup name="radio_option2" [(ngModel)]="option2">
14
<label class="btn btn-outline-secondary" ngbButtonLabel>
15
<input type="radio" ngbButton value="left"> {{(option2 == 'left')? 'Active' : 'Radio'}}
16
</label>
17
<label class="btn btn-outline-secondary" ngbButtonLabel>
18
<input type="radio" ngbButton value="middle"> {{(option2 == 'middle')? 'Active' : 'Radio'}}
19
</label>
20
<label class="btn btn-outline-secondary" ngbButtonLabel>
21
<input type="radio" ngbButton value="right"> {{(option2 == 'right')? 'Active' : 'Radio'}}
22
</label>
23
</div>
24
​
25
​
Copied!
1
import {Component} from '@angular/core';
2
​
3
@Component({
4
selector: 'app-ngbd-buttons-radio',
5
templateUrl: './buttons-radio.html'
6
})
7
export class NgbdButtonsRadio {
8
option1: any = 1;
9
option2: string = 'right';
10
}
11
​
Copied!
Last modified 2yr ago