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.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es el componente Segmentos. Los segmentos se utilizan para mostrar diferentes secciones de contenido relacionado. Dependiendo de los requisitos de uso de los segmentos, existen diferentes tipos.
Tipos de segmento de IU semántica:
- Segmento: Segmento básico que muestra contenido.
- Segmento de marcador de posición : esta clase se utiliza para mostrar contenido condicional.
- Elevado : esta clase se utiliza para elevar el segmento.
- Stacked: esta clase se utiliza para mostrar segmentos compuestos por varias páginas.
- Apilado : esta clase se usa para hacer que el segmento se vea como una pila de páginas.
- Segmento vertical : esta clase se utiliza para formatear segmentos verticalmente.
Sintaxis:
<div class="ui segment"> ... </div>
Ejemplo: El siguiente ejemplo ilustra diferentes tipos de segmentos.
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> <b>Semantic UI Segment Types</b> <hr> <div class="ui segment" style="width:700px;"> <h3>Segment</h3> <p> GeeksforGeeks Courses - Interactive LIVE & Self-Paced Courses. </p> </div> <div class="ui raised segment" style="width:700px;"> <h3>Raised Segment</h3> <p> Data Structures and Algorithms - Self Paced. Most popular course on DSA trusted by over 6 ,000 students! </p> </div> <div class="ui piled segment" style="width:700px;"> <h3>Piled Segment</h3> <p> Complete Interview Preparation - Self Paced. A placement preparation pack built with years of expertise. </p> </div> <div class="ui stacked segment" style="width:700px;"> <h3>Stacked Segment</h3> <p> Amazon SDE Preparation Test Series. A test series that will help you prepare for coding interviews for Amazon. </p> </div> </div> </body> </html>
Producción:
Tipos de segmento
Referencia: https://semantic-ui.com/elements/segment.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA