d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
import { InputBoolean } from 'ngx-tethys/core';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { coerceBooleanProperty } from 'ngx-tethys/util';

/**
 * 布局头部组件
 * @name thy-header
 * @order 10
 */
@Component({
    selector: 'thy-header',
    preserveWhitespaces: false,
    templateUrl: './header.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: `thy-layout-header`,
        '[class.thy-layout-header-sm]': `thySize === 'sm'`,
        '[class.thy-layout-header-lg]': `thySize === 'lg'`,
        '[class.thy-layout-header-xlg]': `thySize === 'xlg'`,
        '[class.thy-layout-header-divided]': `divided`,
        '[class.thy-layout-header-shadow]': `thyShadow`
    },
    standalone: true,
    imports: [NgTemplateOutlet, NgIf, ThyIconComponent, NgClass]
})
export class ThyHeaderComponent implements OnInit {
    public iconClass: string;

    public svgIconName: string;

    divided = false;

    /**
     * 底部是否有分割线，已废弃，请使用 thyDivided
     * @deprecated please use thyDivided
     */
    @Input('thyHasBorder')
    set thyHasBorder(value: string) {
        this.divided = coerceBooleanProperty(value);
    }

    /**
     * 底部是否有分割线
     */
    @Input()
    @InputBoolean()
    set thyDivided(value: string | boolean) {
        this.divided = value as boolean;
    }

    /**
     * 头部大小
     * @type md | sm | lg | xlg
     */
    @Input('thySize') thySize: 'sm' | 'md' | 'lg' | 'xlg' = 'md';

    /**
     * 头部标题
     */
    @Input() thyTitle: string;

    /**
     * 图标前缀，被弃用，图标使用 SVG 图标
     */
    @Input() thyIconPrefix = 'wtf';

    /**
     * 图标，SVG 图标名称
     */
    @Input('thyIcon')
    set thyIcon(value: string) {
        if (value) {
            if (value.includes('wtf')) {
                this.iconClass = `${this.thyIconPrefix} ${value}`;
            } else {
                this.svgIconName = value;
            }
        } else {
            this.iconClass = null;
            this.svgIconName = null;
        }
    }

    /**
     * 底部是否有阴影
     * @default false
     */
    @Input() @InputBoolean() thyShadow = false;

    /**
     * 头部自定义标题模板，`<ng-template #headerTitle></ng-template>`
     * @type TemplateRef
     */
    @ContentChild('headerTitle')
    public titleTemplateRef: TemplateRef<any>;

    /**
     * 头部自定义内容模板，`<ng-template #headerContent></ng-template>`
     * @type TemplateRef
     */
    @ContentChild('headerContent')
    public contentTemplateRef: TemplateRef<any>;

    /**
     * 头部自定义操作模板，`<ng-template #headerOperation></ng-template>`
     * @type TemplateRef
     */
    @ContentChild('headerOperation')
    public operationTemplateRef: TemplateRef<any>;

    constructor() {}

    ngOnInit() {}
}

1	import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
2	import { ChangeDetectionStrategy, Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
3	import { InputBoolean } from 'ngx-tethys/core';
4	import { ThyIconComponent } from 'ngx-tethys/icon';
5	import { coerceBooleanProperty } from 'ngx-tethys/util';
6
7	/**
8	* 布局头部组件
9	* @name thy-header
10	* @order 10
11	*/
12	@Component({
13	selector: 'thy-header',	1✔
14	preserveWhitespaces: false,
15	templateUrl: './header.component.html',	×
16	changeDetection: ChangeDetectionStrategy.OnPush,
17	host: {
18	class: `thy-layout-header`,	×
19	'[class.thy-layout-header-sm]': `thySize === 'sm'`,
20	'[class.thy-layout-header-lg]': `thySize === 'lg'`,
21	'[class.thy-layout-header-xlg]': `thySize === 'xlg'`,	×
22	'[class.thy-layout-header-divided]': `divided`,	×
23	'[class.thy-layout-header-shadow]': `thyShadow`	×
24	},
25	standalone: true,
26	imports: [NgTemplateOutlet, NgIf, ThyIconComponent, NgClass]	×
27	})
28	export class ThyHeaderComponent implements OnInit {
29	public iconClass: string;
30		×
31	public svgIconName: string;	×
32
33	divided = false;
34
35	/**	×
36	* 底部是否有分割线，已废弃，请使用 thyDivided	×
37	* @deprecated please use thyDivided	×
38	*/	×
39	@Input('thyHasBorder')
40	set thyHasBorder(value: string) {
41	this.divided = coerceBooleanProperty(value);	1✔
42	}	1✔
43
44	/**
45	* 底部是否有分割线
46	*/
47	@Input()
48	@InputBoolean()
49	set thyDivided(value: string \| boolean) {
50	this.divided = value as boolean;
51	}
52
53	/**
54	* 头部大小
55	* @type md \| sm \| lg \| xlg	1✔
56	*/
57	@Input('thySize') thySize: 'sm' \| 'md' \| 'lg' \| 'xlg' = 'md';
58
59	/**
60	* 头部标题	1✔
61	*/
62	@Input() thyTitle: string;
63
64	/**	1✔
65	* 图标前缀，被弃用，图标使用 SVG 图标
66	*/
67	@Input() thyIconPrefix = 'wtf';
68
69	/**
70	* 图标，SVG 图标名称
71	*/
72	@Input('thyIcon')
73	set thyIcon(value: string) {
74	if (value) {
75	if (value.includes('wtf')) {
76	this.iconClass = `${this.thyIconPrefix} ${value}`;
77	} else {
78	this.svgIconName = value;
79	}
80	} else {
81	this.iconClass = null;
82	this.svgIconName = null;
83	}
84	}
85
86	/**
87	* 底部是否有阴影
88	* @default false
89	*/
90	@Input() @InputBoolean() thyShadow = false;
91
92	/**
93	* 头部自定义标题模板，`<ng-template #headerTitle></ng-template>`
94	* @type TemplateRef
95	*/
96	@ContentChild('headerTitle')
97	public titleTemplateRef: TemplateRef<any>;
98
99	/**
100	* 头部自定义内容模板，`<ng-template #headerContent></ng-template>`
101	* @type TemplateRef
102	*/
103	@ContentChild('headerContent')
104	public contentTemplateRef: TemplateRef<any>;
105
106	/**
107	* 头部自定义操作模板，`<ng-template #headerOperation></ng-template>`
108	* @type TemplateRef
109	*/
110	@ContentChild('headerOperation')
111	public operationTemplateRef: TemplateRef<any>;
112
113	constructor() {}
114
115	ngOnInit() {}
116	}

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