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.
La interfaz de usuario semántica proporciona a los usuarios varios íconos diferentes que se pueden usar para diferentes propósitos con una hermosa interfaz de usuario. Los íconos agregan más belleza al sitio web que la representación textual.
En este artículo, veamos sobre el conjunto de iconos de fecha y hora . La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para la fecha y la hora, que se utilizaron principalmente para agregar iconos de widgets de fecha y hora en las aplicaciones.
Conjunto de iconos de interfaz de usuario semántica Clases de fecha y hora:
- campana: Esta clase se utiliza para mostrar el icono de la campana.
- contorno de la campana: esta clase se utiliza para mostrar el contorno del icono de la campana.
- campana inclinada: esta clase se utiliza para mostrar el icono de campana inclinada.
- contorno de barra oblicua de campana: esta clase se utiliza para mostrar un contorno del icono de barra oblicua de campana.
- calendario: esta clase se utiliza para mostrar el icono del calendario.
- esquema del calendario: esta clase se utiliza para mostrar el contorno del icono del calendario.
- calendario alternativo: esta clase se utiliza para mostrar el icono de calendario alternativo.
- esquema alternativo del calendario: esta clase se utiliza para mostrar el esquema del icono del calendario alternativo.
- verificación de calendario: esta clase se utiliza para mostrar el icono de verificación de calendario.
- esquema de verificación de calendario: esta clase se utiliza para mostrar el esquema de los iconos de verificación de calendario.
- calendario menos: esta clase se utiliza para mostrar el icono del calendario menos.
- calendario menos contorno: Esta clase se utiliza para mostrar el contorno del icono del calendario menos.
- calendario plus: esta clase se utiliza para mostrar el icono de calendario plus.
- calendario más contorno: esta clase se utiliza para mostrar el contorno del calendario más el icono.
- tiempos del calendario: esta clase se utiliza para mostrar el icono de tiempos del calendario.
- esquema de horas del calendario: esta clase se utiliza para mostrar el contorno del icono de las horas del calendario.
- reloj: esta clase se utiliza para mostrar el contorno del icono del reloj.
- contorno del reloj: esta clase se utiliza para mostrar el contorno del icono del reloj.
- reloj de arena: esta clase se utiliza para mostrar el icono del reloj de arena.
- contorno del reloj de arena: esta clase se utiliza para mostrar el contorno del icono del reloj de arena.
- final del reloj de arena: esta clase se utiliza para mostrar el icono del final del reloj de arena.
- Mitad del reloj de arena: esta clase se utiliza para mostrar el contorno del icono de la mitad del reloj de arena.
- inicio de reloj de arena: esta clase se utiliza para mostrar el contorno del icono de inicio de reloj de arena.
- cronómetro: esta clase se utiliza para mostrar el icono del cronómetro.
Sintaxis:
<i class="icon date_and_time_icon"></i>
Ejemplo 1: este código demuestra todas las clases de conjuntos de iconos de fecha y hora.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Date & Time</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong> Semantic-UI Icon Set Date and Time </strong> <br /> <br /> <div class="ui grid"> <div class="three wide column"> <i class="icon big bell "></i> </div> <div class="three wide column"> <i class="icon big bell outline"></i> </div> <div class="three wide column"> <i class="icon big bell slash"></i> </div> <div class="three wide column"> <i class="icon big bell slash outline"></i> </div> <div class="three wide column"> <i class="icon big calendar"></i> </div> <div class="three wide column"> <i class="icon big calendar outline"></i> </div> <div class="three wide column"> <i class="icon big calendar alternate"></i> </div> <div class="three wide column"> <i class="icon big calendar alternate outline"></i> </div> <div class="three wide column"> <i class="icon big calendar check"></i> </div> <div class="three wide column"> <i class="icon big calendar check outline"></i> </div> <div class="three wide column"> <i class="icon big calendar minus"></i> </div> <div class="three wide column"> <i class="icon big calendar minus outline"></i> </div> <div class="three wide column"> <i class="icon big calendar plus"></i> </div> <div class="three wide column"> <i class="icon big calendar plus outline "></i> </div> <div class="three wide column"> <i class="icon big calendar times"></i> </div> <div class="three wide column"> <i class="icon big calendar times outline "></i> </div> <div class="three wide column"> <i class="icon big clock"></i> </div> <div class="three wide column"> <i class="icon big clock outline"></i> </div> <div class="three wide column"> <i class="icon big hourglass"></i> </div> <div class="three wide column"> <i class="icon big hourglass outline"></i> </div> <div class="three wide column"> <i class="icon big hourglass end"></i> </div> <div class="three wide column"> <i class="icon big hourglass half "></i> </div> <div class="three wide column"> <i class="icon big hourglass start"></i> </div> <div class="three wide column"> <i class="icon big stopwatch"></i> </div> </div> </center> </body> </html>
Producción:
Conjunto de iconos de interfaz de usuario semántica Fecha y hora
Ejemplo 2: este código muestra un ejemplo de clases de conjuntos de iconos de fecha y hora.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Date & Time</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong> Semantic-UI Icon Set Date and Time </strong> <br /> <br /> <div class="container"> <div class="ui label"> <i class="bell blue icon"></i> 3 </div> </div> </center> </body> </html>
Producción:
Conjunto de iconos de interfaz de usuario semántica Fecha y hora
Referencia: https://semantic-ui.com/elements/icon.html#date–time
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA