Material design components for AngularDart.

The AngularDart Components Gallery contains live examples and documentation.

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 projects using the Angular package.

Required Fonts

Add the following font downloads to the head element of your page:

  • Roboto Font (example)

    <link
  rel="stylesheet"
  type="text/css"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

  • Material Icon Font (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 in your project with a component's provided Sass mixins.

  1. Add a dev dependency on the sass_builder package to your pubspec.yaml:
  dev_dependencies:
    sass_builder: ^2.0.0 # update for the latest version
  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;
  }

Libraries

accepts_width
activation_handler
active_item
active_item_directive
alignment
angular_2
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_affix
base_material_input
box
builder
button_decorator
button_wrapper
calendar
caption_affix
caption_affix.template
caption_affix_model
color
combined_list
common
comparators
comparison
comparison_option
config
constants
css
dark_theme
date
Contains date-related models.
date.pb
date_formatter
date_input
date_range.pb
date_range_editor
date_range_editor_host
date_range_input
deferred_content
deferred_content_aware
deferred_validator
delayed_action
delegating_menu_item
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_indicator_controller
focus_interface
focus_item
focus_list
focus_trap
focusable_mixin
formatter
global_escape_directive
glyph
handles_aria
has_disabled
has_factory
has_renderer
has_tab_index
highlight_assistant
highlight_assistant_mixin
highlight_provider
highlighted_text
highlighted_text_model
highlighted_value
highlighted_value.template
icon
icon_affix
icon_affix.template
icon_affix_model
id
id_generator
imperative_view
input_wrapper
interface
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_calendar_picker
material_chart_colors
material_checkbox
material_chip
material_chips
material_date_grid_base
material_date_range_picker
material_date_time_picker
material_datepicker
material_dialog
material_drawer_base
material_dropdown_base
material_dropdown_select
material_dropdown_select_accessor
material_expansionpanel
material_expansionpanel_auto_dismiss
material_expansionpanel_set
material_fab
material_fab_menu
material_icon
material_icon_toggle
material_input
material_input_auto_select
material_input_default_value_accessor
material_input_error_keys
material_input_multiline
material_list
material_list_item
material_list_size
material_menu
material_month_picker
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_slider
material_spinner
material_stackable_drawer
material_step
material_stepper
material_tab
material_tab_panel
material_temporary_drawer
material_time_picker
material_toggle
material_tooltip
Components and Directives in the Material Tooltip Package. [...]
material_tree
material_yes_no_buttons
model
module
module
module
module
module
module
module
new_window_opener
next_prev_buttons
ng_ruler
overlay
portal
position
preset
properties
range
rate_limit_utils
reference
reorder_events
reorder_list
rtl_annotation
scoreboard
scorecard
scorecard_bar
select
selectable_menu
selection_container
selection_input_adapter
shift_click_selection
showhide
simple_html
stop_propagation
string_selection_options
string_utils
tab_button
tab_change_event
tab_mixin
template_support
time_zone_aware_clock
toggle
track_layout_changes
tree_propagation_selection_model
tree_selection_mixin
tree_selection_options
visibility