La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
El elemento de interfaz de usuario semántica presenta una gran colección de tipos de datos similares en un sitio. El elemento puede contener una imagen, encabezado, descripción, botones, fecha, etc. El elemento es la colección de elementos en la interfaz de usuario semántica.
La variación de contenido flotante del elemento de la interfaz de usuario semántica se utiliza para hacer flotar cualquier contenido dentro del contenedor de contenido del elemento hacia la izquierda o hacia la derecha, utilizando la clase flotante.
Clases de variación de contenido flotante de elemento de interfaz de usuario semántica:
- left floated : Esto significa que el contenido dentro del elemento flotará en la dirección izquierda del contenido.
- derecho flotante: Esto significa que el contenido dentro del elemento flotará en la dirección correcta del contenido.
Sintaxis: agregue la clase flotante izquierda o derecha al contenido que desea cambiar la dirección flotante de la siguiente manera:
<div class="ui items">
<div class="item">
...
<div class="content">
...
<div class="ui right floated button"> ... </div>
</div>
</div>
</div>
Ejemplo: El siguiente ejemplo ilustra la variación flotante del elemento de la interfaz de usuario semántica. En este ejemplo, tenemos un botón que podemos flotar a la izquierda o flotar a la derecha simplemente alternando la clase flotante izquierda y flotante derecha.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"
/>
<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>
</head>
<body>
<div class="ui container">
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic UI Item Floated Content Variation</strong>
</center>
</div>
<div class="ui items">
<div class="item">
<div class="ui small image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
/>
</div>
<div class="middle aligned content">
<div class="header">
Welcome to GeeksforGeeks
</div>
<div class="description">
A computer science portal for geeks</div>
<div class="extra">
<button class="ui mini left floated button"
onclick="toggleFloat()">
Change Float direction
</button>
</div>
</div>
</div>
</div>
<script>
function toggleFloat() {
$("button").toggleClass("left floated")
.toggleClass("right floated");
}
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/views/item.html#floated-content
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA