Angular ngx Bootstrap进度条组件 |
您所在的位置：网站首页 › 表格内进度条 › Angular ngx Bootstrap进度条组件 |
Angular ngx Bootstrap进度条组件
|
Angular ngx Bootstrap进度条组件
Angular ngx bootstrap是一个与angular一起使用的bootstrap框架，用于创建具有出色风格的组件，这个框架非常容易使用，用于制作响应式网站。 在这篇文章中，我们将了解如何在angular ngx bootstrap中使用Progressbar。进度条是用来提供最新的工作进度反馈的。 安装 npm install ngx-bootstrap --save步骤: 首先，使用上述命令安装angular ngx bootstrap。在index.html中添加以下脚本 在module.ts中导入进度条组件 在app.component.html中制作一个进度条组件。 使用ng serve为应用程序提供服务。示例: 27 49% 166 / 200 import { NgModule } from '@angular/core'; // Importing forms module import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ProgressbarModule } from 'ngx-bootstrap/progressbar'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, BrowserAnimationsModule, ReactiveFormsModule, ProgressbarModule.forRoot() ] }) export class AppModule { } .column{ margin: 30px; } import { Component, OnInit,LOCALE_ID } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { }输出:
|
【本文地址】
今日新闻 |
推荐新闻 |