Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Semantic-UI Step es una forma genial de representar el progreso de cualquier tarea. Por ejemplo, si desea mostrar el envío después del carrito, estos pasos se pueden mostrar mediante el uso de este componente. Este componente nos ofrece un único tipo de pasos con los tres tipos de contenido descripción, icono y enlace. En este artículo, aprenderemos sobre el Icono.
El icono de contenido de paso de interfaz de usuario semántica se usa para incluir el icono en los pasos para que parezcan más significativos.
Clase de contenido de icono de paso de interfaz de usuario semántica:
- icon: Esta clase se utiliza para agregar el icono en los pasos.
Sintaxis:
<div class="step">
<i class="... icon"></i>
</div>
Ejemplo: a continuación se muestra un ejemplo que ilustra el uso del icono de contenido de paso de interfaz de usuario semántica.
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> <center> <h1>Geeksforgeeks</h1> <strong> Semantic-UI Step Icon Content </strong><br><br> <div class="ui steps"> <div class="step"> <i class="truck icon green"></i> <div class="content"> <div class="title">Shipping</div> <div class="description"> Select your Address </div> </div> </div> <div class="step"> <i class="file alternate icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description"> Select your way to pay </div> </div> </div> </div> </center> </body> </html>
Producción:
Contenido del icono de paso de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/step.html#icon
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA