Semantic UI es un marco CSS de código abierto basado en less y jQuery . Viene con sus módulos y elementos preconstruidos que permiten a los desarrolladores desarrollar sitios web receptivos y hermosos en menos tiempo. En este artículo, veremos el tipo elevado de segmento de IU semántica .
Un segmento se usa para agrupar contenido similar, lo que mejora la experiencia del usuario y ayuda a los usuarios a navegar por su contenido de manera eficiente. Un segmento elevado es un tipo de segmento que está formateado para elevarse por encima de la página al aplicarle la propiedad box-shadow.
Clase de tipo elevado de segmento de interfaz de usuario semántica:
- elevado: esta clase se usa en el elemento del segmento para que se vea elevado sobre el resto de la página.
Sintaxis:
<div class="ui segment raised">
...
</div>
Ejemplo 1: El siguiente ejemplo muestra un uso simple de la clase levantada para levantar un segmento por encima de la página.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Segment Raised Type</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
.ui.container {
text-align: center;
}
h3#subheading {
margin-top: 0px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 id="subheading">
Semantic UI - Segment Raised Type
</h3>
</div>
<div class="ui segment">
<p>This is a normal segment.</p>
</div>
<div class="ui segment raised">
<p>This is a raised segment.</p>
</div>
<div class="ui segment">
<p>This is a normal segment.</p>
</div>
</div>
</body>
</html>
Producción:
Tipo elevado de segmento de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo muestra el uso de la clase elevada en las diferentes variaciones del segmento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Segment Raised Type</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
.ui.container {
text-align: center;
}
h3#subheading {
margin-top: 0px;
margin-bottom: 30px;
}
.column {
display: flex !important;
justify-content: center;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 id="subheading">
Semantic UI - Segment Raised Type
</h3>
</div>
<p><b>Raised Type Segment with Color Variation</b></p>
<div class="ui segment raised red ">
<p>This is a red colored segment.</p>
</div>
<div class="ui segment red ">
<p>This is a red colored segment with
<i>raised</i> class.</p>
</div>
<p><b>Raised Type Variation with Circular Variation</b></p>
<div class="ui grid">
<div class="eight wide column">
<div class="ui segment raised circular ">
<img height="50"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png">
</div>
</div>
<div class="eight wide column">
<div class="ui segment circular ">
<img height="50"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png">
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Tipo elevado de segmento de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/segment.html#raised