Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:angular-creacion-componentes [2026/10/24 23:40] – La clase CSS del botón es c-boton (BEM), no boton claude
+++ clase:daw:diw:angular-creacion-componentes [2026/10/24 23:42] (actual) – Modificadores del botón con BEM: c-boton--funcion-* claude
@@ Línea 258: / Línea 258: @@
-  * Ahora hay que definir las clases CSS en el archivo ''boton.scss''
+  * Ahora hay que definir las clases CSS en el archivo ''boton.scss''. Los nombres siguen [[clase:daw:diw:sistema-diseno-bem|BEM]]: el bloque es ''c-boton'' y cada función es un modificador del bloque, ''c-boton--funcion-normal''.
 <sxh css;highlight: [20-24,26-30,32-36];  title: boton.scss>
@@ Línea 280: / Línea 280: @@
 }
-.funcion--normal {
+.c-boton--funcion-normal {
   border-color: #0056b8;
   background-color: #0056b8;
@@ Línea 286: / Línea 286: @@
 }
-.funcion--alternativa {
+.c-boton--funcion-alternativa {
   border-color: #ed8936;
   background-color: #ed8936;
@@ Línea 292: / Línea 292: @@
 }
-.funcion--peligrosa {
+.c-boton--funcion-peligrosa {
   border-color: #c53030;
   background-color: #c53030;
@@ Línea 305: / Línea 305: @@
 <sxh html;highlight: [1];title:boton.html>
-<button class="c-boton funcion--{{funcion()}}">
+<button class="c-boton c-boton--funcion-{{funcion()}}">
   <ng-content></ng-content>
 </button>
@@ Línea 311: / Línea 311: @@
 <note tip>
-Notar el truco de ''class="funcion--<nowiki>{{funcion()}}</nowiki>"''
+Notar el truco de ''class="c-boton c-boton--funcion-<nowiki>{{funcion()}}</nowiki>"''
 </note>
@@ Línea 339: / Línea 339: @@
 <sxh html;highlight: [1,3]; title:boton.html>
-<a class="c-boton funcion--{{funcion()}}" [attr.href]="href() || null">
+<a class="c-boton c-boton--funcion-{{funcion()}}" [attr.href]="href() || null">
   <ng-content></ng-content>
 </a>
@@ Línea 417: / Línea 417: @@
 <sxh html;highlight: [1]; title:boton.html>
-<a class="c-boton funcion--{{funcion()}}" [attr.href]="href() || null" (click)="pulsado.emit()">
+<a class="c-boton c-boton--funcion-{{funcion()}}" [attr.href]="href() || null" (click)="pulsado.emit()">
   <ng-content></ng-content>
 </a>