Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio.
En este artículo, vamos a implementar el componente Tarjeta básica del componente CSS de la interfaz de usuario de Onsen . Una tarjeta es un componente HTML que se utiliza para mostrar datos que son similares. Las tarjetas ayudan a estructurar los datos y mostrarlos en un formato estructurado. Una tarjeta básica es una tarjeta simple en la interfaz de usuario de Onsen que tiene bordes redondeados.
Onsen UI CSS Component Clases de tarjeta básica:
- tarjeta: El contenedor con esta clase se utiliza para crear componentes de tarjetas.
- card__content: El contenedor con esta clase contiene el contenido de la tarjeta.
Sintaxis: Cree una tarjeta básica de la siguiente manera:
<div class="card">
<div class="card__content">
Welcome to GeeksforGeeks. A computer
science portal for geeks.
</div>
</div>
Ejemplo 1: En este ejemplo, tenemos una tarjeta que muestra algunos datos.
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://unpkg.com/onsenui/css/onsenui.css" />
<link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
<script src="https://unpkg.com/onsenui/js/onsenui.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<style>
#heading {
color: green;
}
#title {
font-style: bold;
}
</style>
</head>
<body>
<center>
<h1 id="heading">GeeksforGeeks</h1>
<strong id="title">
Onsen UI CSS Component Basic Card
</strong>
</center>
<div class="card">
<div class="card__content">
Welcome to GeeksforGeeks. A computer
science portal for geeks.
<p>List of tutorials</p>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, mostraremos y ocultaremos la tarjeta básica usando botones.
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://unpkg.com/onsenui/css/onsenui.css" />
<link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
<script src="https://unpkg.com/onsenui/js/onsenui.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<style>
#heading {
color: green;
}
#title {
font-style: bold;
}
</style>
</head>
<body>
<center>
<h1 id="heading">GeeksforGeeks</h1>
<strong id="title">
Onsen UI CSS Component Basic Card
</strong>
<br /><br />
<button class="button" onclick="showCard()">
Show Card
</button>
</center>
<div class="card">
<div class="card__content">
Welcome to GeeksforGeeks. A computer
science portal for geeks.
<p>List of tutorials</p>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
<button class="button button--outline"
onclick="closeCard()">
Close Card
</button>
</div>
</div>
<script>
function closeCard() {
$('.card').hide()
}
function showCard() {
$('.card').show()
}
</script>
</body>
</html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#card-category
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA