MaterialButtonComponent class

A flat or raised button with an optional ripple effect.

Attributes:

The following attributes are commonly used with <material-button>:

  • icon: If present, removes the minimum width style of the button. To specify the actual icon in the button, use a <glyph>, <material-icon>, or <img>.
  • no-ink: If present, removes the ripple effect from the button.
  • clear-size: If present, removes both min-width and margin from the button.
  • dense: If present, reduces font-size to 13px and button height to 32px.

Styling:

The preferred way of specifying button colors is to use mixins:

/* Make #myButton green with yellow text */
@include button-background-color('#myButton', green);
@include 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 button with CSS as you would a normal DOM element, although this will also affect the disabled state:

/* Make #myButton green with yellow text */
#myButton {
  background: green;
  color: yellow;
}

By default the ripple is the same color as the foreground at 25% opacity. To customize the color, use the material-ripple 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.

See also:

Examples:

Other resources:

Inheritance
Annotations
  • @Component(selector: 'material-button', directives: [MaterialRippleComponent], templateUrl: 'material_button.html', providers: [AcxDarkTheme, ExistingProvider(ButtonDirective, MaterialButtonComponent), ExistingProvider(HasDisabled, MaterialButtonComponent)], styleUrls: ['material_button.scss.css'], changeDetection: ChangeDetectionStrategy.onPush, visibility: Visibility.all)

Constructors

MaterialButtonComponent(HtmlElement element, AcxDarkTheme darktheme, ChangeDetectorRef _changeDetector, @Attribute('role') String? role)

Properties

ariaLabel → String?
final
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
hostDisabled → String?
no setter
hostElevation → String?
no setter
hostRaised → String?
no setter
hostTabIndex → String?
no setterinherited
isMouseDown → bool
Whether the mouse is currently pressed on the button.
no setterinherited
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