Las etiquetas Spectre son etiquetas de texto formateadas para resaltar información informativa. En este artículo, aprenderemos a crear etiquetas redondas o con forma de píldora. La forma predeterminada de la etiqueta es cuadrada. Podemos elegir el color de la etiqueta aplicando las clases de color como todos sabemos primario, acierto, error, etc. Para cambiar el color tenemos que usar color de etiqueta. Para crear etiquetas, debe agregar la clase de etiqueta a los elementos <span> o <small>.
Spectre Labels Clase de etiquetas redondeadas:
- etiqueta redondeada: esta clase se utiliza para dar forma a las etiquetas en una etiqueta con forma de píldora.
Sintaxis:
<span class="label label-rounded label-primary">
primary label
</span>
El siguiente ejemplo ilustra las etiquetas redondeadas de Spectre Labels:
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Icons Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Labels Rounded labels</strong> <br><br> <div> <div> <strong><u>Labels on span Elements:</u></strong> <br> <span class="label label-rounded"> Default label </span> <span class="label label-rounded label-primary"> Primary label </span> <span class="label label-rounded label-success"> Success label </span> <span class="label label-rounded label-error"> Error label </span> <span class="label label-rounded label-warning"> Warning label </span> </div> <br> <div> <strong><u>Labels on small Elements:</u></strong> <br> <small class="label label-rounded"> Default label </small> <small class="label label-rounded label-primary"> Primary label </small> <small class="label label-rounded label-success"> Success label </small> <small class="label label-rounded label-error"> Error label </small> <small class="label label-rounded label-warning"> Warning label </small> </div> </div> </center> </body> </html>
Producción:
Etiquetas Spectre Etiquetas redondeadas
Referencia: https://picturepan2.github.io/spectre/elements/labels.html#labels-rounded
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA