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 grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Semantic-UI Divider Vertical se usa para dividir la sección en dos mitades iguales verticalmente, como se muestra a continuación. Son útiles cuando la sección debe dividirse en columnas. Los sistemas modernos de inicio de sesión y registro utilizan divisores verticales. Una característica adicional de un divisor vertical es que cambiará automáticamente a un divisor horizontal en resoluciones móviles cuando se use dentro de una cuadrícula apilable.
En este artículo, analicemos el tipo de divisor vertical de la interfaz de usuario semántica. Un divisor se usa generalmente para dividir el contenido de manera concisa en diferentes secciones.
Clase de tipo vertical de divisor de interfaz de usuario semántica:
- divisor vertical: esta clase se utiliza para segmentar el contenido de la página web verticalmente.
Sintaxis:
<div class="ui vertical divider">
...
</div>
Nota: Debido a un cambio en la implementación del W3C de elementos absolutamente posicionados en contenedores flexibles, los divisores verticales ahora solo admiten divisiones 50/50 automáticamente.
Ejemplo: Un divisor vertical que divide una sección en dos.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI vertical divider</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <h2 style="color:green"> GeeksforGeeks </h2> <b> <p>Semantic UI vertical divider</p> </b> <div class="ui placeholder segment"> <div class="ui two column very relaxed stackable grid"> <div class="column"> <div class="ui form"> <div class="field"> <label>Username</label> <div class="ui left icon input"> <input type="text" placeholder="Username"> <i class="user icon"></i> </div> </div> <div class="field"> <label>Password</label> <div class="ui left icon input"> <input type="password"> <i class="lock icon"></i> </div> </div> <div class="ui blue submit button">Login</div> </div> </div> <div class="middle aligned column"> <div class="ui big button"> <i class="signup icon"></i> Sign Up </div> </div> </div> <div class="ui vertical divider"> Or </div> </div> </body> </html>
Producción:
Tipo vertical de divisor de interfaz de usuario semántica
Ejemplo 2: El ejemplo anterior que se muestra es un tipo de rejilla apilable separada por un divisor vertical .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI vertical divider</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <h2 style="color:green"> GeeksforGeeks </h2> <b> <p>Semantic UI vertical divider</p> </b> <div class="ui placeholder segment"> <div class="ui two column very relaxed stackable grid"> <div class="column"> <div class="ui form"> <div class="field"> <label>Email id</label> <div class="ui left icon input"> <input type="text" placeholder="Enter your email"> <i class="user icon"></i> </div> </div> <div class="ui blue submit button"> Click here to subscribe </div> </div> </div> <div class="middle aligned column"> <div class="ui big button"> <i class="Blogs & Articles"></i> Sign Up </div> </div> </div> <div class="ui vertical divider"> Or </div> </div> </body> </html>
Producción:
Tipo vertical de divisor de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/divider.html#vertical-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