Semantic-UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap. En este artículo veamos los botones de tipo énfasis.
Estos botones de tipo de énfasis se pueden usar para los diferentes niveles de énfasis personalizándolos según los requisitos. En este artículo, veamos cómo se pueden usar los botones para mostrar diferentes niveles de énfasis.
Clase de tipo de énfasis de botón de interfaz de usuario semántica: el color del botón se puede configurar según el nivel de énfasis, pero no hay una clase especial de nivel de énfasis, pero el color y el título del botón pueden indicar el nivel de énfasis. Básicamente, usamos clases primarias y secundarias para denotar el énfasis.
Sintaxis:
<button class="ui ... color_class ... button">
Emphasis level
</button>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h1> GeeksforGeeks </h1> <strong> Semantic-UI Button Emphasis Type </strong> <div class="ui container"> <button class="ui primary button"> Save </button> <button class="ui secondary button"> Preview </button> <button class="ui button"> Discard </button> </div> </div> </body> </html>
Producción:
Tipo de énfasis de botón de interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h1> GeeksforGeeks </h1> <strong> Semantic-UI Button Emphasis Type </strong> <div class="ui container"> <button class="ui blue button"> Proceed </button> <button class="ui button"> Cancel </button> </div> </div> </body> </html>
Producción:
Tipo de énfasis de botón de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#emphasis
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA