El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
El icono de interfaz de usuario semántica es un glifo que se utiliza para mostrar otra cosa en lugar de texto para ahorrar espacio y tiempo. Los iconos se utilizan para ayudar a los usuarios a navegar y tienen el mismo significado en todos los idiomas y, por lo tanto, muchos elementos no necesitan estar escritos en diferentes idiomas.
Ícono de IU semántica La variación volteada voltea el ícono vertical u horizontalmente. Podemos voltear el icono con la variación de clase volteada .
Icono de IU semántica Clases de variación invertidas:
- horizontalmente: esto voltea el ícono horizontalmente, lo que significa que de izquierda a derecha.
- verticalmente: esto voltea el ícono verticalmente, lo que significa de arriba hacia abajo.
Sintaxis: agregue la clase volteada horizontal o verticalmente al ícono para voltear en la dirección deseada de la siguiente manera.
<i class="horizontally flipped icon">
...
</i>
Ejemplo: El siguiente ejemplo ilustra la variación invertida del icono de la interfaz de usuario semántica. En el siguiente ejemplo, hemos volteado los íconos tanto horizontal como verticalmente.
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>
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong> Semantic UI Icon flipped variation </strong>
<div class="ui segment">
<i class="cloud horizontally
flipped huge icon"></i>
Horizontally Flipped
<i class="microphone vertically
flipped huge icon"></i>
Vertically Flipped
</div>
</center>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#flipped
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA