tabblazor / tabblazor

Blazor admin template based on Tabler UI

TabBlazor

A blazor admin template built on Tabler

Minimal javascript!

Demo

Getting Started Templates

TabBlazor.Templates

Build

Nuget

Work ongoing

Based on Tabler.Blazor by zarxor

tabblazor's Issues

Tables's row columns could not work with cssClass property.

Hi.
It's great project!!
I'm working on table feature. but can't apply cssClass for row columns.
It's seem to need to be fixed below code.
thanks.

---

public abstract class TableRowComponentBase : ComponentBase
...
public string GetColumnClass(IColumn column)
{
//return "";
return new ClassBuilder()
.AddIf("display-none", !column.Visible)
.AddIf(column.CssClass, column.CssClass != null)
.ToString();
}

TablerIcons from table sample missing

where is TablerIcons.Info_circle?
in,

error,
error CS0103: The name 'TablerIcons' does not exist in the current context

code from the samples at https://tabblazor.com/docs/tables,
@using TabBlazor;
...
@code{
...
private async Task ShowDialog( string title ) {
await ModalService.ShowDialogAsync(new TabBlazor.Components.Modals.DialogOptions {
CancelText = "",
StatusColor = TablerColor.Primary,
IconType = TablerIcons.Info_circle,
MainText = title
});
}
}

nuget,
nuget TabBlazor 0.7.10-alpha

_Imports.razor,
@using TabBlazor

Program.cs,
builder.Services.AddTabler();
builder.Services.AddTabBlazor();

_Layout.cshtml, at the end of Head tag

<script src="_content/TabBlazor/js/tabblazor.js"></script>

<FooterTemplate> in ItemSelect demo is disconnected from dropdown

See image.
This is in the "Templates" Demo for Item Select: https://tabblazor.com/docs/forms/item-selects

Problem is not present in my own code when using <FooterTemplate>.

When scrolled to the top of a page and opening a modal the page content shifts down about 10px

To reproduce:
Go to documentation: Modals Docs
Make sure you are scrolled all the way up and press the button to open a modal.
All the content except the navbar will shift downwards.

SwitchContent not work on Firefox browser

I use this code:

<SwitchContent Animation="SwitchAnimation.Flip" ActiveChanged="OnAgrementChanged"> <DefaultTemplate> <Icon IconType="@TablerIcons.Thumb_down" style="height:22px;" TextColor="TablerColor.Danger" /> </DefaultTemplate> <ActiveTemplate> <Icon IconType="@TablerIcons.Thumb_up" style="height:22px;" TextColor="TablerColor.Teal" /> </ActiveTemplate> </SwitchContent>

In Firefox browser are shown both icons at same time. In all other browser it work.

I use FireFix browser version 112.0.1 with default settings

Avatar should support base64 data

Browser console error

Hello
I'm getting the below error in the browser console when adding the DropDown component or a Select.
I copied the example just like the DOCs project, but I think it must be missing some reference, but I'm not able to find the fault.

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Could not find 'tabBlazor.clickOutsideHandler.addEvent' ('tabBlazor' was undefined). Error: Could not find 'tabBlazor.clickOutsideHandler.addEvent' ('tabBlazor' was undefined). at https://localhost:44315/_framework/blazor.webassembly.js:1:1287 at Array.forEach (<anonymous>) at e.findFunction (https://localhost:44315/_framework/blazor.webassembly.js:1:1247) at b (https://localhost:44315/_framework/blazor.webassembly.js:1:2989) at https://localhost:44315/_framework/blazor.webassembly.js:1:3935 at new Promise (<anonymous>) at Object.beginInvokeJSFromDotNet (https://localhost:44315/_framework/blazor.webassembly.js:1:3908) at Object.w [as invokeJSFromDotNet] (https://localhost:44315/_framework/blazor.webassembly.js:1:64232) at _mono_wasm_invoke_js_blazor (https://localhost:44315/_framework/dotnet.5.0.12.js:1:190800) at do_icall (wasm://wasm/00aba242:wasm-function[10596]:0x194e4e) Microsoft.JSInterop.JSException: Could not find 'tabBlazor.clickOutsideHandler.addEvent' ('tabBlazor' was undefined). Error: Could not find 'tabBlazor.clickOutsideHandler.addEvent' ('tabBlazor' was undefined). at https://localhost:44315/_framework/blazor.webassembly.js:1:1287 at Array.forEach (<anonymous>) at e.findFunction (https://localhost:44315/_framework/blazor.webassembly.js:1:1247) at b (https://localhost:44315/_framework/blazor.webassembly.js:1:2989) at https://localhost:44315/_framework/blazor.webassembly.js:1:3935 at new Promise (<anonymous>) at Object.beginInvokeJSFromDotNet (https://localhost:44315/_framework/blazor.webassembly.js:1:3908) at Object.w [as invokeJSFromDotNet] (https://localhost:44315/_framework/blazor.webassembly.js:1:64232) at _mono_wasm_invoke_js_blazor (https://localhost:44315/_framework/dotnet.5.0.12.js:1:190800) at do_icall (wasm://wasm/00aba242:wasm-function[10596]:0x194e4e) at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__15'1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext() at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at TabBlazor.ClickOutside.OnAfterRenderAsync(Boolean firstRender) in D:\dev\TabBlazor\src\TabBlazor\Components\Utilities\ClickOutside.razor:line 22 at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Table footer with summary

Hi

I can't found from samples (https://tabblazor.com/docs/tables) table footer. Please help.

Table data formats

Hi

I can't find way for format decimal, please help

TreeView should support multiselect

Suggestion: Table custom edit modal

This isn't as much of an issue as maybe a suggestion. Or maybe there is an issue way of doing this that I've not thought about.

In the Table component. There are two edit modes: Inline and Popup. The latter gives you a "canned" modal that has a list of fields from the table itself. This works well for small column counts, but sometimes the way the data is shown, needs to be organized in a better way (like an address for example), or even edit fields that are part of the model but are not shown in the table itself to conserve real estate.

Is there a way of making a third edit mode (call it custom), where you can specify a razor component and pass the model as a parameter. Show said razor component as a modal. The developer will need to take care of all validation. And on submit, pass a ModalResult.Ok with the model object so that the table can refresh it.

I know that you can probably do this via a button or icon. But I think it would be a nice feature to have that functionality in the component and make things really flexible.

Love the work. This is great stuff.

how to use different icon providers with NavbarMenuItem

Hi I am new to blazor and I came across TabBlazor , I really like it, but struggling with few things.

Lets suppose I wanted to use a different icon provider I.E google materials etc..
Once I have imported all the files in the css folder , how can the NavbarMenuItem be changed to use a different icon provider?

How can I generate the path etc.. from google material icons to add to the icons class?

Any suggestions?
Many thanks

Table Pagination?

Hi

Table Pagination on the server side?
could you please provide an example?
thanks

Blazor Modal

Hi there. I have a quick question. This is built on top of Blazor. I built my own popup (Modal) and the close X, refuses to closes the modal or better yet refuses to call the function to close the modal. Since I don't know anything about Tabler, but I am guessing something is blocking the call. Do you guys have any ideas or can you tell me what I might be missing in my thinking on why I can't do a standard Blazor Modal?

-Mike

Table - Unable to add new Item when search is set

ProgressSize.Large Is missing in Tabler

@mfaalk

CORS-Error while loading code snippets from github

The demo site throws a cors error while loading the code snippets from gihub.

DropDown not closed after select

Great job with this Template,

My issue is when selecting an option from dropdown the selected value isn't rendered in select box and options list isn't closed

Ability to cycle sorting mode to 'off' on table column

Currently once you click a table column the sorting is always 'on' with no way of turning it off.

Proposed solution:
Cycle though ascending, descending and then "off"

Change table column sort Icon

Typo in navigation - Utilites

This is a fantastic effort. We're working on a asp.net framework over at https://github.com/rovercore/rovercore that is using Tabler as well. I like the idea of a clean theme that is fully open source.

I did want to report a small typo in the menu. You have Utilities being spelled as Utilites.

Dropdown as context menu isn't closed when left-clicking outside the menu

I would like for the dropwon to automatically close when I click outside of it. Just like on Windows.

Table re-rending

Hi

I tried to render different number of columns in one component. However, because the number of columns in the component is not re-rendered, an outOfRange Error occurs. So I tried calling HasStateChanged() but it didn't work. Is there any way to re-render the table component?

TreeView should support checkboxes

Blurred background when Modal is opened shifts down

Whenever I open a modal, the blurred background appears to move down about 10 or 15 px. Can that be adjusted?

Offline use

Hi,

currently TabBlazor uses
<link rel="stylesheet" href="https://unpkg.com/@tabler/[email protected]/dist/css/tabler.min.css">
in the HEAD area... which is unfortunate since we want to use this template for a intranet application that has no internet connection whatsoever.

Therefore in pure intranet environments the Template is broken and wont work.

Is it possible to add, rather soonish, a switch to disable this link and provide the CSS offline by hand?

Datepicker not styled

First of all : Great and good looking work 👍

I'm having a problem getting the Datepicker to render correctly (look at picture).

My solution setup:

• index.html file like: https://github.com/TabBlazor/TabBlazor.Templates/blob/master/TabBlazor.Templates.Wasm/wwwroot/index.html
• TabBlazor Nuget version tested 0.7.17-alpha and 0.7.16-alpha
• No own produced CSS files
• No Console Errors

Can you please advise me?

Tableform Queries

Hello,

I am very new to Blazor and decided to use to TabBlazor template for my very first project.
I have successfully integrated Edit table with popup edit mode (https://tabblazor.com/docs/tables) in my project. But I am having some challenges.
First, would you please suggest how can i change the button text from Add row to Add order.
Second, is it possible to show more edit fields of input box, drop down and etc than in table column?

Thank you in advance.

Table Header Column Css Class

Hello... Loving this project so far.

I have a quick question. I am using the table component. I am specifying my ChildContent and my Column (s) for the table. And I need to make some of the columns dissapear on a small screen.

The Column child component has a CssClass parameter. But it only gets applied to the TD, not the TH. So, when the screen is small only the content is hidden, and the header stays.

How can I get around this?

Thanks

More navigation/layout options

Hi, and great work!

I was wondering when/if you will get to more layout options? Preferably dark mode with horizontal sticky header :) (Sorry if I missed something when looking at the code).

Icon component lacks the icon css class

First of all : great work 👍

A simple remark/suggestion:
The Icon component lacks the css class icon, which is, i think, a default class for this component.
And in some cases you want to add icon-inline as well, which could be provided manually ofcourse..

Table Edit Bug 001

How can I display a field only in my popup dialog, without display always in table column?

Udpate to latest Tabler version

ApexCharts 2.0.0

Blazor-ApexCharts version 2.0.0 has been released:

https://github.com/apexcharts/Blazor-ApexCharts/releases/tag/v2.0.0

Do not have any change

hi
In template project when i change icon or add some components I do not have any change
Plesase direction me

solved

Titles not working in modal from table edit

In Modal when passing dialog options the title of my modal display always Edit.
Something happen with buttons, the text doesn't change.

Tabs are shown above dropdown

When having Tabs with a dropdown just above them the opened Dropdown is shown below the tabs

Note the dropdowns border & the text in the Tab extending into the dropdown

.NET 8.0 (LTS) Compatibility

Hi @joadan,

As you know .NET Core 8.0 (LTS) and C#12 released last week . What's new in .NET 8

As .net 8 is a LTS version, I wonder if there is any plan to update TabBlazor to work properly with it.

Thanks

Can't find code at Tabler.Docs.Server\Tabler.Docs\Components\_NameOfComponent_

How to fixed error :
Unable to find code at D:\TabBlazor-master\TabBlazor-master\docs\Tabler.Docs.Server\Tabler.Docs\Components.....

Table multy header

Update to .Net 6

Identity Roles/Users

Hello love this, and the thought process, can you please add user / role management as an option.

RTL Feature

Please could you provide RTL feature , or could you help me about how to add it.