Inicio
PERENDERnew
Tema
Form
ComboBox
ContentInput
InputPassword
Label
Togglenew
Componentes básicos
Instalación
Assignnew
Box
Breadcrumb
Button
Confirm
Grid
Icon
LayoutMenu
Load
MenuAdmin
Modal
Notification
Title
UbploadFilenew
Visor de PDF
Instalación
PDFViewer
Gráficasnew
Ejemplos
Explorador de archivos
Instalación
FileExplorer
Tree
Boardnew
Instalación
Ejemplos
Texto enriquecido
Instalación
RichText
FileExplorer

1. Demo AstrolFileExplorer

Nota
En este ejemplo se implementan notificaciones, botones y el componente para carga de archivos, por lo que se recomienda ver las documentaciones correspondientes.
El componente AstrolFileExplorer brinda una lógica similar a un explorador de archivos en cuanto a como se muestra y su navegación. Es responsabilidad del usuario implementar dentro de las opciones la lógica o cada botón que necesite en su proyecto.
Home
  • Project
    • Design
      • Photos
    • Implementation
  • Downloads
    • January
      • Photos
      • Videos
      • Documents
    • February
      • Photos
      • Videos
      • Documents
Project
Downloads

Elemento seleccionado:

Ruta:
Padre:
Elemento: 
@using Astrol.Component.Basic.Button
@using Astrol.Component.Basic.UploadFile
@using Astrol.Component.FileExplorer.Explorer
@using Astrol.Entities.Basic.UI.FileExplorer
@using Astrol.Entities.Basic.Static.Notification
@using Astrol.Entities.Basic.UI
@using Astrol.JSInterop.Base
@inject AstrolJSInterop jsI
 
<AstrolFileExplorer @ref="@_fileExplorer"
 TItem="FileItem"
 DataList="items"
 PropertyChildrenList="@nameof(FileItem.Children)"
 PropertyId="@nameof(FileItem.Id)"
 PropertyShow="@nameof(FileItem.Text)"
 PropertyIsFolder="@nameof(FileItem.IsFolder)"
 Height="450px"
 TextHome="Home"
 Selected="Selected">
 <Options>
 @{
 bool statusRenameOrDelete = itemSelected != null && itemSelected.ItemSelected != null ? true : false;
 bool statusDowload = itemSelected != null && itemSelected.ItemSelected != null && !itemSelected.ItemSelected.IsFolder ? true : false;
 }
 <AstrolUploadFile Status="@_statusUpload" OnClose="ChangeStatus" Save="UploadFile"/>
 <AstrolUploadFile Status="@_statusUpload"
 Save="UploadFile"
 OnClose="ChangeStatus"
 Title="Upload file"
 TextClose="Close"
 TextSave="Save"
 TextFileName="File"
 TextFileSize="Size"
 TextBrowse="Find, copy or drag and drop your file here."
 TextErrorMaximumNumberFilesAccepted="Maximum number of files exceeded."
 TextErrorWrongFileExtension="Incorrect file extension."
 TextErrorFileTooBig="File too large." />
 <AstrolButton OnClick="AddFolder" Text="New folder" Style="AstrolStyle.Black" Icon="astrol-plus-outline" />
 <AstrolButton OnClick="_=>ChangeStatus(true)" Text="Upload" Style="AstrolStyle.White" Icon="astrol-up-outline" />
 <AstrolButton OnClick="Action" Status="@statusRenameOrDelete" Text="Rename" Style="AstrolStyle.White" Icon="astrol-text-width" />
 <AstrolButton OnClick="Action" Status="@statusDowload" Text="Dowload" Style="AstrolStyle.White" Icon="astrol-down-outline" />
 <AstrolButton OnClick="Action" Status="@statusRenameOrDelete" Text="Delete" Style="AstrolStyle.White" Icon="astrol-trash" />
 </Options>
</AstrolFileExplorer>
@code {
 private bool _statusUpload = false;
 private AstrolFileExplorer<FileItem>? _fileExplorer;
 private FileExploredSelected<FileItem>? itemSelected;
 private async Task Selected(FileExploredSelected<FileItem> item) {
 itemSelected = item;
 }
 private void ChangeStatus(bool newStatus) {
 _statusUpload = newStatus;
 }
 private async Task UploadFile(List<IBrowserFile> files) {
 ChangeStatus(false);
 await Action();
 }
 private void AddFolder() {
 items.Add(new FileItem {
 Text = "New folder",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem { Text = "Example", IsFolder = true, },
 new FileItem { Text = "video.mkv", },
 new FileItem { Text = "note.txt", },
 new FileItem { Text = "sound.mp3", },
 },
 });
 if (_fileExplorer != null) {
 _fileExplorer.DataList = items;
 _fileExplorer?.Refresh();
 }
 }
 private async Task Action() {
 await jsI.Notification($"Implementation, customized based on need.".NotificationInfo());
 }
 private List<FileItem> items = new List<FileItem> {
 new FileItem {
 Text = "Project",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem {
 Text = "Design",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem {
 Text = "Photos",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem { Text = "logo.jpg", },
 new FileItem { Text = "front page.png", },
 },
 },
 new FileItem { Text = "site.psd", },
 },
 },
 new FileItem {
 Text = "Implementation",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem{ Text = "script.js", },
 new FileItem { Text = "index.html", },
 new FileItem { Text = "styles.css", },
 },
 },
 },
 },
 new FileItem {
 Text = "Downloads",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem {
 Text = "January",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem {
 Text = "Photos",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem{ Text = "1.jpg", },
 new FileItem{ Text = "2.png", },
 new FileItem{ Text = "2.gif", },
 }
 },
 new FileItem { Text = "Videos", IsFolder = true,},
 new FileItem { Text = "Documents", IsFolder = true,},
 },
 },
 new FileItem {
 Text = "February",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem { Text = "Photos", IsFolder = true,},
 new FileItem { Text = "Videos", IsFolder = true,},
 new FileItem {
 Text = "Documents",
 IsFolder = true,
 Children = new List<FileItem> {
 new FileItem{ Text = "Presentation.ppt", },
 new FileItem{ Text = "Calculation.xlsx", },
 }
 },
 },
 },
 },
 },
 };
 public class FileItem {
 public string Id { get; set; } = Guid.NewGuid().ToString();
 public string Text { get; set; }
 public bool IsFolder { get; set; }
 public List<FileItem> Children { get; set; }
 }
}

Parámetros que admite

  • TItem (objeto), objeto que se representa.
  • PropertyShow (string), propiedad del objeto TItem a mostrar.
  • PropertyId (string), propiedad del objeto TItem que contiene un identificador único en toda la colección.
  • PropertyIsFolder (string), propiedad del objeto TItem que especifica mediante un bool si el elemento es una carpeta o un fichero.
  • PropertyChildrenList (string), propiedad del objeto TItem que contiene la lista de hijos.
  • DataList (List<TItem>), lista total de objetos TItem a representar.
  • Height (string), altura del componente.
  • TextHome (string), texto a mostrar como raíz en la navegación del componente (por defecto es Inicio).
  • Selected (EventCallback<FileExploredSelected<TItem>>), respuesta tras acción de navegación o selección de un elemento en el componente.
  • Options (RenderFragment), espacio para que se implemente las acciones en base a la necesidad específica de cada implementación.
    • El objeto FileExploredSelected<TItem> contiene:
      • Route (string) ruta de navegación actual
      • Parent (TItem) padre de la posición actual
      • ItemSelected (TItem) elemento seleccionado

Métodos públicos

  • Refresh, perimite mediante <AstrolFileExplorer @ref="_fileExplorer" ... /> refrescar el componente sin alterar el estado actual del mismo, declare _fileExplorer dentro de @code { private TreeItem<TItem>? _fileExplorer; }. Es recomendable antes de invocar al método _fileExplorer.Refresh() asignar de igual modo la lista de datos actualizada _fileExplorer.DataList = updateList;.
© 2026 AstrolUI v10.0.8
Se ha producido un error no controlado. Recargar 🗙