Bulma es un marco CSS de código abierto que se envía con componentes prediseñados que hacen que los sitios web hermosos y receptivos sean más fáciles y rápidos. Está basado en flexbox .
En este artículo, veremos los modificadores que podemos usar con el elemento de archivo en Bulma.
Clases de modificadores de archivos Bulma:
- tiene nombre: esta clase se usa en el elemento de archivo cuando desea mostrar el nombre del archivo seleccionado.
- is-right: esta clase se usa para mover el CTA del elemento del archivo a la derecha y el nombre del archivo a la izquierda.
- is-fullwidth: esta clase se usa para expandir el contenedor de nombre de archivo para llenar el ancho restante.
- is-boxed: esta clase se usa para cambiar el elemento del archivo en forma de caja.
Sintaxis:
<div class="file Modifier-Class">
...
</div>
Ejemplo: El siguiente ejemplo ilustra el uso de las clases de modificadores de archivos discutidas anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma File Modifiers</title>
<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>
.container>p{
margin-top: 25px;
}
.file{
margin-top: 10px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b class="is-size-4">Bulma File Modifiers</b>
<div class="container is-fluid">
<p><b>File element with <i>has-name</i> modifier</b></p>
<div class="file has-name is-centered">
<label class="file-label">
<input class="file-input"
type="file"
name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Select a file
</span>
</span>
<span class="file-name">
No file Selected.
</span>
</label>
</div>
<p><b>File element with <i>is-right</i> modifier</b></p>
<div class="file has-name is-right">
<label class="file-label">
<input class="file-input"
type="file"
name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Select a file
</span>
</span>
<span class="file-name">
No file Selected.
</span>
</label>
</div>
<p><b>File element with <i>is-fullwidth</i> modifier</b></p>
<div class="file has-name is-fullwidth">
<label class="file-label">
<input class="file-input"
type="file"
name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Select a file
</span>
</span>
<span class="file-name">
No file Selected.
</span>
</label>
</div>
<p><b>File element with <i>is-boxed</i> modifier</b></p>
<div class="file is-centered has-name is-boxed">
<label class="file-label">
<input class="file-input"
type="file"
name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Select a file
</span>
</span>
<span class="file-name">
No file Selected.
</span>
</label>
</div>
</div>
</body>
</html>
Producción:
Modificadores de archivos Bulma
Referencia: https://bulma.io/documentation/form/file/#modifiers