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 selección de entrada de la interfaz de usuario de Onsen. Hay tres tipos: entrada de selección simple, entrada de selección de material y entrada de selección debajo de la barra.
Onsen UI Seleccionar clases de componentes CSS de entrada:
- select-input: esta clase se utiliza para implementar opciones de selección de entrada en la etiqueta <select> .
- select-input–material: esta clase se utiliza para crear una entrada de selección de material.
- select-input–underbar: esta clase se utiliza para crear una entrada de selección de barra inferior.
Sintaxis:
<select class="select-input--underbar">
<option>...</option>
<option>...</option>
...
</select>
Ejemplo 1: el siguiente código demuestra la clase de entrada de selección de la interfaz de usuario de Onsen .
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" /> </head> <body> <center> <h2 style="color:green"> GeeksforGeeks </h2> <strong> Onsen UI Select Input CSS Components </strong> <p><b> Select a course:</b></p> <select class="select-input"> <option>Web technology</option> <option>Artificial Intelligence</option> <option>Data Science</option> </select> <p><b>Select your brand:</b></p> <select class="select-input" disabled> <option>Honda</option> <option>Tata</option> <option>Renault</option> </select> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente código muestra las clases select-input-material y select-input-underbar de la interfaz de usuario de Onsen .
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" /> </head> <body> <center> <h2 style="color:green;"> GeeksforGeeks </h2> <strong> Material & Underbar Select Input CSS Component </strong> <p><b>Select option:</b> <p> <select class="select-input select-input--material select-input--underbar"> <option>PHP</option> <option>CSS</option> <option>HTML</option> </select> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#select-input-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