Bulma es un marco CSS de código abierto que se utiliza para crear sitios web rápidos y receptivos. Las clases de Bulma Select State se utilizan para diseñar el menú desplegable de selección de acuerdo con un estado específico. Usando las clases de estado de Bulma, podemos diseñar el elemento seleccionado como si estuviera sobrevolado o enfocado sin activar ese estado.
Clases de Bulma Select State:
- is-hovered: esta clase se utiliza para aplicar estilo al menú desplegable de selección como si se estuviera desplazando.
- is-focused: esta clase se usa para diseñar el menú desplegable de selección como si estuviera enfocado.
- is-active: esta clase se usa para diseñar el menú desplegable de selección como si estuviera en un estado activo.
- is-loading: esta clase agrega una barra de progreso circular dentro del elemento seleccionado.
Sintaxis:
<div class="select"> <select class="is-focused"> <option>Algorithms</option> <option>DBMS</option> </select> </div>
Ejemplo: El siguiente ejemplo utiliza las clases está suspendida, está enfocada, está activa y está cargando para diseñar el menú desplegable de selección.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Select States</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.container>div {
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Select States</b>
<div class="container">
<div>
<span>Normal State:</span>
<div class="select">
<select>
<option selected>Select dropdown</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>DBMS</option>
</select>
</div>
</div>
<div>
<span>Hovered State:</span>
<div class="select">
<select class="is-hovered">
<option selected>Select dropdown</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>DBMS</option>
</select>
</div>
</div>
<div>
<span>Focused State:</span>
<div class="select">
<select class="is-focused">
<option selected>Select dropdown</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>DBMS</option>
</select>
</div>
</div>
<div>
<span>Active State: </span>
<div class="select">
<select class="is-active">
<option selected>Select dropdown</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>DBMS</option>
</select>
</div>
</div>
<div>
<span>Loading State: </span>
<div class="select is-loading">
<select>
<option selected>Select dropdown</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>DBMS</option>
</select>
</div>
</div>
</div>
</body>
</html>
Producción:
Bulma Seleccione Estados
Referencia: https://bulma.io/documentation/form/select/#states