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.
Useful links
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.
- 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
- 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
- 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
- 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_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_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_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_select_searchbox
- 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
- modal
- model
- module
- module
- module
- module
- module
- module
- module
- new_window_opener
- ng_ruler
- overlay
- popup
- portal
- position
- preset
- properties
- range
- rate_limit_utils
- reference
- reorder_events
- reorder_list
- rtl_annotation
- scoreboard
- scorecard
- scorecard_bar
- select
- selection_container
- selection_input_adapter
- shift_click_selection
- showhide
- simple_html
- stop_propagation
- string_selection_options
- string_utils
- 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