[Angular] 试着迅速使用Carbon Design System
简述
什么是碳设计系统？
前提 (qiantí)
假设本文的前提条件是已经安装了以下软件包。
操作步骤 xù)
创建一个Angular项目
执行以下命令来创建Angular项目。
ng new my-carbon-tutorial
路由是启用的，样式格式使用CSS创建。在Carbon Design System官方教程中，他们使用SCSS，但我选择了CSS（没有特别的理由）。
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
安装Carbon Design System
进入创建的Angular项目的目录中，并执行以下命令。
npm i --save carbon-components-angular @carbon/styles
安装完成后，打开styles.css文件，按以下方式修改代码。
margin-top-10和margin-top-20与Carbon设计系统没有直接关联，但为了以后的布局调整使用，现在添加上去。
@import '~@carbon/styles/css/styles.min.css';
.margin-top-10 {
margin-top: 10px;
}
.margin-top-20 {
margin-top: 20px;
}
当styles.css文件修复完成后，打开app.module.ts文件，并按照以下方式进行代码修正。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {
ButtonModule,
InputModule,
ModalModule,
ThemeModule,
UIShellModule
} from 'carbon-components-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ButtonModule,
InputModule,
ModalModule,
ThemeModule,
UIShellModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
创建标题栏
在app目录下执行以下命令来创建头部组件。
ng g component components/header
打开header.component.ts文件，并按照以下方式修改代码。
需要添加的是在class内部的@HostBinding部分。如果没有这段描述，标题将覆盖在内容上方，因此在显示标题时一定要记得添加这段描述。
import { Component, HostBinding } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent {
@HostBinding('class.cds--header') headerClass = true;
}
打开header.component.html文件，按照以下代码进行修改。
在cdsTheme部分，指定了头部的主题。如果指定g100，那么头部的背景色将为黑色，文字颜色将为白色。在这里，必须使用white、g10、g90、g100中的一个进行指定。顺便一提，这里的g代表着gray（灰色）。
cds-header部分是头部的实体部分。在logo部分，通过将希望显示的字符串指定为name，指定brand是可选的，但如果不指定，在默认情况下会将name指定的字符串的开头加上IBM（本例中，如果不指定brand，会变成IBM My Carbon Tutorial）。因此，在这个案例中我们指定了一个空字符串。
<div cdsTheme="g100">
<cds-header name="My Carbon Tutorial" brand="" />
</div>
当您修改了header.component.ts和header.component.html后，打开app.component.html并按照以下方式修改代码。
<app-header></app-header>
创建主页
在app目录下执行以下命令，创建主页面的组件。
ng g component components/main
打开main.component.ts文件，并按以下方式修改代码。
定义一个字段来保存文本框中输入的字符串，并控制模态框的打开和关闭。
import { Component } from '@angular/core';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent {
public name = '';
public isOpen = false;
}
打开main.component.html文件，并按照以下方式修改代码。
通过将cdsText指令应用于input标签，将cdsButton指令应用于button标签，使文本框和按钮具备Carbon Design System的样式。
cds-modal部分是用于显示模态框的，正如其名称所示。
<h2>Welcome to Carbon Tutorial!</h2>
<div class="margin-top-20">
<input cdsText placeholder="Your name please" [(ngModel)]="name"/>
</div>
<div class="margin-top-10">
<button
cdsButton="primary"
[disabled]="!name.length"
(click)="isOpen = !isOpen"
>
Hello!
</button>
</div>
<cds-modal [open]="isOpen" (closeSelect)="isOpen = !isOpen">
<cds-modal-header (closeSelect)="isOpen = !isOpen">
<p class="cds--modal-header__heading">Success!!</p>
</cds-modal-header>
<div class="cds--modal-content">
<p>Hello, {{name}}!!</p>
</div>
<cds-modal-footer>
<ng-container>
<button
cdsButton="primary"
(click)="isOpen = !isOpen"
>
Close
</button>
</ng-container>
</cds-modal-footer>
</cds-modal>
一旦修改了main.component.ts和main.component.html后，打开app-routing.module.ts文件并按以下代码进行修正。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './components/main/main.component';
const routes: Routes = [
{
path: '',
component: MainComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
修改app-routing.module.ts后，打开app.component.html，并按以下代码进行修改。
在包围main标签或div标签的内容前，将其指定为cds–content类，这样会为你的代码提供适当的填充等功能。相反，如果不指定，头部会覆盖在内容上方。
<app-header></app-header>
<main class="cds--content">
<router-outlet></router-outlet>
</main>
文献引用
