angulardart_components 2.0.7

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

AngularDart Components

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

Part of the AngularDart ecosystem.

Components

Buttons

• MaterialButtonComponent - Standard button
• MaterialFabComponent - Floating action button
• MaterialIconButtonComponent - Icon-only button
• MaterialYesNoButtonsComponent - Confirm/cancel buttons

Form Controls

• MaterialCheckboxComponent - Checkbox input
• MaterialRadioComponent / MaterialRadioGroupComponent - Radio buttons
• MaterialInputComponent - Text input with floating label
• MaterialAutoSuggestInputComponent - Input with autocomplete
• MaterialSelectComponent / MaterialDropdownSelectComponent - Dropdown selection
• MaterialToggleComponent - Toggle switch
• MaterialSliderComponent - Range slider
• MaterialDatepickerComponent - Date picker
• MaterialDateRangePickerComponent - Date range picker
• MaterialTimePickerComponent - Time picker

Navigation

• MaterialTabComponent / MaterialTabPanelComponent - Tabs
• MaterialMenuComponent / MaterialDropdownMenuComponent - Menus
• MaterialTreeComponent - Tree view
• MaterialStepperComponent - Step-by-step wizard

Layout

• MaterialCardComponent - Card container
• MaterialDialogComponent - Modal dialog
• MaterialExpansionPanelComponent - Expandable panel
• MaterialPopupComponent - Popup overlay
• MaterialTooltipComponent / MaterialIconTooltipComponent - Tooltips
• MaterialSpinnerComponent - Loading indicator
• MaterialProgressComponent - Progress bar

Content

• MaterialIconComponent - Material icons
• MaterialGlyphComponent - Custom glyphs
• MaterialChipComponent / MaterialChipsComponent - Chips/tags
• MaterialListComponent / MaterialListItemComponent - List items
• MaterialScorecardComponent / MaterialScoreboardComponent - Score display
• MaterialReorderListComponent - Drag-and-drop reorderable list
• SimpleHtmlComponent - Safe HTML rendering

Installation

Add to your pubspec.yaml:

dependencies:
  angulardart: ^8.0.0
  angulardart_components: ^2.0.0

Quick Start

import 'package:angulardart/angular.dart';
import 'package:angulardart_components/angulardart_components.dart';

@Component(
  selector: 'my-app',
  template: '''
    <material-button (trigger)="onClick()">Click me</material-button>
    <material-checkbox [(checked)]="isChecked">Accept terms</material-checkbox>
    <material-input label="Name" [(ngModel)]="name"></material-input>
  ''',
  directives: [
    MaterialButtonComponent,
    MaterialCheckboxComponent,
    MaterialInputComponent,
  ],
)
class AppComponent {
  bool isChecked = false;
  String name = '';
  
  void onClick() {
    print('Button clicked!');
  }
}

Material Design Theming

Customize the look and feel with Material Design themes:

import 'package:angulardart_components/css/material/material.scss';

Forms Integration

Use components with AngularDart Forms:

@Component(
  selector: 'my-form',
  template: '''
    <material-input
      label="Email"
      [ngModel]="email"
      (ngModelChange)="email = \$event"
      required>
    </material-input>
    <material-checkbox [(ngModel)]="acceptTerms">
      I accept the terms
    </material-checkbox>
  ''',
  directives: [
    MaterialInputComponent,
    MaterialCheckboxComponent,
    formDirectives,
  ],
)
class MyForm {
  String email = '';
  bool acceptTerms = false;
}

Dialogs

@Component(
  selector: 'my-app',
  template: '''
    <material-button (trigger)="showDialog()">Open Dialog</material-button>
    <material-dialog #dialog>
      <h3 header>Confirm</h3>
      <div>Are you sure?</div>
      <material-yes-no-buttons
        footer
        (yes)="dialog.close()"
        (no)="dialog.close()">
      </material-yes-no-buttons>
    </material-dialog>
  ''',
  directives: [
    MaterialButtonComponent,
    MaterialDialogComponent,
    MaterialYesNoButtonsComponent,
  ],
)
class AppComponent {
  @ViewChild('dialog')
  MaterialDialogComponent? dialog;
  
  void showDialog() {
    dialog?.open();
  }
}

Documentation

• API Reference
• AngularDart main package

Requirements

• Dart SDK >= 3.0.0
• AngularDart >= 8.0.0

License

MIT License