Bulma es un marco CSS de código abierto que le permite usar clases predefinidas para diseñar su sitio web y aplicaciones web. En este artículo, veremos cómo agregar íconos al menú desplegable de selección en Bulma.
Para agregar un ícono al menú desplegable de selección, podemos envolver el contenedor de selección en un div de control y usar el modificador has-icons-left en el div de control. También necesitamos agregar el modificador is-left en el contenedor de íconos. El tamaño del contenedor de iconos estará definido por el tamaño del menú desplegable de selección.
Bulma Seleccionar clases de iconos:
- has-icons-left: esta clase se usa en el contenedor de control que contiene el menú desplegable de selección.
- is-left: esta clase se usa en el contenedor de iconos.
Sintaxis:
<div class="control has-icons-left">
<div class="select">
<select>
<option selected>....</option>
<option>...</option>
...
</select>
</div>
<div class="icon is-left">
<i class="fas fa-home"></i>
</div>
</div>
El siguiente ejemplo ilustra los íconos de Bulma Select:
Ejemplo: El siguiente ejemplo muestra cómo agregar un ícono al menú desplegable de selección en Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
}
h1,
p {
text-align: center;
}
.container>form {
margin-top: 25px;
}
</style>
</head>
<body>
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<p><b>Bulma Select Icons</b></p>
<div class="container">
<form>
<div class="field">
<div class="control has-icons-left">
<div class="select">
<select>
<option selected>
Select a topic
</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>DBMS</option>
</select>
</div>
<div class="icon is-left">
<i class="fas fa-list"></i>
</div>
</div>
</div>
<div class="field">
<div class="control has-icons-left">
<div class="select">
<select>
<option selected>
Select your age
</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
</select>
</div>
<div class="icon is-left">
<i class="fas fa-user"></i>
</div>
</div>
</div>
<div class="field">
<div class="control has-icons-left">
<div class="select">
<select>
<option selected>
Select a tool
</option>
<option>Hammer</option>
<option>Wrench</option>
<option>Screwdriver</option>
</select>
</div>
<div class="icon is-left">
<i class="fas fa-tools"></i>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/form/select/#with-icons