/// <summary>
///
/// </summary>
/// <param name="className"></param>
/// <param name="active"></param>
/// <returns></returns>
private string?GetClassString(string className, bool active) => CssBuilder.Default(className)
.AddClass("active", active)
.Build();
private string?GetClassString(bool active) => CssBuilder.Default("tabs-item")
.AddClass("is-active", active)
.AddClass("is-closeable", TabSet?.ShowClose ?? false)
.Build();
/// <summary>
/// 获得/设置 TreeItem 小箭头样式
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
private string?GetCaretClassString(TreeItem item) => CssBuilder.Default("fa fa-caret-right")
.AddClass("invisible", !item.Items.Any())
.AddClass("fa-rotate-90", item.IsExpanded)
.Build();
/// <summary>
/// 设置当前项是否 Active 方法
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
protected virtual string?ActiveItem(SelectedItem item) => CssBuilder.Default("dropdown-item")
.AddClass("active", () => item.Value == CurrentValueAsString)
.Build();
private string?GetItemClassString(SelectedItem item) => CssBuilder.Default("dropdown-item")
.AddClass("active", GetCheckedState(item))
.Build();
/// <summary>
/// 获得 过滤小图标样式
/// </summary>
protected string?GetFilterClassString(string fieldName) => CssBuilder.Default("fa fa-fw fa-filter")
.AddClass("active", Filters.ContainsKey(fieldName))
.Build();
/// <summary>
/// 获取消息样式
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
protected virtual string?GetClassString(ConsoleMessageItem item)
{
return(CssBuilder.Default()
.AddClass($"text-{item.Color.ToDescriptionString()}", item.Color != Color.None)
.Build());
}
/// <summary>
///
/// </summary>
/// <param name="collapsed"></param>
/// <returns></returns>
protected string?GetButtonClassString(bool collapsed) => CssBuilder.Default("btn btn-link")
.AddClass("collapsed", collapsed)
.Build();
/// <summary>
///
/// </summary>
/// <param name="collpased"></param>
/// <returns></returns>
protected string?GetClassString(bool collpased) => CssBuilder.Default("collapse-item")
.AddClass("collapse", collpased)
.AddClass("collapse show", !collpased)
.Build();
/// <summary>
/// 获取指定列头样式字符串
/// </summary>
/// <param name="col"></param>
/// <returns></returns>
protected string?GetHeaderClassString(ITableColumn col) => CssBuilder.Default()
.AddClass("sortable", col.Sortable)
.AddClass("filterable", col.Filterable)
.AddClass(GetFixedCellClassString(col))
.Build();
/// <summary>
/// 获得 当前样式名称
/// </summary>
protected string?GetClassName(int index) => CssBuilder.Default("time-spinner-item")
.AddClass("active", ViewModel switch
{
/// <summary>
/// 获得 Header 中表头文字样式
/// </summary>
/// <param name="col"></param>
/// <returns></returns>
protected string?GetHeaderTextClassString(ITableColumn col) => CssBuilder.Default("table-text")
.AddClass("text-left", col.Align == Alignment.Left)
.AddClass("text-right", col.Align == Alignment.Right)
.AddClass("text-center", col.Align == Alignment.Center)
.Build();
/// <summary>
/// 获取指定列头样式字符串
/// </summary>
/// <param name="col"></param>
/// <returns></returns>
protected string?GetHeaderWrapperClassString(ITableColumn col) => CssBuilder.Default("table-cell")
.AddClass("is-sort", col.Sortable)
.AddClass("is-filter", col.Filterable)
.Build();
/// <summary>
/// 获得指定列头固定列样式
/// </summary>
/// <param name="col"></param>
/// <returns></returns>
protected string?GetFixedCellClassString(ITableColumn col) => CssBuilder.Default()
.AddClass("fixed", col.Fixed)
.AddClass("fixed-right", col.Fixed && IsTail(col))
.Build();
/// <summary>
///
/// </summary>
/// <param name="active"></param>
/// <returns></returns>
protected string?GetClassString(bool active) => CssBuilder.Default("tabs-item")
.AddClass("is-active", active)
.AddClass("is-closeable", ShowClose)
.Build();
/// <summary>
/// 明细行首小图标单元格样式
/// </summary>
protected string?GetDetailBarClassString(TItem item) => CssBuilder.Default("table-cell is-bar")
.AddClass("is-load", DetailRows.Contains(item))
.Build();
/// <summary>
///
/// </summary>
/// <param name="icon"></param>
/// <returns></returns>
protected string?GetIconClassString(string icon) => CssBuilder.Default("fa fa-fw")
.AddClass(icon)
.Build();
/// <summary>
/// 获得明细行样式
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
protected string?GetDetailRowClassString(TItem item) => CssBuilder.Default("is-detail")
.AddClass("show", ExpandRows.Contains(item))
.Build();
/// <summary>
/// 获得/设置 日期样式
/// </summary>
private string?GetDayClass(DateTime day) => CssBuilder.Default("")
.AddClass("prev-month", day.Month < CurrentDate.Month)
.AddClass("next-month", day.Month > CurrentDate.Month)
.AddClass("current", day == CurrentDate && !IsRange)
.AddClass("start", IsRange && day == Ranger !.SelectedValue.Start)
/// <summary>
/// 获得明细行小图标样式
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
protected string?GetDetailCaretClassString(TItem item) => CssBuilder.Default("fa fa-caret-right")
.AddClass("fa-rotate-90", ExpandRows.Contains(item))
.Build();
/// <summary>
/// 获得 PaginationItem 样式
/// </summary>
/// <param name="active"></param>
/// <returns></returns>
protected string?GetPaginationItemClassName(bool active) => CssBuilder.Default("page-item")
.AddClass("active", active)
.Build();
/// <summary>
/// 获得 MenuItemLink 样式
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
private string?GetMenuItemLinkClassString(MenuItem item) => CssBuilder.Default("nav-link show collapse")
.AddClass("collapsed", !item.IsActive || item.IsCollapsed)
.Build();
/// <summary>
/// 渲染组件方法
/// </summary>
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
// 渲染正常按钮
if (Columns != null)
{
var index = 0;
foreach (var header in Columns.Columns)
{
var fieldName = header.GetFieldName();
var displayName = header.GetDisplayName();
builder.OpenElement(index++, "th");
// 移除 bind-Field
header.AdditionalAttributes?.Remove("FieldChanged");
builder.AddMultipleAttributes(index++, header.AdditionalAttributes);
builder.AddAttribute(index++, "class", CssBuilder.Default()
.AddClass("sortable", header.Sortable)
.AddClass("filterable", header.Filterable)
.Build());
// 如果允许排序
if (header.Sortable)
{
builder.AddAttribute(index++, "onclick", EventCallback.Factory.Create(this, async() =>
{
if (sortOrder == SortOrder.Unset)
{
sortOrder = SortOrder.Asc;
}
else if (sortOrder == SortOrder.Asc)
{
sortOrder = SortOrder.Desc;
}
else if (sortOrder == SortOrder.Desc)
{
sortOrder = SortOrder.Unset;
}
sortName = fieldName;
// 通知 Table 组件刷新数据
if (Columns.OnSortAsync != null)
{
await Columns.OnSortAsync.Invoke(sortName, sortOrder);
}
}));
}
builder.OpenElement(index++, "div");
builder.AddAttribute(index++, "class", CssBuilder.Default("table-cell")
.AddClass("is-sort", header.Sortable)
.AddClass("is-filter", header.Filterable)
.Build());
builder.OpenElement(index++, "span");
builder.AddAttribute(index++, "class", "table-text");
builder.AddContent(index++, displayName);
builder.CloseElement(); // span
if (header.Filterable)
{
builder.OpenElement(index++, "i");
builder.AddAttribute(index++, "class", CssBuilder.Default("fa fa-fw fa-filter")
.AddClass("active", Columns.HasFilter(fieldName))
.Build());
builder.AddAttribute(index++, "data-field", fieldName);
builder.AddEventStopPropagationAttribute(index++, "onclick", true);
builder.AddAttribute(index++, "onclick", EventCallback.Factory.Create <MouseEventArgs>(this, e =>
{
// 点击 Filter 小图标事件
Columns.ShowFilter(fieldName);
}));
builder.CloseElement(); // end i
}
if (header.Sortable)
{
builder.OpenElement(index++, "i");
var order = sortName == fieldName ? sortOrder : SortOrder.Unset;
var icon = order switch
{
SortOrder.Asc => SortIconAsc,
SortOrder.Desc => SortIconDesc,
_ => SortIcon
};
builder.AddAttribute(index++, "class", icon);
builder.CloseElement(); // end i
}
builder.CloseElement(); // end div
builder.CloseElement(); // end th
}
}
}
}
/// <summary>
/// 获得 MenuItem 样式
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
private string?GetMenuItemClassString(MenuItem item) => CssBuilder.Default("collapse-item collapse")
.AddClass("show", item.IsActive || !item.IsCollapsed)
.AddClass("collapsed", item.IsCollapsed)
.Build();
private string?GetIconClassString(string icon) => CssBuilder.Default("fa-fw")
.AddClass(icon)
.Build();
/// <summary>
/// 获得 候选项样式
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
protected string?ItemClassString(string item) => CssBuilder.Default("dropdown-item")
.AddClass("active", item == _selectedItem)
.Build();
/// <summary>
/// 获得/设置 TreeItem 图标
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
private string?GetIconClassString(TreeItem item) => CssBuilder.Default("tree-icon")
.AddClass(item.Icon)
.Build();
/// <summary>
///
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
protected string?GetContentClassString(TabItem item) => CssBuilder.Default("tabs-body-content")
.AddClass("d-none", !item.IsActive)
.Build();
/// <summary>
/// 获得/设置 当前行样式
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
private string?GetItemClassString(TreeItem item) => CssBuilder.Default("tree-item")
.AddClass("active", ActiveItem == item)
.Build();
/// <summary>
/// 支持每行多少个控件功能
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
private string?GetCssString(IEditorItem item) => CssBuilder.Default("form-group col-12")
.AddClass("col-sm-6", item.Data == null && ItemsPerRow == null && item.Rows == 0)
.AddClass($"col-sm-6 col-md-{Math.Floor(12d / (ItemsPerRow ?? 1))}", item.Data == null && ItemsPerRow != null && item.Rows == 0)
.Build();