d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { NgIf, NgClass } from '@angular/common';

/**
 * 面包屑组件
 * @name thy-breadcrumb
 * @order 10
 */
@Component({
    selector: 'thy-breadcrumb',
    template: `
        <div class="thy-breadcrumb-icon" *ngIf="svgIconName || iconClasses">
            <thy-icon *ngIf="svgIconName; else iconFont" [thyIconName]="svgIconName"></thy-icon>
            <ng-template #iconFont>
                <i [ngClass]="iconClasses"></i>
            </ng-template>
        </div>
        <ng-content></ng-content>
    `,
    exportAs: 'ThyBreadcrumb',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'thy-breadcrumb',
        '[class.thy-breadcrumb-separator]': '!!thySeparator',
        '[class.thy-breadcrumb-separator-slash]': 'thySeparator === "slash"',
        '[class.thy-breadcrumb-separator-backslash]': 'thySeparator === "backslash"',
        '[class.thy-breadcrumb-separator-vertical-line]': 'thySeparator === "vertical-line"'
    },
    standalone: true,
    imports: [NgIf, ThyIconComponent, NgClass]
})
export class ThyBreadcrumbComponent {
    iconClasses: string[];
    svgIconName: string;

    /**
     * 面包屑的前缀 展示图标，如 folder-fill
     */
    @Input()
    set thyIcon(icon: string) {
        this.setIcon(icon);
    }

    /**
     * 面包屑的分隔符，不传值默认为 ">"
     * @type slash | backslash | vertical-line
     */
    @Input() thySeparator: 'slash' | 'backslash' | 'vertical-line';

    private setIcon(icon: string) {
        if (icon) {
            if (icon.includes('wtf')) {
                const classes = icon.split(' ');
                if (classes.length === 1) {
                    classes.unshift('wtf');
                }
                this.iconClasses = classes;
            } else {
                this.svgIconName = icon;
            }
        } else {
            this.iconClasses = null;
            this.svgIconName = null;
        }
    }
}

1	import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
2	import { ThyIconComponent } from 'ngx-tethys/icon';
3	import { NgIf, NgClass } from '@angular/common';
4
5	/**
6	* 面包屑组件
7	* @name thy-breadcrumb
8	* @order 10
9	*/
10	@Component({	1✔
11	selector: 'thy-breadcrumb',
12	template: `	×
13	<div class="thy-breadcrumb-icon" *ngIf="svgIconName \|\| iconClasses">
14	<thy-icon *ngIf="svgIconName; else iconFont" [thyIconName]="svgIconName"></thy-icon>
15	<ng-template #iconFont>	×
16	<i [ngClass]="iconClasses"></i>	×
17	</ng-template>	×
18	</div>	×
19	<ng-content></ng-content>	×
20	`,
21	exportAs: 'ThyBreadcrumb',	×
22	changeDetection: ChangeDetectionStrategy.OnPush,
23	host: {
24	class: 'thy-breadcrumb',	×
25	'[class.thy-breadcrumb-separator]': '!!thySeparator',
26	'[class.thy-breadcrumb-separator-slash]': 'thySeparator === "slash"',
27	'[class.thy-breadcrumb-separator-backslash]': 'thySeparator === "backslash"',
28	'[class.thy-breadcrumb-separator-vertical-line]': 'thySeparator === "vertical-line"'	×
29	},	×
30	standalone: true,
31	imports: [NgIf, ThyIconComponent, NgClass]
32	})	1✔
33	export class ThyBreadcrumbComponent {
34	iconClasses: string[];
35	svgIconName: string;
36
37	/**	1✔
38	* 面包屑的前缀展示图标，如 folder-fill
39	*/
40	@Input()
41	set thyIcon(icon: string) {
42	this.setIcon(icon);
43	}
44
45	/**
46	* 面包屑的分隔符，不传值默认为 ">"
47	* @type slash \| backslash \| vertical-line
48	*/
49	@Input() thySeparator: 'slash' \| 'backslash' \| 'vertical-line';
50
51	private setIcon(icon: string) {
52	if (icon) {
53	if (icon.includes('wtf')) {
54	const classes = icon.split(' ');
55	if (classes.length === 1) {
56	classes.unshift('wtf');
57	}
58	this.iconClasses = classes;
59	} else {
60	this.svgIconName = icon;
61	}
62	} else {
63	this.iconClasses = null;
64	this.svgIconName = null;
65	}
66	}
67	}

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