在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):danielzen/material-todo开源软件地址(OpenSource Url):https://github.com/danielzen/material-todo开源编程语言(OpenSource Language):TypeScript 63.0%开源软件介绍(OpenSource Introduction):Material TodoThis project was generated with angular-cli version 1.0.0 and uses Angular 4 & Material Design ^2.0.0-beta.2. The code in this repository is available under the MIT License. Install & ServeTo get started, you will need node & npm installed. Type the following:
This will install all the necessary node packages and start the server on port 4200 You should be able to see the app running at http://localhost:4200 The following article (and graphics) were originally produced for [Net Magazine] (http://www.creativebloq.com/net-magazine). It is now available online. It has a Creative Commons License, and may be used for Non-Commercial use with attribution. About the AuthorDaniel Zen Build A ToDo app with Angular Material and the Angular CLIAngular Material (material.angular.io) is UI Component framework which implements Google’s Material Design Specification for the latest version of Angular. Although still in beta, Angular Material provides a set of reusable and accessible UI components based on Material Design. Angular itself has many new technologies in the most recent version. At the JavaScript level we have the additional syntax of EcmaScript 2015 (ES6), typing and interface support from TypeScript, along with Decorators an experimental JavaScript feature implemented in TypeScript. It also uses and supports In this tutorial we are going to use Angular to create a simple to-do app with some signature Material Design elements. Get Set UpSetting up an initial environment can be difficult. There were efforts to create a seed or starter. However, there is something even better. With the Angular CLI you can configure your Angular project with a single command. Not only will it take care of all of setup for all of the technologies mentioned above (via Node & npm), it will also add in scaffolding for Jasmine Unit Testing, Protractor end-to-end testing, plus TSLint. And Codelyzer for static code analysis and additional linting for best practices in your Angular Project. Although you don’t have to use all these, you definitely should. It's so simple to setup, you will wonder how you ever got along without it. Angular CLI is available as an npm package, so you will need to have Node and npm installed on your machine. Remember to install the angular-cli globally with the -g option: You are going to have to wait a little bit because after it generates the necessary files, it initializes a Git repo and does an You have now created a new Angular application that follows the official Style Guidelines. Add Material DesignThe default app knows nothing about Material Design (an oversight I’m sure). So we have to add it ourselves. You’ll find the full instructions at (https://github.com/angular/material2/blob/master/guides/getting-started.md). There are many Angular Material Design components and features in the
Import the Angular Material NgModuleTo use it in our project in import { MaterialModule } from '@angular/material';
// other imports
@NgModule({
imports: [MaterialModule],
...
})
export class AppModule { } Material Design Theme & IconsAngular Material comes prepackaged with several pre-built theme css files. These theme files also include all of the styles for core (styles common to all components), so you only have to include a single css file for Angular Material in your app. This is as simple as including one line in your @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css'; We want to use Material Design icons, so let's load the Material Design font in <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> Now we can work with Material Design in our Angular app. DialogComponentOne of the components available in Angular Material Design is a
This has generated a new If you look at the generated import { Component, OnInit } from '@angular/core';
We then declare a number of Now we can replace the generated constructor in constructor() {
this.okText = 'OK';
this.cancelText = 'Cancel';
}
emitValue(value) {
this.valueEmitted.emit(value);
} We will use the <md-input-container class="full-width">
<input mdInput [placeholder]="placeholder"
[(ngModel)]="value"
(keyup.enter)="emitValue(value)"
(keyup.escape)="emitValue(null)"/>
</md-input-container> Users can also click buttons "OK" or "Cancel", which can be relabeled by changing <button md-button (click)="emitValue(null)" color="primary">
{{cancelText}}
</button>
<button md-raised-button (click)="emitValue(value)" color="primary">
{{okText}}
</button> Notice the We also added some CSS in Now let’s add this <app-dialog [title]="'Dialog Prompt'"
[template]="'This is our new Material Design based Component:'"
[placeholder]="'Enter text here'"
[okText]="'Yes'"
[cancelText]="'No'"
[value]="'Starting Text'"
(valueEmitted)="log($event)"
[showPrompt]="true">
</app-dialog> Notice, we have literal strings for all of the Now, let’s modify export class AppComponent {
log(text) {
console.log(text);
}
} Let’s take a look at our handiwork. If you are working off the repo, you can switch to the
You should see the following: If you open up the console, you can what is logged: The contents of the input is emitted when you click “Yes”, and We are now ready to use this new DialogComponent to create our MaterialTodo app. material-todo AppComponent:We are going to finish up our app by using the following Material Design Components for the main app: toolbar, list, list-item, checkbox, button, and icon. We are going to leverage our The todoDialog(todo = null) {
this.okButtonText = 'Create task';
this.fieldValue = '';
this.editingTodo = todo;
if (todo) {
this.fieldValue = todo.title;
this.okButtonText = 'Edit task';
}
this.showDialog = true;
} The updateTodo(title) {
if (title) {
title = title.trim();
if (this.editingTodo) {
this.editTodo(title);
} else {
this.addTodo(title);
}
}
this.hideDialog();
} In <button md-fab class="fab-add" (click)="todoDialog()">
<md-icon>add</md-icon>
</button> We use <md-list-item *ngFor="let todo of todoList; let index=index"> We use an <button md-mini-fab (click)="remove(index)" color="primary">
<md-icon>delete_forever</md-icon>
</button>
<button md-mini-fab (click)="todoDialog(todo)" color="primary"
[disabled]="todo.completed">
<md-icon>mode_edit</md-icon>
</button> They remain hidden until you rollover (or click on mobile) with a little CSS, which you can view in the repo. Check out some images of the the app in action: Keep in mind that Angular Material is still in beta, but there will likely be no more breaking changes to the API. It is very much functioning and lives up to the claim of having a straightforward API that doesn't confuse developers. It was easy to leverage for the creation of a great looking app. Thanks go out to Jeremy Elbourn, Kara Erickson, Andrew Seguin, Paul Gschwendtner, Kristiyan Kostadinov, and all of the other contributors for their efforts. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论