javascript - 通过类的文本样式设置不适用于 ProgressBar.js
问题描述
我试图使用 Angular 在 Ionic 5 上创建 Promodo Timer 应用程序。我正在使用 ProgressBar.js 作为计时器周围的进度条。根据 progressbar.js 文档,他们指定了如何设置文本元素样式,如下所示 -
/ Text options. Text element is a <p> element appended to container
// You can add CSS rules for the text element with the className
// NOTE: When text is set, 'position: relative' will be set to the
// container for centering. You can also prevent all default inline
// styles with 'text.style: null'
// Default: null
text: {
// Initial value for text.
// Default: null
value: 'Text',
// Class name for text element.
// Default: 'progressbar-text'
className: 'progressbar__label',
// Inline CSS styles for the text element.
// If you want to modify all CSS your self, set null to disable
// all default styles.
// If the style option contains values, container is automatically
// set to position: relative. You can disable behavior this with
// autoStyleContainer: false
// If you specify anything in this object, none of the default styles
// apply
// Default: object speficied below
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#f00',
position: 'absolute',
left: '50%',
top: '50%',
padding: 0,
margin: 0,
// You can specify styles which will be browser prefixed
transform: {
prefix: true,
value: 'translate(-50%, -50%)'
}
},
// Only effective if the text.style is not null
// By default position: relative is applied to container if text
// is set. Setting this to false disables that feature.
autoStyleContainer: true,
// Only effective if the shape is SemiCircle.
// If true, baseline for text is aligned with bottom of
// the SVG canvas. If false, bottom line of SVG canvas
// is in the center of text.
// Default: true
alignToBottom: true
},
我可以通过上面的文本对象应用样式,但我试图通过我的 scss 文件使用默认的 className - progressbar-text添加样式。这没有用。我也尝试了自定义类名,但这也不起作用。
我的代码如下 -
import { Component, OnInit } from '@angular/core';
declare var ProgressBar: any;
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
constructor() { }
ngOnInit() {
this.initBar();
}
initBar() {
let progressBar = new ProgressBar.Circle('.timer', {
strokeWidth: 2,
text: {
value: '25:00',
style: null,
className: 'progressbar__label'
},
color: '#f4f4f4',
trailWidth: 0.5,
trailColor: '#010770'
})
}
}
我的scss-
.progressbar__label{
// Text color.
// Default: same as stroke color (options.color)
color: #f00;
position: absolute;
left: 50%;
top: 50%;
padding: 0;
margin: 0;
// You can specify styles which will be browser prefixed
transform: {
prefix: true;
value: translate(-50%, -50%);
}
}
计算元素-
<div class="progressbar__label">25:00</div>
任何帮助,将不胜感激。
阅读 ProgressBar.js文档。
解决方案
我有同样的问题。我注意到该类是在组件上设置的,但它没有收到任何样式。我试过!important
在所有东西上使用,但这也不起作用。
作为一种解决方法,现在,我正在设置style
而不是className
text: {
style: {
...all the styling in your class
}
}
我知道这并不理想,能够将样式放入 scss 文件会很好,但我猜现在必须这样做。
推荐阅读
- azure - 如何使用 ExpressRoute 从家庭网络连接到 Microsoft 云服务?
- python - MacPorts py38-pandas 和 PyPi pandas 有什么区别?
- php - 如何向 wordpress 网站主题添加自定义功能?
- android - Android 深层链接“wc:”方案
- sql - SQL 搜索逗号分隔列表的一部分,在同样有逗号分隔列表的列中
- python - 如何在 Python 中转置二维数组,而不使用内置的 transpose() 函数?
- php - 如何在我的产品发布页面中保存 ACF 选择字段值(位置下拉列表)?
- http - 在客户端超时时终止服务器处理
- mysql - presto create view on CLI 给连接器不支持创建视图错误
- css - CSS文字动画查询