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 diferentes elementos geniales para usar para hacer que su sitio web se vea más sorprendente. En este artículo, vamos a aprender acerca de las variaciones de marcador de posición.
El marcador de posición de la interfaz de usuario semántica se utiliza para reservar el espacio para el contenido que pronto aparecerá en el diseño de una página web. El contenido de imagen de marcador de posición de interfaz de usuario semántica se utiliza para mostrar el diseño de marcador de posición para contenido de 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.
Contenido de imagen de marcador de posición de interfaz de usuario semántica Clases utilizadas:
- imagen: esta clase se utiliza para mostrar el diseño del marcador de posición para el contenido de la imagen.
- cuadrado: esta clase se utiliza para mostrar el diseño del marcador de posición de la imagen en forma cuadrada (proporción 1:1).
- rectangular: esta clase se utiliza para mostrar el diseño del marcador de posición de la imagen en una proporción cuadrada (proporción 4:3).
Sintaxis:
<div class="ui placeholder">
<div class="image"></div>
</div>
Ejemplo 1: en este ejemplo, crearemos un diseño simple de blog que contiene imágenes y contenido de encabezado.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Placeholder Image Content </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Placeholder Image Content</h3> </div> <div class="ui container placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="image header"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, crearemos un diseño de tarjeta simple que contiene imagen y contenido.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Placeholder Image Content </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Placeholder Image Content</h3> </div> <br><br> <div class="ui container five column grid"> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image"></div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image"></div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image header"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="image"></div> </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 3: En este ejemplo, crearemos un diseño de imagen simple que contiene formas cuadradas y rectangulares.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Placeholder Image Content </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Placeholder Image Content</h3> </div> <br><br> <div class="ui container three column grid"> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="square image"></div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="rectangle image"></div> </div> </div> </div> <div class="column"> <div class="ui raised segment"> <div class="ui placeholder"> <div class="square image"></div> </div> </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/placeholder.html#image