mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-27 12:48:49 +01:00
dropdown buttons implementation
This commit is contained in:
nixa
parent
85072185e9
commit
8dbdd2fa64
19 changed files with 371 additions and 51 deletions
|
|
@ -5,11 +5,25 @@ import {FlatButtons} from './components/flatButtons';
|
|||
import {RaisedButtons} from './components/raisedButtons';
|
||||
import {SizedButtons} from './components/sizedButtons';
|
||||
import {DisabledButtons} from './components/disabledButtons';
|
||||
import {IconButtons} from './components/iconButtons';
|
||||
import {LargeButtons} from './components/largeButtons';
|
||||
import {DropdownButtons} from './components/dropdownButtons';
|
||||
import {GroupButtons} from './components/groupButtons';
|
||||
|
||||
@Component({
|
||||
selector: 'buttons',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
directives: [BaCard, FlatButtons, RaisedButtons, SizedButtons, DisabledButtons],
|
||||
directives: [
|
||||
BaCard,
|
||||
FlatButtons,
|
||||
RaisedButtons,
|
||||
SizedButtons,
|
||||
DisabledButtons,
|
||||
IconButtons,
|
||||
LargeButtons,
|
||||
DropdownButtons,
|
||||
GroupButtons
|
||||
],
|
||||
styles: [require('./buttons.scss')],
|
||||
template: require('./buttons.html'),
|
||||
})
|
||||
|
|
|
|||
|
|
@ -24,32 +24,26 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
ba-panel
|
||||
ba-panel-title="Icon Buttons"
|
||||
ba-panel-class="with-scroll">
|
||||
<div ng-include="'app/pages/ui/buttons/widgets/iconButtons.html'"></div>
|
||||
</div>
|
||||
<div
|
||||
ba-panel
|
||||
ba-panel-title="Large Buttons"
|
||||
ba-panel-class="with-scroll large-buttons-panel">
|
||||
<div ng-include="'app/pages/ui/buttons/widgets/largeButtons.html'"></div>
|
||||
</div>
|
||||
|
||||
<ba-card title="Icon Buttons" baCardClass="with-scroll">
|
||||
<icon-buttons></icon-buttons>
|
||||
</ba-card>
|
||||
|
||||
<ba-card title="Large Buttons" baCardClass="with-scroll large-buttons-panel">
|
||||
<large-buttons></large-buttons>
|
||||
</ba-card>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
ba-panel
|
||||
ba-panel-title="Button Dropdowns"
|
||||
ba-panel-class="with-scroll">
|
||||
<div ng-include="'app/pages/ui/buttons/widgets/dropdowns.html'"></div>
|
||||
</div>
|
||||
<div
|
||||
ba-panel
|
||||
ba-panel-title="Button Groups"
|
||||
ba-panel-class="with-scroll">
|
||||
<div ng-include="'app/pages/ui/buttons/widgets/buttonGroups.html'"></div>
|
||||
</div>
|
||||
|
||||
<ba-card title="Button Dropdowns" baCardClass="with-scroll">
|
||||
<dropdown-buttons></dropdown-buttons>
|
||||
</ba-card>
|
||||
|
||||
<ba-card title="Button Groups" baCardClass="with-scroll">
|
||||
<group-buttons></group-buttons>
|
||||
</ba-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import {Component, HostListener} from '@angular/core';
|
||||
import { DROPDOWN_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
|
||||
|
||||
@Component({
|
||||
selector: 'dropdown-buttons',
|
||||
template: require('./dropdownButtons.html'),
|
||||
directives: [DROPDOWN_DIRECTIVES]
|
||||
})
|
||||
|
||||
// TODO: appendToBody does not implemented yet, waiting for it
|
||||
export class DropdownButtons {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<div class="row btns-row">
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-primary" dropdownToggle>
|
||||
Primary
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-success" dropdownToggle>
|
||||
Success
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-info" dropdownToggle>
|
||||
Info
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-default" dropdownToggle>
|
||||
Default
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-warning" dropdownToggle>
|
||||
Warning
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-danger" dropdownToggle>
|
||||
Danger
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="panel-subtitle">Split button dropdowns</h5>
|
||||
|
||||
<div class="row btns-row">
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary" dropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-success" dropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-info" dropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-default" dropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-warning" dropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger" dropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" dropdownMenu>
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './dropdownButtons.component';
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'group-buttons',
|
||||
template: require('./groupButtons.html'),
|
||||
})
|
||||
export class GroupButtons {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<div class="btn-group-example">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-danger">Left</button>
|
||||
<button type="button" class="btn btn-danger">Middle</button>
|
||||
<button type="button" class="btn btn-danger">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-toolbar-example">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-primary">5</button>
|
||||
<button type="button" class="btn btn-primary">6</button>
|
||||
<button type="button" class="btn btn-primary">7</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-primary">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './groupButtons.component';
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'icon-buttons',
|
||||
template: require('./iconButtons.html'),
|
||||
})
|
||||
export class IconButtons {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<ul class="btn-list clearfix">
|
||||
<li>
|
||||
<button type="button" class="btn btn-primary btn-icon"><i class="ion-android-download"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-default btn-icon"><i class="ion-stats-bars"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-success btn-icon"><i class="ion-android-checkmark-circle"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-info btn-icon"><i class="ion-information"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-warning btn-icon"><i class="ion-android-warning"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-danger btn-icon"><i class="ion-nuclear"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h5 class="panel-subtitle">Buttons with icons</h5>
|
||||
|
||||
<ul class="btn-list clearfix">
|
||||
<li>
|
||||
<button type="button" class="btn btn-primary btn-with-icon"><i class="ion-android-download"></i>Primary</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-default btn-with-icon"><i class="ion-stats-bars"></i>Default</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-success btn-with-icon"><i class="ion-android-checkmark-circle"></i>Success
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-info btn-with-icon"><i class="ion-information"></i>Info</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-warning btn-with-icon"><i class="ion-android-warning"></i>Warning</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-danger btn-with-icon"><i class="ion-nuclear"></i>Danger</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './iconButtons.component';
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './largeButtons.component';
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'large-buttons',
|
||||
template: require('./largeButtons.html'),
|
||||
})
|
||||
export class LargeButtons {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<div class="row btns-row btns-same-width-lg">
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<button type="button" class="btn btn-primary btn-lg">Primary</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<button type="button" class="btn btn-success btn-lg">Success</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<button type="button" class="btn btn-info btn-lg">Info</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<button type="button" class="btn btn-default btn-lg">Default</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<button type="button" class="btn btn-warning btn-lg">Warning</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<button type="button" class="btn btn-danger btn-lg">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {Component, ViewEncapsulation} from '@angular/core';
|
||||
|
||||
import {ThemeGlobal} from '../../../theme';
|
||||
import {ProfilePicturePipe} from '../../pipes';
|
||||
|
|
@ -10,7 +10,8 @@ import {ScrollPosition} from '../../directives';
|
|||
styles: [require('./pageTop.scss')],
|
||||
template: require('./pageTop.html'),
|
||||
directives: [MsgCenter, ScrollPosition],
|
||||
pipes: [ProfilePicturePipe]
|
||||
pipes: [ProfilePicturePipe],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class PageTop {
|
||||
isScrolled:Boolean = false;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
<div class="page-top clearfix" scrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)"
|
||||
[ngClass]="{scrolled: isScrolled}">
|
||||
<a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@
|
|||
&.scrolled {
|
||||
@include bg-translucent-dark(0.85);
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.al-logo {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,3 @@
|
|||
.dropdown-menu {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue