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.
El contenido es un elemento de nuestro sitio web que muestra datos informativos al usuario. Es fundamental tener contenido en nuestro sitio web para que las cosas parezcan fáciles y mejorarlas. Este contenido puede ser una imagen, datos textuales, etc.
Contenido del paso de la interfaz de usuario semántica: hay tres tipos de contenido en la interfaz de usuario semántica.
- Descripción : Esto muestra una descripción de nuestros pasos usando la clase de descripción .
- Icono : Esto muestra un icono relacionado con nuestro paso usando la etiqueta <i> con la clase de icono .
- Enlace : Esto permite que el paso se convierta en un enlace usando la etiqueta <a>.
Sintaxis:
<div class="ui steps"> <a class="step"> <i class="... icon"></i> <div class="description">....</div> </a> .... </div>
Ejemplo 1: En el siguiente programa, usaremos el contenido de la descripción.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Step Content</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<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>
<br>
<div class="ui green huge header">
GeeksforGeeks
</div>
<div class="ui large header">
Semantic-UI Step Groups
</div>
<div class="ui steps">
<div class="step">
<div class="title">
John Cena
</div>
<!--Description -->
<div class="description">
Professional Wrestler
</div>
</div>
<div class="step">
<div class="title">
Vivian Richards
</div>
<!--Description-->
<div class="description">
Legendary Cricketer
</div>
</div>
</div >
</body>
</html>
Producción:
Contenido del paso de la interfaz de usuario semántica
Ejemplo 2: En el siguiente programa, usaremos el contenido del icono.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<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>
<br>
<div class="ui green huge header">
GeeksforGeeks
</div>
<div class="ui large header">
Semantic-UI Step Groups
</div>
<div class="ui steps">
<div class="step">
<!--Icon -->
<i class="motorcycle icon"></i>
<div class="content">
<div class="title">
Motorcycle
</div>
<!--Description -->
<div class="description">
This is a motorcycle
</div>
</div>
</div>
<div class="step">
<!-- Icon -->
<i class="futbol icon"></i>
<div class="content">
<div class="title">
Football
</div>
<!--Description -->
<div class="description">
This is the Football game
</div>
</div>
</div>
</div >
</body>
</html>
Producción:
Contenido del paso de la interfaz de usuario semántica
Ejemplo 3: En el siguiente programa, usaremos el contenido del enlace.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<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>
<br>
<div class="ui green huge header">
GeeksforGeeks
</div>
<div class="ui large header">
Semantic-UI Step Groups
</div>
<div class="ui steps">
<!--Link Group-->
<a class="active step">
<!--Icon Group-->
<i class="motorcycle icon"></i>
<div class="content">
<div class="title">
Delivery
</div>
<!--Description Group-->
<div class="description">
Taking Fastest Route
</div>
</div>
</a>
<!--Link Group-->
<a class="step">
<div class="content">
<div class="title">
Total Amount
</div>
<!--Description Group-->
<div class="description">
600 RS.
</div>
</div>
</a>
</div>
</body>
</html>
Producción:
Contenido del paso de la interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/step.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA