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 progreso de la interfaz de usuario semántica permite a un usuario mostrar la progresión de una tarea. Semantic UI Progress nos ofrece 2 tipos, 3 contenidos, 5 estados y 5 variaciones. En este artículo, aprenderemos sobre la variación adjunta Semantic UI Progress.
La variación adjunta de progreso de la interfaz de usuario semántica se utiliza para crear una barra de progreso que puede mostrar el progreso de un elemento en el archivo adjunto superior o inferior.
Clases de variación adjuntas de progreso de la interfaz de usuario semántica:
- adjunto superior: esta clase se utiliza para crear una barra de progreso que puede mostrar el progreso de un elemento en la parte superior.
- adjunto inferior: esta clase se utiliza para crear una barra de progreso que puede mostrar el progreso de un elemento en la parte inferior.
Sintaxis:
<div class="ui segment">
<div class="ui Attached-Variation-Class progress">
<div class="bar"></div>
</div>
....
</div>
Ejemplo 1: El siguiente ejemplo ilustra la variación adjunta de progreso superior e inferior de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic-UI Progress Attached Variation </strong>
</center>
<div class="ui segment">
<div class="ui top attached progress">
<div class="bar"></div>
</div>
<p>GFG gfg</p>
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
</div>
<div class="ui button">Increase</div>
<script>
$('.ui.button').on('click', function () {
$('.progress').progress('increment');
});
</script>
</body>
</html>
Producción:
Variación adjunta del progreso de la interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo ilustra la variación adjunta del progreso inferior de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic-UI Progress Attached Variation</strong>
<div class="ui card">
<div class="image">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</div>
<div class="content">
<a class="header">GeeksforGeeks Logo</a>
</div>
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
</div>
<div class="ui button">Increase</div>
<script>
$('.ui.button').on('click', function () {
$('.progress').progress('increment');
});
</script>
</center>
</body>
</html>
Producción:
Variación adjunta del progreso de la interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/progress.html#attached
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA