Blaze UI es un conjunto de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes JavaScrip t para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Blaze UI proporciona funciones para cargar un archivo en el sitio web directamente desde el dispositivo.
Hay tres atributos que ofrece Blaze UI File Upload:
- soltar: el cargador de archivos se transforma en una zona de caída. Según el valor de la URL, una zona de entrega intentará cargar los archivos automáticamente.
- múltiple: este atributo permite seleccionar varios archivos a la vez.
- url: este atributo especifica el punto final para cargar los archivos, el valor predeterminado es ‘/’.
Clases de CSS de carga de archivos de la interfaz de usuario de Blaze :
- c-file-upload: esta clase se utiliza para agregar la función de carga de archivos.
- c-file-upload–drop: esta clase se usa para agregar el cuadro de zona de entrega.
Podemos agregar una función de carga de archivos usando la etiqueta de carga de archivos blaze proporcionada por Blaze UI sin definir ninguna clase. Para esto, siga la siguiente sintaxis dada.
Sintaxis:
<blaze-file-upload ...>
...
</blaze-file-upload>
Podemos agregar una función de carga de archivos utilizando las clases proporcionadas por Blaze UI.
Sintaxis:
<div class="c-file-upload">
...
<input type="file" />
</div>
Ejemplo 1: el siguiente código demuestra los atributos de carga de archivos de la interfaz de usuario de Blaze mediante la etiqueta de carga de archivos de la interfaz de usuario de Blaze. Se agrega una zona de colocación, cuando hacemos clic en el texto, nos permitirá cargar varios archivos desde nuestro dispositivo.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" href="styles.css" />
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<h1 class="Logo">
GeeksforGeeks
</h1>
<h3>
Blaze UI File Upload
</h3>
<blaze-file-upload drop multiple>
Click to upload file
</blaze-file-upload>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código muestra los atributos de carga de archivos de la interfaz de usuario de Blaze mediante las clases CSS de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<h1 class="Logo">
GeeksforGeeks
</h1>
<h3>
Blaze UI File Upload using CSS
</h3>
<div class="c-file-upload c-file-upload--drop">
Upload files
<input type="file" />
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/file-upload/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA