gpt4 book ai didi

angular-material - 角形 Material 进度微调器

转载 作者:行者123 更新时间:2023-12-04 15:17:35 29 4
gpt4 key购买 nike

有谁知道当模式确定时如何在 Material 进度微调器中显示不完整的部分。现在我是这样的
image1 .

但我想要这样
image2

最佳答案

这可以做到,但它主要是一个黑客。这个想法是使用一个带有与微调器匹配的边框的 div 并将其放在微调器后面。

Progress spinner with background

Example on StackBlitz

<div class="spinner-container">
<div class="spinner-background">{{spinner.value}}%</div>
<mat-progress-spinner #spinner
color="primary"
mode="determinate"
value="75">
</mat-progress-spinner>
</div>

诀窍是 div 样式,它需要调整大小和位置以完全匹配您的微调器:
.spinner-container {
position: relative;
}
.spinner-background {
position: absolute;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
overflow: hidden;
border-color: rgba(103, 58, 183, 0.12);
border-radius: 50%;
border-style: solid;
border-width: 10px;
}

编辑:

我为此构建了一个简单的包装组件,可以自动处理大小和主题着色:

StackBlitz

旋转容器.ts:
import { coerceNumberProperty } from '@angular/cdk/coercion';
import { AfterViewInit, Component, ElementRef, Input, SimpleChanges } from '@angular/core';
import { CanColor, mixinColor, ThemePalette } from '@angular/material/core';

const BASE_SIZE = 100;
const BASE_STROKE_WIDTH = 10;
export class SpinnerContainerBase {
constructor(public _elementRef: ElementRef) { }
}
export const _SpinnerContainerMixinBase = mixinColor(SpinnerContainerBase, 'primary');

/**
* @title Progress spinner container for spinner circle background and value display
*/
@Component({
selector: 'spinner-container',
templateUrl: 'spinner-container.html',
styleUrls: ['spinner-container.scss'],
host: {
'class': 'spinner-container',
'[style.width.px]': 'diameter',
'[style.height.px]': 'diameter',
'[style.line-height.px]': 'diameter'
}
})
export class SpinnerContainer extends _SpinnerContainerMixinBase implements AfterViewInit, CanColor {

constructor(public _elementRef: ElementRef) {
super(_elementRef);
}

@Input() color: ThemePalette = 'primary';

@Input()
get diameter(): number { return this._diameter; }
set diameter(size: number) {
this._diameter = coerceNumberProperty(size);
}
private _diameter: number = BASE_SIZE;

@Input() displayWith: (number) => string | number;

@Input()
get strokeWidth() { return this._strokeWidth; }
set strokeWidth(newValue: number) {
if (newValue) {
this._strokeWidth = Math.min(this.diameter / 2, coerceNumberProperty(newValue));
if (this._spinnerBackgroundElement) {
this._spinnerBackgroundElement.style.borderWidth = this.strokeWidth + 'px';
}
}
}
private _strokeWidth: number = BASE_STROKE_WIDTH;

@Input()
get value(): number { return this._value; }
set value(newValue: number) {
this._value = Math.max(0, Math.min(100, coerceNumberProperty(newValue)));
}
private _value: number = 0;

private _spinnerBackgroundElement: HTMLElement;

ngAfterViewInit() {
this._spinnerBackgroundElement = this._elementRef.nativeElement.querySelector('.spinner-background');
this._spinnerBackgroundElement.style.borderWidth = this.strokeWidth + 'px';
}
}

旋转容器.html
<div class="spinner-value" *ngIf="displayWith">{{displayWith(value)}}</div>
<div class="spinner-background"></div>
<mat-progress-spinner
[color]="color"
[diameter]="diameter"
mode="determinate"
[strokeWidth]="strokeWidth"
[value]="value">
</mat-progress-spinner>

旋转容器.scss
:host {
display: block;
position: relative;

.spinner-value, .spinner-background {
position: absolute;
width: inherit;
height: inherit;
}

.spinner-value {
text-align: center;
overflow: hidden;
}

.spinner-background {
opacity: .12;
box-sizing: border-box;
border-radius: 50%;
border-style: solid;
}
}

_spinner-container-theme.scss
@mixin spinner-container-theme($theme) {

$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);

.spinner-background {
.spinner-container.mat-primary & {
color: mat-color($primary);
}
.spinner-container.mat-accent & {
color: mat-color($accent);
}
.spinner-container.mat-warn & {
color: mat-color($warn);
}
}
}

关于angular-material - 角形 Material 进度微调器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52288444/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com