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.
Un elemento de paso se utiliza para mostrar al usuario el estado de finalización o progreso de una secuencia específica de tareas.
En este artículo, veremos la variación adjunta del paso de la interfaz de usuario semántica, es decir, cómo el elemento de paso se puede adjuntar a otros elementos.
Clases de variación adjuntas del paso de interfaz de usuario semántica:
- adjunto superior: estas clases se utilizan en el contenedor de pasos que se adjuntará a la parte superior de un elemento.
- adjunto inferior: estas clases se utilizan en el contenedor de pasos que se adjuntará al final de un elemento.
Sintaxis:
<div class="ui top attached steps">
...
<div class="ui attached segment">
...
</div>
</div>
Ejemplo 1: El siguiente ejemplo muestra cómo adjuntar elementos de paso encima de un elemento usando la clase adjunta y la superior .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Step Attached Variation</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.steps{
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui header green">GeeksforGeeks</h1>
<h3>Semantic-UI - Step Attached Variation</h3>
</div>
<div class="ui three top attached steps">
<div class="step">
<i class="user icon"></i>
<div class="content">
<div class="title">Profile</div>
<div class="description">
Complete Your Profile
</div>
</div>
</div>
<div class="active step">
<i class="payment icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">
Enter the Billing Information
</div>
</div>
</div>
<div class="disabled step">
<i class="info icon"></i>
<div class="content">
<div class="title">OTP Verification</div>
<div class="description">Verify Yourself</div>
</div>
</div>
</div>
<div class="ui attached segment">
<p>GeeksforGeeks is Awesome.</p>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: el siguiente ejemplo muestra cómo adjuntar elementos de paso a la parte inferior de un elemento utilizando la clase adjunta y la parte inferior .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Step Attached Variation</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.attached.segment{
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui header green">GeeksforGeeks</h1>
<h3>Semantic-UI - Step Attached Variation</h3>
</div>
<div class="ui attached segment">
<p>GeeksforGeeks is Awesome.</p>
</div>
<div class="ui three bottom attached steps">
<div class="step">
<i class="user icon"></i>
<div class="content">
<div class="title">Profile</div>
<div class="description">
Complete Your Profile
</div>
</div>
</div>
<div class="active step">
<i class="payment icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">
Enter the Billing Information
</div>
</div>
</div>
<div class="disabled step">
<i class="info icon"></i>
<div class="content">
<div class="title">OTP Verification</div>
<div class="description">Verify Yourself</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: El siguiente ejemplo muestra cómo adjuntar elementos de paso en ambos lados de un elemento simultáneamente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Step Attached Variation</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.top.steps {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="ui header green">GeeksforGeeks</h1>
<h3>Semantic-UI - Step Attached Variation</h3>
</div>
<div class="ui three top attached steps">
<div class="step">
<i class="user icon"></i>
<div class="content">
<div class="title">Profile</div>
<div class="description">Complete Your Profile</div>
</div>
</div>
<div class="active step">
<i class="payment icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">
Enter the Billing Information
</div>
</div>
</div>
<div class="disabled step">
<i class="info icon"></i>
<div class="content">
<div class="title">OTP Verification</div>
<div class="description">Verify Yourself</div>
</div>
</div>
</div>
<div class="ui attached segment">
<p>GeeksforGeeks is Awesome.</p>
</div>
<div class="ui three bottom attached steps">
<div class="step">
<i class="user icon"></i>
<div class="content">
<div class="title">Profile</div>
<div class="description">Complete Your Profile</div>
</div>
</div>
<div class="active step">
<i class="payment icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">
Enter the Billing Information
</div>
</div>
</div>
<div class="disabled step">
<i class="info icon"></i>
<div class="content">
<div class="title">OTP Verification</div>
<div class="description">Verify Yourself</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/step.html#attached