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 la entrada de selección de la barra inferior del componente CSS de la interfaz de usuario de Onsen. Esto se hace usando el componente <ons-select> . El modificador de barra inferior muestra una línea horizontal debajo de una entrada seleccionada.
Sintaxis:
<ons-select id=" " onchange=" ">
<option value="...">...</option>
<option value="underbar">Underbar</option>
...
</ons-select>
Atributos:
- id: Esto se utiliza para establecer la identificación de entrada seleccionada.
- onchange: esto se usa para llamar a la función que debería activarse al cambiar cualquier opción de entrada seleccionada.
- valor: Esto se utiliza para establecer el valor de un elemento de entrada seleccionado.
Ejemplo 1: El siguiente código demuestra la entrada de selección de barra inferior CSS de la interfaz de usuario de Onsen usando la etiqueta HTML <select> con la clase select-input-underbar .
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" /> <title>GeeksforGeeks | Onesen UI CSS</title> <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 Underbar Select Input CSS Components </strong> <p><b> Select a course:</b></p> <select class="select-input select-input--underbar"> <option>Tableau</option> <option>Web technology</option> <option>Artificial Intelligence</option> <option>Data Science</option> </select> </center> </body> </html>
Producción:
Ejemplo 2: el siguiente código demuestra el uso de la entrada de selección debajo de la barra mediante el marco CSS de la interfaz de usuario de Onsen. Al cambiar la opción de entrada seleccionada, activa la llamada a la función changeSelectInput(event).
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>
<title>GeeksforGeeks | Onesen UI CSS</title>
</head>
<body>
<center>
<h2 style="color:green">GeeksforGeeks</h2>
<strong>
Onsen UI CSS Component Underbar Select input
</strong>
<br/>
<h4>
Choose a type of select with different modifiers:
</h4>
<ons-select id="mySelectID"
onchange="changeSelectInput(event)">
<option value="basic">Basic</option>
<option value="underbar">Underbar</option>
</ons-select>
</center>
<script>
// Sets the value of select input
function changeSelectInput(event) {
document.getElementById('mySelectID')
.removeAttribute('modifier');
if (event.target.value == 'basic' ||
event.target.value == 'underbar') {
document.getElementById('mySelectID').setAttribute(
'modifier', event.target.value);
}
}
</script>
</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