MaterialFabComponent class
Material FAB is a Floating Action Button. It is round, and behaves mostly the same as a MaterialButton.
It may be flat or raised. A raised button is styled with a shadow.
Styling:
The preferred way of specifying FAB colors is to use mixins:
/* Make #myButton green with yellow icon */
@include button-background-color('#myButton', green);
@include icon-button-color('#myButton', yellow);
The advantage of using mixins for color is that they will not overwrite the disabled state colors. You can also style the FAB with CSS as you would a normal DOM element, although this will also affect the disabled state:
/* Make #myButton green with yellow icon */
#myButton {
background: green;
color: yellow;
}
By default the ripple is the same color as the foreground at 25% opacity. You may customize the color using this selector:
/* Make #myButton use a blue ripple instead of foreground color */
#myButton material-ripple {
color: blue;
}
The opacity of the ripple is not customizable via CSS.
- Inheritance
-
- Object
- RootFocusable
- ButtonDirective
- MaterialButtonBase
- MaterialFabComponent
- Annotations
-
- @Component(selector: 'material-fab', directives: [MaterialRippleComponent], templateUrl: 'material_button.html', styleUrls: ['material_fab.scss.css'], changeDetection: ChangeDetectionStrategy.onPush)
Constructors
- MaterialFabComponent(HtmlElement element, ChangeDetectorRef _changeDetector)
Properties
- ariaRole → String?
-
no setterinherited
- disabled ↔ bool
-
Is the component disabled.
getter/setter pairinherited
- disabledStr → String
-
String value to be passed to aria-disabled.
no setterinherited
- focused → bool
-
Whether button is focused right now.
no setterinherited
- hashCode → int
-
The hash code for this object.
no setterinherited
- hostClassIsFocused → bool
-
no setter
- hostClassIsPressed → bool
-
no setter
- hostDisabled → String?
-
no setter
- hostRaised → String?
-
no setter
- hostTabIndex → String?
-
no setterinherited
- isMouseDown → bool
-
Whether the mouse is currently pressed on the button.
no setterinherited
- isPressed → bool
-
no setter
- raised ↔ bool
-
getter/setter pairinherited
- role ↔ String?
-
Role of this component used for a11y.
getter/setter pairinherited
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- tabbable ↔ bool
-
Is the component tabbable.
getter/setter pairinherited
- tabIndex → String?
-
no setterinherited
- tabindex ← String?
-
The tab index of the component.
no getterinherited
-
trigger
→ Stream<
UIEvent> -
Fired when the button is activated via click, tap, or key press.
no setterinherited
- visualFocus → bool
-
Whether button appears focused right now.
no setterinherited
- zElevation → int
-
The elevation the material-shadow component should show.
no setterinherited
Methods
-
dispose(
) → void -
Disposes this disposable and any resources it has open.
inherited
-
focus(
) → void -
Item/component focuses itself
inherited
-
focusedStateChanged(
) → void -
Overridable method for subclasses that implement push change detection.
override
-
handleClick(
MouseEvent mouseEvent) → void -
Triggers if not disabled.
inherited
-
handleKeyPress(
KeyboardEvent keyboardEvent) → void -
Triggers on enter and space if not disabled.
inherited
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
onBlur(
UIEvent event) → void -
Triggered on blur.
inherited
-
onFocus(
UIEvent event) → void -
Triggered on focus.
inherited
-
onMouseDown(
dynamic _) → void -
Triggered on a mouse press.
inherited
-
onMouseUp(
dynamic _) → void -
Triggered on a mouse release.
inherited
-
toString(
) → String -
A string representation of this object.
inherited
-
updateTabIndex(
) → void -
Use this method if you want to manually compute and cache the tab index.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited
Constants
- hostAnimated → const String