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 invertidas en las variaciones del divisor admitidas en la interfaz de usuario semántica.
Semantic-UI Divider Inverted Variation invertirá los colores originales a su color directamente opuesto como se muestra a continuación. Son útiles cuando la sección debe resaltarse por separado. Simplemente agregando una string «invertida» a los nombres de los íconos, los colores del divisor se pueden invertir.
Variaciones del divisor de interfaz de usuario semántica Clase de variante invertida:
- invertido: Esta clase se usa para hacer que el divisor tenga sus colores invertidos.
Sintaxis:
<div class ="ui inverted center aligned basic segment">
<div class="ui inverted divider">
....
....
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra la variación invertida del divisor horizontal .
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 Divider Variations Inverted Variant </strong> <div class="ui inverted center aligned basic segment"> <div class="ui inverted message"> <p> CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. </p> </div> <div class="ui inverted horizontal divider"> Or </div> <div class="ui inverted message"> <p> JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also known as scripting language for web pages. It is well-known for the development of web pages, many non-browser environments also use it. </p> </div> </div> </body> </html>
Producción:
Variaciones del divisor de interfaz de usuario semántica Variante invertida
Ejemplo 2: En el siguiente ejemplo, podemos ver una variación de divisor invertido 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 Divider Variations Inverted Variant</strong> <div class="ui inverted segment"> <div class="ui inverted two column very relaxed grid"> <div class="column"> <h3 class="ui inverted 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 inverted header"> Semantic UI - Inverted divider variation </h3> <p> Semantic-UI Divider - Inverted Variation will invert the original colors to their straight opposite color as shown below. They are useful when the section has to be highlighted separately. By simply adding an "inverted" string to the icon names, the divider colors can be inverted. </p> </div> </div> <div class="ui inverted vertical divider">AND</div> </div> </body> </html>
Producción:
Variaciones del divisor de interfaz de usuario semántica Variante invertida
Referencia: https://semantic-ui.com/elements/divider.html#inverted
Publicación traducida automáticamente
Artículo escrito por jssuriyakumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA