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. Utiliza una clase para agregar CSS a los elementos.
Los modales generalmente se usan para desviar la atención del usuario a una parte separada del contenido principal, ya que las interacciones adicionales del sitio web pueden depender de alguna acción que debe realizar el usuario. La interfaz de usuario semántica nos proporciona un modal de estilo personalizado.
Echemos un vistazo a las diversas clases de contenido modal de la interfaz de usuario semántica, antes de saltar al contenido modal.
Contenido modal de la interfaz de usuario semántica:
- Encabezado : el encabezado de interfaz de usuario semántica agrega un encabezado al modal que actúa como título modal.
- Contenido: el contenido de la interfaz de usuario semántica agrega información sobre el modal.
- Contenido de la imagen : el contenido de la imagen de la interfaz de usuario semántica agrega imágenes a la información modal, lo que aumenta el atractivo visual modal.
- Acciones : las acciones de IU semántica se utilizan para interactuar con el modal.
Nota: para crear un modal, debemos aplicar la clase modal al elemento deseado .
Sintaxis:
<div class="ui modal">
<div class="header">....</div>
<div class="content">
...
</div>
<div class="image content">
<img class="image" src="...">
...
</div>
<div class="actions">
<div class="ui approve button">...</div>
<div class="ui cancel button">...</div>
</div>
</div>
Nota: Utilice la sintaxis anterior según la necesidad mediante una combinación de las clases mencionadas anteriormente. Consulte los ejemplos a continuación para una mejor comprensión de las clases.
Ejemplo 1: en el siguiente ejemplo, hemos demostrado un encabezado modal .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Content</title>
<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"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="width:100vw; height:100vh;">
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Modal Content</h4>
<hr>
<br />
<div class="ui basic modal">
<div class="ui header">
A Modal Header
</div>
<div class="actions">
<div class="ui negative button">
I have to take a look again
</div>
<div class="ui positive button">
Got it
</div>
</div>
</div>
<button class="ui button"
onclick="openModal()">
Click Me
</button>
</div>
<script>
const openModal = () => {
$('.ui.modal').modal('setting',
'transition', 'horizontal flip').modal('show');
}
</script>
</body>
</html>
Producción:
Contenido modal de interfaz de usuario semántica
Ejemplo 2: en el siguiente ejemplo, hemos creado el contenido de un modal usando la clase de contenido .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Content</title>
<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"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="width: 100vw; height: 100vh;">
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Modal Content</h4>
<hr>
<br />
<div class="ui modal">
<div class="ui header">
A Modal Header
</div>
<div class="content">
<div class="ui header">Content Header</div>
<p>GeeksforGeeks is Awesome</p>
</div>
<div class="actions">
<div class="ui negative cancel button">
I agree
</div>
<div class="ui positive ok button">
It's Amazing
</div>
</div>
</div>
<button class="ui button"
onclick="openModal()">
Click Me
</button>
</div>
<script>
const openModal = () => {
$('.ui.modal').modal('setting',
'transition', 'horizontal flip').modal('show');
}
</script>
</body>
</html>
Producción:
Contenido modal de interfaz de usuario semántica
Ejemplo 3: En el siguiente ejemplo, hemos creado un contenido modal de imagen .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Content</title>
<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"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="width: 100vw; height: 100vh;">
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI Modal Content</h4>
<hr>
<br />
<div class="ui modal">
<div class="ui header">
A Modal Header
</div>
<div class="image content">
<div class="ui large image">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
</div>
<div class="description">
<div class="ui header">
Description Header
</div>
<p>
GeeksforGeeks is an amazing
website to learn coding.
</p>
<p>
Machine Learning, Web Development,
Android Development, Data Science,
you name it, it's all available
on GeeksforGeeks.
</p>
</div>
</div>
<div class="actions">
<div class="ui negative cancel button">
Sort of agree
</div>
<div class="ui positive ok button">
Agree
</div>
</div>
</div>
<button class="ui button" onclick="openModal()">
Click Me
</button>
</div>
<script>
const openModal = () => {
$('.ui.modal').modal('setting',
'transition',
'horizontal flip').modal('show');
}
</script>
</body>
</html>
Producción:
Contenido modal de interfaz de usuario semántica
Ejemplo 4: En el siguiente ejemplo, hemos demostrado el uso de la clase de acciones .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Content</title>
<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"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="width:100vw; height:100vh;">
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI Modal Content</h4>
<hr>
<br />
<div class="ui modal">
<div class="ui header">
A Modal Header
</div>
<div class="image content">
<div class="ui large image">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
</div>
<div class="description">
<div class="ui header">
Description Header
</div>
<p>
GeeksforGeeks is an amazing
website to learn coding.
</p>
<p>
Machine Learning, Web Development,
Android Development, Data Science,
you name it, it's all available
on GeeksforGeeks.
</p>
</div>
</div>
<div class="actions">
<div class="ui negative cancel button">
Sort of agree
</div>
<div class="ui positive ok button">
Agree
</div>
</div>
</div>
<button class="ui button" onclick="openModal()">
Click Me
</button>
</div>
<script>
const openModal = () => {
$('.ui.modal').modal('setting',
'transition',
'horizontal flip').modal('show');
}
</script>
</body>
</html>
Producción:
Contenido modal de interfaz de usuario semántica
Referencias: https://semantic-ui.com/modules/modal.html
Publicación traducida automáticamente
Artículo escrito por coder_srinivas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA