angular_components 0.8.0

outdated Dart 2 incompatible

The official Material Design components for AngularDart. Used at Google in production apps.

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.

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.0 # 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.

12
likes
0
pub points
94%
popularity

Publisher

angulardart.dev

The official Material Design components for AngularDart. Used at Google in production apps.

Homepage

More

Packages that depend on angular_components