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 los componentes CSS de la tarjeta de 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. Disponemos de dos tipos de tarjetas diferentes: básica y material.
Onsen UI Card CSS Componentes Clases:
- 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. *
- card__title: Esto se usa para crear un título de tarjeta básico.
- card–material: Esto se usa para crear una tarjeta de material.
- card–material__content: El contenedor con esta clase contiene el contenido de la tarjeta de material.
- card–material__title: Esto se usa para crear un título de tarjeta de material.
Nota: *
Sintaxis:
<div class="card">
<h2 class="card__title card--material__title">....</h2>
<div class="card__content card--material__content">
....
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra el uso de las clases de componentes de la tarjeta.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <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" /> <title>GeeksforGeeks | Onesen UI CSS</title> </head> <body> <center> <h2 style="color:green">GeeksforGeeks</h2> <strong>Onsen UI Card CSS Component</strong> <br/> <div style="height:400px; padding:2px 0 0 0;"> <div class="card"> <h2 class="card__title"> Title comes here </h2> <div class="card__content"> <b> <p>The card content comes here..</p> </b> <p> Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. </p> </div> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el uso de las clases de componentes de la tarjeta de material.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <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" /> <title>GeeksforGeeks | Onesen UI CSS</title> </head> <body> <center> <h2 style="color:green">GeeksforGeeks</h2> <strong>Onsen UI Material Card</strong> <br/> <div style="height:400px; padding: 2px 0 0 0;"> <div class="card card--material"> <div class="card__title card--material__title"> Material Card Title comes here... </div> <div class="card__content card--material__content"> Onsen UI CSS Component Card with Title. A card component is used to show data that are alike. Cards help to structure the data and display them in a structured format. We have two different types of cards: basic and material and we can add titles to them. The title is used to display the card heading. </div> </div> </div> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#card-category
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA