Tree
1. Demo AstrolTree
Nota
En este ejemplo se implementan notificaciones, por lo que se recomienda ver la documentación correspondiente.
En este ejemplo se implementan notificaciones, por lo que se recomienda ver la documentación correspondiente.
- Project
- Design
- Photos
- logo.jpg
- front page.png
- site.psd
- Photos
- Implementation
- script.js
- index.html
- styles.css
- Design
@using Astrol.Component.FileExplorer.Tree@using Astrol.Entities.Basic.Static.Notification@using Astrol.JSInterop.Base@inject AstrolJSInterop jsI <AstrolTree TItem="TreeItem" DataList="items" PropertyShow="@nameof(TreeItem.Text)" PropertyIcon="@nameof(TreeItem.Icon)" PropertyExpansed="@nameof(TreeItem.DefaultExpanse)" PropertyChildrenList="@nameof(TreeItem.Children)" OnClick="SelectItem" />@code { private async Task SelectItem(TreeItem item) { await jsI.Notification($"The item has been selected: {item.Text}.".NotificationSuccess()); } private List<TreeItem> items = new List<TreeItem> { new TreeItem() { Text = "Project", Icon = "astrol-folder-empty", DefaultExpanse = true, Children = new List<TreeItem> { new TreeItem() { Text = "Design", Icon = "astrol-folder-empty", DefaultExpanse = true, Children = new List<TreeItem> { new TreeItem() { Text = "Photos", Icon = "astrol-folder-empty", Children = new List<TreeItem> { new TreeItem() { Text = "logo.jpg", Icon = "astrol-file-image" }, new TreeItem() { Text = "front page.png", Icon = "astrol-file-image" }, }, }, new TreeItem() { Text = "site.psd", Icon = "astrol-doc" }, }, }, new TreeItem() { Text = "Implementation", Icon = "astrol-folder-empty", DefaultExpanse = true, Children = new List<TreeItem> { new TreeItem() { Text = "script.js", Icon = "astrol-file-code" }, new TreeItem() { Text = "index.html", Icon = "astrol-file-code" }, new TreeItem() { Text = "styles.css", Icon = "astrol-file-code" }, }, }, }, }, }; public class TreeItem { public string Text { get; set; } public List<TreeItem> Children { get; set; } public string Icon { get; set; } public bool DefaultExpanse { get; set; } }}Parámetros que admite
- TItem (objeto), objeto que se representar.
- PropertyShow (string), propiedad del objeto TItem a mostrar.
- PropertyIcon (string), propiedad del objeto TItem que contiene ícono (no es requerida).
- DefaultIcon (string), parámetro que permite establecer un ícono único para todos los elementos (no es requerida y tiene prioridad sobre PropertyIcon).
- PropertyExpansed (string), propiedad del objeto TItem que contiene si por defecto el componente se encuentra expandido, no es requerida y si no se establece por defecto los componentes se encuentran cerrados (no es requerida).
- PropertyChildrenList (string), propiedad del objeto TItem que contiene las lista de hijos (no es requerida).
- DataList (List<TItem>), lista total de objetos TItem a mostrar.
- OnClick (EventCallback<TItem>), respuesta del objeto TItem seleccionado por el usuario.
Métodos públicos
- Refresh, perimite mediante <AstrolTree @ref="_tree" ... /> refrescar el componente sin alterar el estado actual del mismo, declare _tree dentro de @("@code { private TreeItem
? _tree; }") . Es recomendable antes de invocar al método _tree.Refresh() asignar de igual modo la lista de datos actualizada _tree.DataList = updateList;.
© 2026 AstrolUI v10.0.8