Preview Release

These are the AngularDart components that Google uses to build the sophisticated, mission-critical apps that bring in much of Google’s revenue.

This productive and stable set of widgets, contributed to by hundreds of Googlers, make debugging and deploying your app easier. Strict latency and testing policies make these widgets an excellent fit for AngularDart projects.

Only a small fragment of all the components is available right now. We want developers to be able to use the package as soon as possible.

  • <material-icon>
  • <material-button>
  • <material-fab>
  • <material-checkbox>
  • <material-chip>
  • <material-expansionpanel>
  • <material-progress>
  • <material-radio>
  • <material-ripple>
  • <material-spinner>
  • <material-tab>
  • <material-toggle>
  • <material-yes-no-buttons>
  • <reorder-list>
  • <acx-scorecard>
  • <material-input>
  • <material-dialog>
  • <material-popup>
  • <material-tooltip>
  • <material-list>
  • <material-select>
  • <material-tree>
  • <material-auto-suggest-input>
  • <material-date-range-picker>
  • <material-menu>
  • many more, including a fast table

At this time we are not taking pull requests, but please file an issue and we will work with you.

Officially supported browsers: The last two versions of Chrome, Edge, Firefox, and Safari.

Useful links

Required Icon Font

For icons to appear, add the following icon font download to your page. Example

<link
  rel="stylesheet"
  type="text/css"
  href="https://fonts.googleapis.com/icon?family=Material+Icons">

Custom component styles

The styles of these components can be customized via Sass mixins.

  1. Add a dependency on the sass_builder package and add the transformer.

In your pubspec.yaml:

  dependencies:
    sass_builder ^1.0.1 # update for the latest version
  transformers:
  - sass_builder
  - angular

NOTE: Be sure you add the sass_builder transformer before the angular transformer.

  1. Now you can import styles and mixins from this package via dart style package imports in your Sass files.

In your .scss files:

  @import 'package:angular_components/css/material/material';

  .blue {
    color: $mat-blue;
  }

Project Roadmap

Our current work is summarized in issue 142.

Libraries

accepts_width
activation_handler
active_item
active_item_mixin
alignment
angular_2
angular_2
angular_components
angular_components.css.acux.zindexer
angular_components.framework_stabilizers.framework_stabilizers
angular_components.framework_stabilizers.testability
angular_components.model.observable.observable
The library provides utility classes in addition to package:observe. [...]
angular_components.model.selection.selection_model
angular_components.model.selection.selection_options
async
async_action
async_display_name
auto_dismiss
base_material_input
button_decorator
button_wrapper
color
combined_list
dark_theme
deferred_content
deferred_content_aware
deferred_validator
delayed_action
denomination
display_name
display_name
disposable_callback
disposer
dom_iterator
dom_ruler
dom_service
dom_service_webdriver_testability
dynamic_component
error_renderer
events
feature_detector
fixed_material_tab_strip
focus
focus_activable_item
focus_item
focus_list
focus_trap
focusable_mixin
formatter
glyph
has_renderer
has_tab_index
highlight_assistant
highlight_assistant_mixin
highlight_provider
highlighted_text
highlighted_text_model
highlighted_value
icon
id_generator
imperative_view
input_wrapper
interface
item_sorter
keyboard
keyboard_handler_mixin
keyboard_only_focus_indicator
labeled_list
list_differ
list_tracker
locked_limit_selection_options
material
material_auto_suggest_input
material_button
material_button_base
material_checkbox
material_chip
material_chips
material_dialog
material_drawer_base
material_dropdown_base
material_dropdown_select
material_expansionpanel
material_expansionpanel_auto_dismiss
material_expansionpanel_set
material_fab
material_icon
material_input
material_input_default_value_accessor
material_input_error_keys
material_input_multiline
material_list
material_list_item
material_list_size
material_number_accessor
material_number_validators
material_percent_directive
material_persistent_drawer
material_popup
material_progress
material_radio
material_radio_group
material_ripple
material_select
material_select_base
material_select_dropdown_item
material_select_item
material_spinner
material_tab
material_tab_panel
material_temporary_drawer
material_toggle
material_tooltip
Components and Directives in the Material Tooltip Package. [...]
material_tree
material_yes_no_buttons
module
module
module
module
module
module
new_window_opener
ng_ruler
overlay
palette
portal
position
properties
rate_limit_utils
reference
reorder_events
reorder_list
rtl_annotation
scoreboard
scorecard
select
selection_container
shift_click_selection
stop_propagation
string_selection_options
string_utils
tab_button
tab_change_event
tab_mixin
table_selection_model
template_support
toggle
track_layout_changes
tree_propagation_selection_model
tree_selection_mixin
tree_selection_options
visibility