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. En términos de facilidad de uso, la interfaz de usuario semántica es mejor que el estilo Bootstrap. Las principales empresas como Snapchat, Accenture han comenzado a adoptar la interfaz de usuario semántica para la interfaz.
Clase de tipos horizontales de divisor de interfaz de usuario semántica:
- divisor: una forma convencional de dividir el contenido de la página web en diferentes partes de una cuadrícula.
- divisor horizontal: un divisor puede segmentar el contenido de una página web horizontalmente.
En este artículo, analizaremos el tipo de divisor horizontal de la interfaz de usuario semántica. Un divisor se usa generalmente para dividir el contenido de manera concisa en diferentes secciones.
Sintaxis:
<div class="ui center aligned basic segment">
<h3 class="ui header"> ... </h3>
<div class="ui horizontal divider"> ... </div>
<p> ... </p>
</div>
El divisor de tipo horizontal dividirá la sección en dos mitades iguales horizontalmente como se muestra a continuación. Son útiles cuando se van a dividir varios párrafos y de forma concisa en la misma página.
Ejemplo 1: Este ejemplo ilustra el divisor horizontal entre dos componentes:
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> <div class="ui center aligned basic segment"> <div class="ui left icon action input"> <i class="search icon"></i> <input type="text" placeholder="Type your favorite food"> <div class="ui yellow submit button">Search</div> </div> <div class="ui horizontal divider"> Or </div> <div class="ui left aligned basic segment"> <div class="ui left icon action input"> <i class="search icon"></i> <input type="text" placeholder="Enter restaurant name"> <div class="ui red submit button">Find</div> <div class="ui right aligned basic segment"> <div class="ui left icon action input"> <div class="ui green submit button"> Order History </div> </div> <div class="ui horizontal divider"> Thanks </div> </div> <div class="ui red labeled icon button"> Add food to your cart <i class="shopping cart icon"></i> </div> </div> </div> </div> </body> </html>
Producción:
Tipo de divisor horizontal
Ejemplo 2: el segundo ejemplo muestra un divisor de tipo horizontal que divide dos secciones de párrafo utilizando el tipo de divisor horizontal en la interfaz de usuario semántica.
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> <center> <h1>Geeksforgeeks</h1> <strong>Semantic UI Horizontal Divider </strong> </center> <div class="ui horizontal divider"> This is a Horizontal divider </div> <strong>Semantic-UI Checkbox-Types:</strong> <br><br> <div class="ui center aligned basic segment"> <p> Please go through the terms and conditions thoroughly </p> <input type="radio" name="radio"> <label>Accept terms and conditions</label> <div class="ui horizontal divider"> OR </div> </div> <div class="ui center aligned basic segment"> <p> Do you like us to send a copy of our updates via email </p> <input type="checkbox" name="example"> <label>Sign up for newsletters </label> <div class="ui horizontal divider"> Thanks </div> </div> </body> </html>
Producción:
Divisor horizontal de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/divider.html#horizontal-divider
Publicación traducida automáticamente
Artículo escrito por jssuriyakumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA