Semantic UI es un marco de desarrollo front-end gratuito de código abierto que está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar . Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
Un divisor de interfaz de usuario semántica generalmente se usa para dividir el contenido de manera concisa en diferentes secciones. La interfaz de usuario semántica tiene 3 tipos diferentes de divisores, cada tipo puede tener 5 variaciones diferentes. En este artículo, analicemos las variaciones ocultas en las variaciones del divisor admitidas en la interfaz de usuario semántica.
Un divisor oculto de la interfaz de usuario semántica divide el contenido de la página web sin crear una línea divisoria, a diferencia de otras variaciones. El divisor de variación oculto divide la sección en dos mitades como cualquier otro divisor, pero oculta la línea visualmente evidente. Este tipo de divisor deja algo de espacio por encima y por debajo de la línea divisoria invisible.
Variaciones del divisor de interfaz de usuario semántica Clase de variante oculta:
- oculto:
Sintaxis:
<h3 class="ui header">Section One</h3> <div class="ui hidden divider"></div> <h3 class="ui header">Section Two</h3>
El siguiente ejemplo ilustra la variante oculta de las variaciones del divisor de la interfaz de usuario semántica:
Ejemplo 1: este ejemplo oculta el divisor horizontal utilizando la clase de divisor oculto .
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> <h1>GeeksforGeeks</h1> <strong>Semantic UI Hidden divider variation</strong> <h3 class="ui header"> Semantic UI </h3> <p> Semantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. In terms of user-friendliness, Semantic UI is better than Bootstrap. </p> <div class="ui hidden divider"></div> <h3 class="ui header"> Semantic UI - Hidden type Divider </h3> <p> Hidden variation divider divides the section into two halves like any other divider but it hides the visually evident line. This type of divider leaves some space above and below the invisible divider line. </p> </body> </html>
Producción:
Variaciones del divisor de interfaz de usuario semántica Variante oculta
Ejemplo 2: En el siguiente ejemplo, podemos ver una variación de divisor oculto utilizando un divisor vertical, que divide dos secciones en secciones verticales invertidas.
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> <h1>GeeksforGeeks</h1> <strong> Semantic UI - Hidden divider variation </strong> <div class="ui segment"> <div class="ui two column very relaxed grid"> <div class="column"> <h3 class="ui header"> Semantic UI </h3> <p> Semantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. In terms of user-friendliness, Semantic UI is better than Bootstrap. </p> </div> <div class="column"> <h3 class="ui header"> Semantic UI - Hidden divider variation </h3> <p> Hidden variation divider divides the section into two halves like any other divider but it hides the visually evident line. This type of divider leaves some space above and below the invisible divider line. </p> </div> </div> <div class="ui hidden vertical divider"></div> </div> </body> </html>
Producción:
Variaciones del divisor de interfaz de usuario semántica Variante oculta
Referencia: https://semantic-ui.com/elements/divider.html#hidden
Publicación traducida automáticamente
Artículo escrito por jssuriyakumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA