Гурӯҳҳои CSS-ро дар Angular ба таври оммавӣ илова кардан

Бо ёрии директиви ngClass шумо метавонед дар як тег якбора як маҷмӯи гурӯҳҳои CSS-ро фаъол ва ғайрифаъол кунед. Директива объектро қимат мегирад, ки калидҳои он гурӯҳҳо хоҳанд буд ва қиматҳо - арзишҳои булӣ мебошанд. Гурӯҳ фаъол мешавад, агар барои он арзиши true таъин шуда бошад ва ғайрифаъол, агар false бошад.

Биёед дар амал бубинем. Фарз мекунем, ки мо гурӯҳҳои зеринро дорем:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Биёед дар мисолҳо бубинем, ки чӣ гуна ин гурӯҳҳоро барои блок фаъол ва ғайрифаъол кунем.

Мисол

Як гурӯҳро фаъол ва дигареро ғайрифаъол мекунем:

<div [ngClass]="{blue: true, bold: false}">
	матн
</div>

Мисол

Фарз мекунем, ки ҳолатҳои гурӯҳҳо дар хусусиятҳои класс нигоҳ дошта мешаванд:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Намоёнии гурӯҳро вобаста ба арзишҳои хусусиятҳои мо мебандем:

<div [ngClass]="{blue: isBlue, bold: isBold}">
	матн
</div>

Мисол

Дар як хусусият метавонад объекти комил бо гурӯҳҳо ва ҳолатҳо бошад:

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

Ин объектро ба блоки мо мебандем:

<div [ngClass]="styles">
	матн
</div>

Мисол

Метавон арзишҳоро барои объекти мо аз хусусиятҳои дигари класс ба даст овард:

export class AppComponent {
	public isBlue: boolean = false;
	public isBold: boolean = true;

	public styles = {
		blue: this.isBlue,
		bold: this.isBold,
	}
}

Ин объектро ба блоки мо мебандем:

<div [ngClass]="styles">
	матн
</div>

Вазифаҳои амалӣ

Ду гурӯҳи CSS эҷод кунед. Бигзор яке аз онҳо заминаи блокро муайян кунад ва дуюм - андозаи ҳарфро.

Ду тугма созед. Бигзор фишурдани тугмаи аввал гурӯҳи аввалро toggle кунад, ва фишурдани тугмаи дуюм - гурӯҳи дуюмро toggle кунад.