我正在尝试以角度2创建一个百分比加载器。加载器应该加载给定百分比的量,它应该是动态的。
HTML
<div class="col-lg-3 col-md-3 bar">
<div class="c100 p50 small">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="textP">
<h3>Statistic 1</h3>
</div>
</div>
我创建了一个使用CSS 50%,但它不是动态的。当我更改百分比时,它仅加载前一个值50%。我是否必须使用ngModel或其他任何内容。
答案 0 :(得分:0)
假设您有一个组件循环百分比加载器,它包含在您的父组件中,如
<circular-percent-loader [percent]="percent"></circular-percent-loader>
这里百分比是您的子组件的输入。在子组件中, 你可以拿这个并设置这样的百分比。我想你从这个范围拿走了50%。
<div class="col-lg-3 col-md-3 bar">
<div class="c100 p50 small">
<span>{{percent}}</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="textP">
<h3>Statistic 1</h3>
</div>
</div>
在child component.ts
@Input() percent: number;
答案 1 :(得分:0)
让我们创建ngx-circle-progress组件:
组件html:
<div class="clearfix">
<div class="c100" [ngClass]="['p' + value, isBig ? 'big' : 'small', color]">
<span>{{value}}%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
组件ts:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'ngx-circle-progress',
templateUrl: './ngx-circle-progress.component.html',
styleUrls: ['./ngx-circle-progress.component.scss']
})
export class FsCircleProgressComponent implements OnInit {
@Input() isBig: boolean = true;
@Input() value: number = 0;
@Input() color: string = 'green';
classes = [];
constructor() { }
ngOnInit() {
}
}
组件scss:
/****************************************************************
*
* CSS Percentage Circle
* Author: Andre Firchow
*
*****************************************************************/
// Compass utilities
@import "~compass-mixins/lib/compass";
// VARS
$circle-width: 0.08em;
$circle-width-hover: 0.04em;
// colors default
$primary-color: #307bbb;
$secondary-color: #ccc;
$bg-color: #f5f5f5;
$primary-color-green: #4db53c;
$primary-color-orange: #dd9d22;
// colors dark skin
$primary-color-dark: #c6ff00;
$secondary-color-dark: #777;
$bg-color-dark: #666;
$primary-color-green-dark: #5fd400;
$primary-color-orange-dark: #e08833;
// CIRCLE
// classes 2 extend
.rect-auto{
clip: rect(auto, auto, auto, auto);
}
.pie {
position: absolute;
border: $circle-width solid $primary-color;
width: 1 - (2 * $circle-width);
height: 1 - (2 * $circle-width);
clip: rect(0em, 0.5em, 1em, 0em);
border-radius: 50%;
@include rotate(0deg);
}
.pie-fill {
@include rotate(180deg);
}
// main
.c100 {
*, *:before, *:after {
@include box-sizing(content-box);
}
position: relative;
font-size: 120px;
width: 1em;
height: 1em;
border-radius: 50%;
float: left;
margin: 0 0.1em 0.1em 0;
background-color: $secondary-color;
// center circle to its parent
&.center{
float: none;
margin: 0 auto;
}
// bigger size
&.big{
font-size: 240px;
}
// smaller size
&.small{
font-size: 80px;
}
// centered value inside circle
> span {
position: absolute;
width: 100%;
z-index: 1;
left: 0;
top: 0;
width: 5em;
line-height: 5em;
font-size: 0.2em;
color: $secondary-color;
display: block;
text-align: center;
white-space: nowrap;
@include transition-property(all);
@include transition-duration(0.2s);
@include transition-timing-function(ease-out);
}
// background inside the circle
&:after{
position: absolute;
top: $circle-width;
left: $circle-width;
display: block;
content: " ";
border-radius: 50%;
background-color: $bg-color;
width: 1 - (2 * $circle-width);
height: 1 - (2 * $circle-width);
@include transition-property(all);
@include transition-duration(0.2s);
@include transition-timing-function(ease-in);
}
// the slice (mask)
.slice {
position: absolute;
width: 1em;
height: 1em;
clip: rect(0em, 1em, 1em, 0.5em);
}
// circle to show the status
.bar {
@extend .pie;
}
// loop to create all needed elements automatically
@for $j from 51 through 100 {
&.p#{$j} .slice {
@extend .rect-auto;
}
&.p#{$j} .bar:after{
@extend .pie-fill;
}
&.p#{$j} .fill{
@extend .pie;
@extend .pie-fill;
}
}
// loop to rotate all 100 circles
@for $j from 1 through 100 {
&.p#{$j} .bar {
@include rotate((360/100*$j) + deg);
}
}
// hover styles
&:hover{
cursor: default;
> span {
width: 3.33em;
line-height: 3.33em;
font-size: 0.3em;
color: $primary-color;
}
&:after{
top: $circle-width-hover;
left: $circle-width-hover;
width: 1 - (2 * $circle-width-hover);
height: 1 - (2 * $circle-width-hover);
}
}
// override colors for the dark skin
&.dark {
background-color: $secondary-color-dark;
.bar,
.fill{
border-color: $primary-color-dark !important;
}
> span {
color: $secondary-color-dark;
}
&:after{
background-color: $bg-color-dark;
}
&:hover{
> span {
color: $primary-color-dark;
}
}
}
// green skin
&.green{
.bar, .fill { border-color: $primary-color-green !important;}
&:hover{
> span { color: $primary-color-green;}
}
}
&.green.dark{
.bar, .fill { border-color: $primary-color-green-dark !important;}
&:hover{
> span { color: $primary-color-green-dark;}
}
}
// orange skin
&.orange{
.bar, .fill { border-color: $primary-color-orange !important;}
&:hover{
> span { color: $primary-color-orange;}
}
}
&.orange.dark{
.bar, .fill { border-color: $primary-color-orange-dark !important;}
&:hover{
> span { color: $primary-color-orange-dark;}
}
}
}
您需要安装此文件
npm install compass-mixins --save
然后您可以按如下所示在组件中使用它:
<ngx-circle-progress [value]="10"></ngx-circle-progress>