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 tutorial, vamos a implementar el componente Tarjeta de material 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 de material es una tarjeta de interfaz de usuario de material que tiene esquinas más afiladas.
Onsen UI CSS Component Material Clases de tarjeta:
- tarjeta: El contenedor con esta clase se utiliza para crear componentes de tarjeta.
- card__content: El contenedor con esta clase contiene el contenido de la tarjeta.
- card–material: Esto denota el contenedor de la tarjeta como tipo de material.
- card–material__content : el contenedor de contenido es de tipo material.
Sintaxis : Cree una tarjeta de material de la siguiente manera:
<div class="card card--material">
<div class="card__content card--material">
Welcome to GeeksforGeeks. A computer
science portal for geeks.
</div>
</div>
Ejemplo 1 : En el siguiente ejemplo, tenemos una tarjeta de material con algo de contenido.
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 Material Card
</strong>
</center>
<div class="card card--material">
<div class="card__content card--material__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 el siguiente ejemplo, podemos abrir y cerrar la tarjeta de material con la ayuda de 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 Material Card
</strong>
<br /><br />
<button class="button" onclick="showCard()">
Show Card
</button>
</center>
<div class="card card--material">
<div class="card__content card--material__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