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. Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar, y utiliza CSS y JQuery predefinidos para incorporar diferentes marcos.
En este artículo, aprenderemos sobre el contenido de marcador de posición de interfaz de usuario semántica . Se utiliza un marcador de posición para reservar espacio para el contenido que pronto aparecerá en un diseño. Se puede utilizar en cuatro tipos de contenido: párrafos , encabezados , encabezados e imágenes .
Contenido de marcador de posición de interfaz de usuario semántica:
- Líneas : se utiliza para que el marcador de posición pueda contener líneas de texto.
- Párrafos : se utiliza para mostrar el marcador de posición para el diseño del contenido del párrafo. Se utilizan varios párrafos para agrupar las líneas.
- Encabezados : se utiliza para mostrar el marcador de posición para el contenido del encabezado. El tamaño de bloque del contenido del encabezado es ligeramente mayor que el tamaño de bloque del párrafo.
- Imágenes : se utiliza para mostrar el diseño del marcador de posición para el contenido de la imagen. Además, use las clases .square y .rectangular para establecer la relación de aspecto del diseño del marcador de posición de la imagen.
Sintaxis:
<div class="ui placeholder">
<div class="line"></div>
...
<div class="header">
<div class="line"></div>'
...
</div>
...
<div class="paragraph">
<div class="line"></div>
...
</div>
...
<div class="image">
...
</div>
</div>
Ejemplo 1: El siguiente ejemplo ilustra el uso de líneas en Contenido de marcador de posición.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1 class="ui header green">GeeksforGeeks</h1> <h2>Semantic UI Placeholder Content</h2> </center> <div class="ui placeholder"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente ejemplo ilustra el uso del encabezado de la imagen como contenido de marcador de posición.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1 class="ui header green">GeeksforGeeks</h1> <h2>Semantic UI Placeholder Content</h2> </center> <div class="ui placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> </div> </div> </body> </html>
Producción:
Ejemplo 3: El siguiente ejemplo ilustra un párrafo como contenido de marcador de posición.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1 class="ui header green">GeeksforGeeks</h1> <h2>Semantic UI Placeholder Content</h2> </center> <div class="ui placeholder"> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="paragraph"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </body> </html>
Producción:
Ejemplo 4: El siguiente ejemplo ilustra una imagen como contenido de marcador de posición.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1 class="ui header green">GeeksforGeeks</h1> <h2>Semantic UI Placeholder Content</h2> </center> <div class="ui placeholder"> <div class="image"></div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/placeholder.html