La interfaz de usuario semántica es un marco de código abierto que ofrece una variedad de componentes para hacer que su interfaz de usuario sea más significativa. Uno de ellos es «Segmento».
La interfaz de usuario semántica tiene un componente de segmento para mostrar diferentes secciones de contenido relacionado. Los usuarios también pueden mostrar los segmentos sobre un fondo oscuro. Veamos esta variación de un segmento.
Variación invertida del segmento semántico de la interfaz de usuario: si desea mostrar un segmento sobre un fondo negro, puede utilizar un segmento invertido. Un solo segmento o un grupo de segmentos que muestren contenido relacionado se pueden mostrar en un fondo oscuro. Crearemos una interfaz de usuario para mostrar la variación invertida del segmento.
Clase de variación invertida del segmento de interfaz de usuario semántica:
- invertido: Esta clase se usa para hacer que el segmento se invierta (en cuanto al color).
Sintaxis:
<div class="ui inverted segment">
...
</div>
Estos ejemplos demuestran un segmento o grupo de segmentos en variación invertida usando la clase invertida .
Ejemplo 1:
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> <div class="ui container"> <br /><br /> <h2 class="ui header green">GeeksforGeeks</h2> <strong>Semantic UI Segment Inverted Variation</strong> </br> <hr><br /> <div class="ui inverted segment"> <center> <h3>Welcome to geeksforgeeks.</h3> <p>Learn anything you want</p> <p> Get tutorial of anything related to computer science. </p> <p>Courses on programming</p> <p>Solve programming problems.</p> <p>Help other by writing articles.</p> </center> </div> </div> </body> </html>
Producción:
Segmento invertido
Ejemplo 2:
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> <div class="ui container"> <br /><br /> <h2 class="ui header green">GeeksforGeeks</h2> <strong>Semantic UI Segment Inverted Variation</strong> </br> <hr><br /> <div class="ui inverted segments"> <div class="ui inverted segment"> <p>Data Structure</p> </div> <div class="ui inverted green segment"> <p>Web Programming</p> </div> <div class="ui inverted segment"> <p>Competitive Programming</p> </div> </div> </div> </body> </html>
Producción:
Segmentos invertidos
Enlace de referencia: https://semantic-ui.com/elements/segment.html#inverted
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA