d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Component, Input, TemplateRef, ViewEncapsulation, OnChanges, SimpleChanges, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { InputBoolean } from 'ngx-tethys/core';
import { useHostRenderer } from '@tethys/cdk/dom';
import { NgIf, NgTemplateOutlet } from '@angular/common';

export type ThyDividerStyle = 'solid' | 'dashed';

export type ThyDividerTextDirection = 'left' | 'right' | 'center';

export type ThyDividerColor = 'lighter' | 'light' | 'danger' | 'primary' | 'success' | 'warning' | string;

/**
 * 分割线
 * @name thy-divider
 */
@Component({
    preserveWhitespaces: false,
    encapsulation: ViewEncapsulation.None,
    selector: 'thy-divider',
    template: `
        <div *ngIf="templateContent" class="thy-divider-inner-template">
            <ng-template *ngTemplateOutlet="templateContent"></ng-template>
        </div>

        <span *ngIf="textContent" class="thy-divider-inner-text">{{ textContent }}</span>
    `,
    host: {
        '[class.thy-divider]': `true`,
        '[class.thy-divider-horizontal]': `!thyVertical`,
        '[class.thy-divider-vertical]': `thyVertical`,
        '[class.thy-divider-with-content]': `textContent || templateContent`,
        '[class.thy-divider-with-content-left]': `(textContent || templateContent) && thyTextDirection === 'left'`,
        '[class.thy-divider-with-content-right]': `(textContent || templateContent) && thyTextDirection === 'right'`,
        '[class.thy-divider-with-content-center]': `(textContent || templateContent) && thyTextDirection === 'center'`,
        '[class.thy-divider-solid]': `thyStyle === 'solid'`,
        '[class.thy-divider-dashed]': `thyStyle === 'dashed'`,
        '[class.thy-divider-deeper]': `!!thyDeeper`
    },
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [NgIf, NgTemplateOutlet]
})
export class ThyDividerComponent implements OnChanges, OnInit {
    templateContent: TemplateRef<HTMLElement>;

    textContent: string;

    private hostRenderer = useHostRenderer();

    /**
     * 是否垂直方向
     * @default false
     */
    @Input() @InputBoolean() thyVertical: boolean;

    /**
     * 分割线的风格
     * @type solid(实线) | dashed(虚线)
     */
    @Input() thyStyle: ThyDividerStyle = 'solid';

    /**
     * 分割线的颜色，默认 #eee，light 为 #ddd，primary 主色，success 成功色，warning 警告色，danger 危险色
     * @type 'lighter' | 'light' | 'danger' | 'primary' | 'success' | 'warning' | string
     */
    @Input() thyColor: ThyDividerColor = 'default';

    /**
     * 中间文本内容，支持文字和模板
     */
    @Input() set thyText(value: string | TemplateRef<HTMLElement>) {
        if (value instanceof TemplateRef) {
            this.templateContent = value;
        } else {
            this.textContent = value;
        }
    }

    /**
     * 中间内容的方向
     * @type left | right | center
     */
    @Input() thyTextDirection: ThyDividerTextDirection = 'center';

    /**
     * 颜色加深，已经废弃，请使用 thyColor="light" 代替
     * @deprecated
     */
    @InputBoolean()
    @Input()
    thyDeeper = false;

    constructor() {}

    ngOnInit(): void {
        this.setColor(this.thyColor);
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.thyColor && !changes.thyColor.isFirstChange()) {
            this.setColor(changes.thyColor.currentValue);
        }
    }

    setColor(color: ThyDividerColor) {
        this.hostRenderer.updateClass([`thy-divider-${color}`]);
    }
}

1	import { Component, Input, TemplateRef, ViewEncapsulation, OnChanges, SimpleChanges, OnInit, ChangeDetectionStrategy } from '@angular/core';
2	import { InputBoolean } from 'ngx-tethys/core';
3	import { useHostRenderer } from '@tethys/cdk/dom';
4	import { NgIf, NgTemplateOutlet } from '@angular/common';
5
6	export type ThyDividerStyle = 'solid' \| 'dashed';
7
8	export type ThyDividerTextDirection = 'left' \| 'right' \| 'center';
9
10	export type ThyDividerColor = 'lighter' \| 'light' \| 'danger' \| 'primary' \| 'success' \| 'warning' \| string;	1✔
11
12	/**	×
13	* 分割线	×
14	* @name thy-divider
15	*/
16	@Component({	×
17	preserveWhitespaces: false,
18	encapsulation: ViewEncapsulation.None,
19	selector: 'thy-divider',
20	template: `	×
21	<div *ngIf="templateContent" class="thy-divider-inner-template">	×
22	<ng-template *ngTemplateOutlet="templateContent"></ng-template>	×
23	</div>	×
24		×
25	<span *ngIf="textContent" class="thy-divider-inner-text">{{ textContent }}</span>
26	`,
27	host: {	×
28	'[class.thy-divider]': `true`,
29	'[class.thy-divider-horizontal]': `!thyVertical`,
30	'[class.thy-divider-vertical]': `thyVertical`,	×
31	'[class.thy-divider-with-content]': `textContent \|\| templateContent`,	×
32	'[class.thy-divider-with-content-left]': `(textContent \|\| templateContent) && thyTextDirection === 'left'`,
33	'[class.thy-divider-with-content-right]': `(textContent \|\| templateContent) && thyTextDirection === 'right'`,
34	'[class.thy-divider-with-content-center]': `(textContent \|\| templateContent) && thyTextDirection === 'center'`,
35	'[class.thy-divider-solid]': `thyStyle === 'solid'`,	×
36	'[class.thy-divider-dashed]': `thyStyle === 'dashed'`,
37	'[class.thy-divider-deeper]': `!!thyDeeper`	1✔
38	},	1✔
39	changeDetection: ChangeDetectionStrategy.OnPush,
40	standalone: true,
41	imports: [NgIf, NgTemplateOutlet]
42	})
43	export class ThyDividerComponent implements OnChanges, OnInit {
44	templateContent: TemplateRef<HTMLElement>;
45
46	textContent: string;
47		1✔
48	private hostRenderer = useHostRenderer();
49
50	/**
51	* 是否垂直方向	1✔
52	* @default false
53	*/
54	@Input() @InputBoolean() thyVertical: boolean;
55		1✔
56	/**
57	* 分割线的风格
58	* @type solid(实线) \| dashed(虚线)
59	*/
60	@Input() thyStyle: ThyDividerStyle = 'solid';
61
62	/**
63	* 分割线的颜色，默认 #eee，light 为 #ddd，primary 主色，success 成功色，warning 警告色，danger 危险色
64	* @type 'lighter' \| 'light' \| 'danger' \| 'primary' \| 'success' \| 'warning' \| string
65	*/
66	@Input() thyColor: ThyDividerColor = 'default';
67
68	/**
69	* 中间文本内容，支持文字和模板
70	*/
71	@Input() set thyText(value: string \| TemplateRef<HTMLElement>) {
72	if (value instanceof TemplateRef) {
73	this.templateContent = value;
74	} else {
75	this.textContent = value;
76	}
77	}
78
79	/**
80	* 中间内容的方向
81	* @type left \| right \| center
82	*/
83	@Input() thyTextDirection: ThyDividerTextDirection = 'center';
84
85	/**
86	* 颜色加深，已经废弃，请使用 thyColor="light" 代替
87	* @deprecated
88	*/
89	@InputBoolean()
90	@Input()
91	thyDeeper = false;
92
93	constructor() {}
94
95	ngOnInit(): void {
96	this.setColor(this.thyColor);
97	}
98
99	ngOnChanges(changes: SimpleChanges): void {
100	if (changes.thyColor && !changes.thyColor.isFirstChange()) {
101	this.setColor(changes.thyColor.currentValue);
102	}
103	}
104
105	setColor(color: ThyDividerColor) {
106	this.hostRenderer.updateClass([`thy-divider-${color}`]);
107	}
108	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous