src/app/components/toolbar/toolbar.component.ts
Toolbar component.
| selector | app-toolbar |
| styleUrls | ./toolbar.component.scss |
| templateUrl | ./toolbar.component.html |
Properties |
Inputs |
Outputs |
Accessors |
constructor(toolbarService: ToolbarService)
|
||||||||
|
Constructs the Toolbar component. ~constructor
Parameters :
|
| key |
Type : string
|
Default value : 'Toolbar'
|
|
The component key |
| toggles |
Type : ToggleKind[]
|
Default value : []
|
|
Toggles |
| instantSearchModelChanged |
Type : EventEmitter
|
|
Instanct search model changed event emitter. |
| responsiveModelChanged |
|
Responsive changed event emitter. |
| tintedModelChanged |
Type : EventEmitter
|
|
Đ¢inted model changed event emitter. |
| tagCloudDisplayModeMultiToggle |
Type : MultiToggleComponent
|
Decorators :
@ViewChild('tagCloudDisplayModeMultiToggle')
|
|
Tag cloud display mode multi-toggle element. |
| tagCloudEmphasisTruncator |
Type : TruncatorComponent
|
Decorators :
@ViewChild('tagCloudEmphasisTruncator')
|
|
Tag cloud emphasis truncator element. |
| toggleComponents |
Type : QueryList<ToggleComponent>
|
Decorators :
@ViewChildren(ToggleComponent)
|
|
Toggle component. |
| toolbarCollapsedToggle |
Type : ToggleComponent
|
Decorators :
@ViewChild('toolbarCollapsedToggle')
|
|
Toolbar collapsed toggle element. |
| responsiveModelChanged |
getresponsiveModelChanged()
|
|
Responsive changed event emitter. |
| truncatorKind |
gettruncatorKind()
|
|
Truncator kind getter. |
| ToggleKind |
getToggleKind()
|
|
Toggle kind enum template accessor getter. |
| toolbarCollapsedToggleChecked |
gettoolbarCollapsedToggleChecked()
|
|
Whether toolbar collapsed toggle is checked. |
| toggleClass |
gettoggleClass()
|
|
Whether toolbar collapsed toggle is checked. |
./toolbar.component.scss
@use "../stylesheets/stylesheets.component.scss";
@use "../stylesheets/stylesheets.component.animation.scss" as animation;
@use "../../stylesheets/geometry.scss" as geometry;
.toolbar-container {
font-size: 16px;
@media only screen and (min-width: 1440px) {
flex-flow: row;
}
}
.members {
flex-flow: row;
}
.toolbar-in {
animation: toolbarIn animation.$transition;
animation-fill-mode: both;
&.reverse {
animation-direction: reverse;
}
$count: 13;
@for $i from 1 through $count {
&:nth-child(#{$i}) {
animation-delay: 50ms * $i;
}
}
}
$button-spacing: geometry.$button-width + geometry.$margin;
@keyframes toolbarIn {
from {
visibility: collapse;
opacity: 0;
transform: scale(0.1) translateX(calc( -1.0 * $button-spacing));
width: 0;
}
to {
visibility: visible;
opacity: 1;
width: auto;
}
}