angulardart_components 3.0.1

Material Design UI components for AngularDart. Community-maintained fork of Google's original components.

AngularDart Components

Material Design UI components for AngularDart. Community-maintained fork of Google's original components.

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

---

Disclaimer

AngularDart Reborn is a community-maintained fork of Google's original AngularDart framework. This project is not affiliated with, endorsed by, or sponsored by Google LLC. Angular and AngularDart are trademarks of Google LLC.

This is an independent, 100% community-driven project. For the original Angular Framework (TypeScript/JavaScript), visit angular.io.