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.
Semantic UI Modal muestra contenido sobre la pantalla que bloquea temporalmente la interacción con la vista principal del sitio. Tenemos que actuar de acuerdo con los detalles proporcionados por el modal. La variación de contenido de desplazamiento modal de interfaz de usuario semántica se utiliza para configurar el modal que puede usar todo el tamaño de la pantalla.
Clase de variación de contenido de desplazamiento modal de interfaz de usuario semántica:
- contenido de desplazamiento: esta clase se usa para configurar el modal que puede usar todo el tamaño de la pantalla.
Sintaxis:
<div class="ui modal"> <div class="header">Header</div> <div class="scrolling content"> <p>Very long content goes here</p> </div> </div>
El siguiente ejemplo ilustra la variación de contenido de desplazamiento modal de interfaz de usuario semántica.
Ejemplo 1: en este ejemplo, crearemos un modal que se activará al hacer clic en el botón modal, luego el contenido modal será desplazable, a veces el contenido que queremos mostrar en el modal será extenso, ese es el propósito de hacer que un modal sea desplazable.
HTML
<!DOCTYPE html>
<html>
<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 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>
.icon {
margin: 16px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>Semantic-UI Modal Scrolling Content Variation</strong>
</center>
<div class="ui segment">
<div class="ui active modal"></div>
<p>List of Alphabets.</p>
<button class="ui button green"
onclick="openModal()">
Open Modal
</button>
<div class="ui longer modal">
<div class="header">
Alphabets
</div>
<div class="scrolling content">
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</p>
<p>H</p>
<p>I</p>
.
.
.
.
<p>X</p>
<p>Y</p>
<p>Z</p>
</div>
</div>
</div>
</div>
<script>
const openModal = () => {
$('.ui.longer.modal').modal('show');
}
</script>
</body>
</html>
Producción:
Variación de contenido de desplazamiento modal de interfaz de usuario semántica
Ejemplo 2: en este ejemplo, crearemos un contenido de tipo lista que será desplazable.
HTML
<!DOCTYPE html>
<html>
<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 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>
.icon {
margin: 16px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>Semantic-UI Modal Scrolling Content Variation</strong>
</center>
<div class="ui segment">
<div class="ui active modal"></div>
<p>List of some big Tech Companies.</p>
<button class="ui button green"
onclick="openModal()">
Open Modal
</button>
<div class="ui longer modal">
<div class="header">
Tech Companies
</div>
<div class="scrolling content">
<p>GeeksforGeeks</p>
<p>Apple</p>
<p>Amazon</p>
<p>Flipkart</p>
<p>Zomato</p>
<p>Capgemini</p>
<p>TCS</p>
<p>Wipro</p>
<p>CTS</p>
<p>Microsoft</p>
<p>Google</p>
<p>Facebook</p>
</div>
<div class="actions">
<div class="ui red cancel button">
<i class="close icon"></i>
Close
</div>
</div>
</div>
</div>
</div>
<script>
const openModal = () => {
$('.ui.longer.modal').modal('show');
}
</script>
</body>
</html>
Producción:
Variación de contenido de desplazamiento modal de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/modal.html#scrolling-content
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