ng-cw-v12
Version:
Angular UI Component Library
42 lines • 6.14 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
export class AnimatedGradientTextComponent {
constructor() {
/** 文本内容 */
this.ncText = '';
/** 动画速度，值越大，动画速度越快 */
this.ncSpeed = 1;
/** 渐变颜色数组 */
this.ncColors = ['#ffaa40', '#9c40ff'];
/** 渐变方向 */
this.ncDirection = 'horizontal';
}
ngOnInit() {
}
get gradientColors() {
if (!this.ncColors || this.ncColors.length <= 1) {
return '#ffaa40, #9c40ff, #ffaa40';
}
// 将数组展开，最后一项添加第一项以形成循环
return [...this.ncColors, this.ncColors[0]].join(', ');
}
}
AnimatedGradientTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AnimatedGradientTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AnimatedGradientTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: AnimatedGradientTextComponent, selector: "nc-animated-gradient-text", inputs: { ncText: "ncText", ncSpeed: "ncSpeed", ncColors: "ncColors", ncDirection: "ncDirection" }, ngImport: i0, template: "<span style=\"--gradient-colors: {{gradientColors}}; --bg-size: {{ncSpeed * 300}}%;\" \r\n class=\"nc-animate-gradient-text {{ncDirection}}\">\r\n {{ncText}}\r\n</span>", styles: [".nc-animate-gradient-text{display:inline;background-clip:text;-webkit-background-clip:text;color:transparent}.nc-animate-gradient-text.horizontal{background-image:linear-gradient(to right,var(--gradient-colors));background-size:var(--bg-size) 100%;animation:gradient-horizontal 8s ease infinite}.nc-animate-gradient-text.vertical{background-image:linear-gradient(to bottom,var(--gradient-colors));background-size:100% var(--bg-size);animation:gradient-vertical 8s ease infinite}@keyframes gradient-horizontal{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes gradient-vertical{0%{background-position:50% 0}50%{background-position:50% 100%}to{background-position:50% 0}}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AnimatedGradientTextComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-animated-gradient-text',
templateUrl: './animated-gradient-text.component.html',
styleUrls: ['./animated-gradient-text.component.less']
}]
}], ctorParameters: function () { return []; }, propDecorators: { ncText: [{
type: Input
}], ncSpeed: [{
type: Input
}], ncColors: [{
type: Input
}], ncDirection: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5pbWF0ZWQtZ3JhZGllbnQtdGV4dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL2FuaW1hdGVkLWdyYWRpZW50LXRleHQvYW5pbWF0ZWQtZ3JhZGllbnQtdGV4dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL2FuaW1hdGVkLWdyYWRpZW50LXRleHQvYW5pbWF0ZWQtZ3JhZGllbnQtdGV4dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFTekQsTUFBTSxPQUFPLDZCQUE2QjtJQVV4QztRQVRBLFdBQVc7UUFDRixXQUFNLEdBQVcsRUFBRSxDQUFDO1FBQzdCLHNCQUFzQjtRQUNiLFlBQU8sR0FBVyxDQUFDLENBQUM7UUFDN0IsYUFBYTtRQUNKLGFBQVEsR0FBYSxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUMsQ0FBQztRQUNyRCxXQUFXO1FBQ0YsZ0JBQVcsR0FBb0IsWUFBWSxDQUFDO0lBRXJDLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7SUFFRCxJQUFJLGNBQWM7UUFDaEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLElBQUksQ0FBQyxFQUFFO1lBQy9DLE9BQU8sMkJBQTJCLENBQUM7U0FDcEM7UUFDRCx1QkFBdUI7UUFDdkIsT0FBTyxDQUFDLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3pELENBQUM7OzBIQXJCVSw2QkFBNkI7OEdBQTdCLDZCQUE2QixxS0NUMUMsZ0xBR087MkZETU0sNkJBQTZCO2tCQUx6QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSwyQkFBMkI7b0JBQ3JDLFdBQVcsRUFBRSx5Q0FBeUM7b0JBQ3RELFNBQVMsRUFBRSxDQUFDLHlDQUF5QyxDQUFDO2lCQUN2RDswRUFHVSxNQUFNO3NCQUFkLEtBQUs7Z0JBRUcsT0FBTztzQkFBZixLQUFLO2dCQUVHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRUcsV0FBVztzQkFBbkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuZXhwb3J0IHR5cGUgTmNEaXJlY3Rpb25UeXBlID0gJ2hvcml6b250YWwnIHwgJ3ZlcnRpY2FsJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmMtYW5pbWF0ZWQtZ3JhZGllbnQtdGV4dCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2FuaW1hdGVkLWdyYWRpZW50LXRleHQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2FuaW1hdGVkLWdyYWRpZW50LXRleHQuY29tcG9uZW50Lmxlc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQW5pbWF0ZWRHcmFkaWVudFRleHRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIC8qKiDmlofmnKzlhoXlrrkgKi9cclxuICBASW5wdXQoKSBuY1RleHQ6IHN0cmluZyA9ICcnO1xyXG4gIC8qKiDliqjnlLvpgJ/luqbvvIzlgLzotorlpKfvvIzliqjnlLvpgJ/luqbotorlv6sgKi9cclxuICBASW5wdXQoKSBuY1NwZWVkOiBudW1iZXIgPSAxO1xyXG4gIC8qKiDmuJDlj5jpopzoibLmlbDnu4QgKi9cclxuICBASW5wdXQoKSBuY0NvbG9yczogc3RyaW5nW10gPSBbJyNmZmFhNDAnLCAnIzljNDBmZiddO1xyXG4gIC8qKiDmuJDlj5jmlrnlkJEgKi9cclxuICBASW5wdXQoKSBuY0RpcmVjdGlvbjogTmNEaXJlY3Rpb25UeXBlID0gJ2hvcml6b250YWwnO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICB9XHJcblxyXG4gIGdldCBncmFkaWVudENvbG9ycygpOiBzdHJpbmcge1xyXG4gICAgaWYgKCF0aGlzLm5jQ29sb3JzIHx8IHRoaXMubmNDb2xvcnMubGVuZ3RoIDw9IDEpIHtcclxuICAgICAgcmV0dXJuICcjZmZhYTQwLCAjOWM0MGZmLCAjZmZhYTQwJztcclxuICAgIH1cclxuICAgIC8vIOWwhuaVsOe7hOWxleW8gO+8jOacgOWQjuS4gOmhuea3u+WKoOesrOS4gOmhueS7peW9ouaIkOW+queOr1xyXG4gICAgcmV0dXJuIFsuLi50aGlzLm5jQ29sb3JzLCB0aGlzLm5jQ29sb3JzWzBdXS5qb2luKCcsICcpO1xyXG4gIH1cclxufVxyXG4iLCI8c3BhbiBzdHlsZT1cIi0tZ3JhZGllbnQtY29sb3JzOiB7e2dyYWRpZW50Q29sb3JzfX07IC0tYmctc2l6ZToge3tuY1NwZWVkICogMzAwfX0lO1wiIFxyXG4gICAgY2xhc3M9XCJuYy1hbmltYXRlLWdyYWRpZW50LXRleHQge3tuY0RpcmVjdGlvbn19XCI+XHJcbiAgICB7e25jVGV4dH19XHJcbjwvc3Bhbj4iXX0=