Giter Club home page Giter Club logo

element-blazor's Introduction

Element-Blazor

Nuget

介绍

Element的Blazor版本

API 模仿 Element,CSS 直接使用 Element的样式,HTML 结构直接使用 Element 的 HTML 结构

Element 官方:https://element.eleme.cn/#/zh-CN/component/layout

社区讨论,相关文档

  1. GitHub https://github.com/Element-Blazor/Element-Blazor/issues
  2. Gitee https://github.com/Element-Blazor/Element-Blazor/issues

使用前提

参考Blazor使用的前提条件

  1. .Net 7.0

源码说明

拉取代码,用 VS2022 打开,直接启动 Element.ServerRender 项目

案例展示

  1. GitHub:https://element-blazor.github.io/
  2. Gitee:https://element-blazor.gitee.io/

element-blazor's People

Contributors

188867052 avatar heming2015 avatar jianzhichu avatar laiqm avatar lindexi avatar lovewhowho avatar maikebing avatar nameiszongpeng avatar nnian-es avatar smith-zp avatar vm0100 avatar wzxinchen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

element-blazor's Issues

wasm的支持

.net core 3.1已经开始支持blazor wasm(预览),请问blazui什么时候提供支持呢?

BPagination这个控件可以添加类似于onclick事件吗?

由于这个控件不自带这种事件,想实现类似onclick事件,点击一下按钮,在事件里可以识别到点击了哪个按钮,例如,点了1,或者2,或者3等,但是完全懵,作者可以指点添加一下这个功能吗?感谢作者的辛勤劳动与指点~

表单下拉列表

清空之后,提交到后台仍然有值(最后一次选择的项)

国际化支持(Internationalization support)

中文介绍
WebAssembly 渲染版,进行如下配置:
在 Program 类中增加如下代码即可使用,默认为简体中文
builder.Services.AddSingleton<BLang>();//此处必须单例

Server 渲染版,进行如下设置:
在 Startup 类中增加如下代码即可使用,默认为简体中文
services.AddSingleton<BLang>();//此处必须单例

使用方法
新建组件,继承 BComponentBase 类,可像如下切换语言

public class BasicLangBase : BComponentBase
    {
        public async Task SetEnLang(MouseEventArgs eventArgs)
        {
            Lang.LangLocale = "en-US";
        }

        public async Task SetCnLang(MouseEventArgs eventArgs)
        {
            Lang.LangLocale = "zh-CN";
        }
    }

可像如下显示当前语言对应的文本

@inherits BasicLangBase
<div>@Lang.T("Message")</div>
<h1>@Lang.T("Snowman:Data:Title")</h1>
<div>@Lang.T("Snowman:Body")</div>
<br/>
<BButton Type="@ButtonType.Primary" OnClick="SetEnLang">@Lang.T("SetEnLang")</BButton>
<BButton Type="@ButtonType.Primary" OnClick="SetCnLang">@Lang.T("SetCnLang")</BButton>

其中,Lang是BComponentBase的一个属性,通过它可输出对应语言的文本
国际化文件格式如下:

{
  "Message": "你好,世界",
  "Snowman": {
    "Data" : {
      "Title": "《雪人》"
    },
    "Body": "    好棒哦!下雪了!是时候堆个雪人了。詹姆斯跑了出去。他弄了一大堆雪。他把一个大雪球放到了最上面来充当头部。他给雪人加了一个围巾和一个帽子,又给雪人添了一个桔子当鼻子。他就加了煤炭来充当眼睛和纽扣。傍晚,詹姆斯打开了门。他看见了什么?雪人在移动!詹姆斯邀请它进来。雪人从来没有去过房间里面。它对猫咪打了个招呼。猫咪玩着纸巾。不久之后,雪人牵着詹姆斯的手出去了。他们一直向上升,一直升到空中!他们在飞翔!多么美妙的夜晚!第二天早上,詹姆斯从床上蹦了起来。他向门口跑去。他想感谢雪人,但是它已经消失了。"
  },
  "SetEnLang": "切换英文",
  "SetCnLang": "切换中文",
   "key":"text"
}

目前内置 English 与 中文 两种语言,可以自行扩充语言,例如下面是繁体中文的文件格式,文件名为zh-TW.json:

{
      "reg":"註冊",
      "login":"登錄"
}

要让这个文件生效,只需要获取到BLang实例,然后将 LangLocale 属性设置为 zh-TW,即可切换语言。

如果您不想继承 BComponentBase 这个类,又想切换语言,只需要依赖注入获取到BLang实例,然后将 LangLocale 属性设置为 zh-TW,即可切换语言。

English introduction:

The webassembly rendering version is configured as follows:

Add the following code to the program class, which is simplified Chinese by default

Builder. Services. Addsingleton <Blang> (); // a single instance is required here

Server rendering version, set as follows:

Add the following code to the startup class, which is simplified Chinese by default

Services. Addsingleton <Blang> (); // a single instance is required here

How to use

Create a new component, inherit bccomponentbase class, and switch languages as follows

public class BasicLangBase : BComponentBase
{
public async Task SetEnLang(MouseEventArgs eventArgs)
{
Lang.LangLocale = "en-US";
}



public async Task SetCnLang(MouseEventArgs eventArgs)
{
Lang.LangLocale = "zh-CN";
}
}

The text corresponding to the current language can be displayed as follows

@inherits BasicLangBase
<div>@Lang.T("Message")</div>
<h1>@Lang.T("Snowman:Data:Title")</h1>
<div>@Lang.T("Snowman:Body")</div>

<BButton Type="@ButtonType.Primary" OnClick="SetEnLang">@Lang.T("SetEnLang")</BButton>
<BButton Type="@ButtonType.Primary" OnClick="SetCnLang">@Lang.T("SetCnLang")</BButton>

Where Lang is an attribute of BComponentbase, through which the text of the corresponding language can be output

The international file format is as follows:

{
"Message": "Hello, world",
"Snowman": {
"Data": {
"Title": "snowman"
}

"Body": "great! It's snowing! It's time to make a snowman. James ran out. He made a lot of snow. He put a big snowball on the top to act as the head. He added a scarf and a hat to the snowman and an orange as his nose. He added coal as eyes and buttons. In the evening, James opened the door. What did he see? Snowman moving! James invited it in. The snowman has never been in the room. He said hello to the cat. The cat is playing with paper towels. Soon after, the snowman took James by the hand and went out. They're going up, up in the air! They are flying! What a wonderful night! The next morning, James jumped out of bed. He ran to the door. He wants to thank the snowman, but it's gone. "
}
"Setenlang": "switching English",
"Setcnlang": "switching Chinese",
"Key": "text"
}

At present, there are two built-in languages, English and Chinese, which can be expanded by themselves. For example, the following is the file format of traditional Chinese, with the file name of zh-tw.json:

{
      "reg":"註冊",
      "login":"登錄"
}

For this file to take effect, just get the Blang instance and set the langlocale property to zh-TW to switch the language.

If you don't want to inherit BComponentbase and want to switch languages, you only need to obtain the Blang instance by dependency injection, and then set the langlocale property to zh-TW to switch languages.

MessageService.Show连续使用只显示第一个

Code:

            MessageService.Show("A!", MessageType.Error);
            MessageService.Show("B!", MessageType.Error);
            MessageService.Show("C!", MessageType.Error);
            MessageService.Show("D!", MessageType.Error);
            MessageService.Show("E!", MessageType.Error);

image

F12依旧是有元素但未正常显示

测试环境:Chrome
UA:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

DialogService.ShowDialogAsync<Component, int>("title", new Dictionary<string, object>()) 叉号关闭窗口报错

Index.razor

@page "/Search"
@inject DialogService DialogService
<BButton OnClick="showdialog">open</BButton>
<h1>Hello, world!</h1>
Welcome to your new app.
@code{
    async void showdialog()
    {
        await DialogService.ShowDialogAsync<Component, int>("title", new Dictionary<string, object>());
    }
}

Component.razor

<h3>Component</h3>

报错内容

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'Pb37cme57SCa5nzkzs7oH0nCXLzOzKcuv42M6CsuBO4'.
System.NullReferenceException: Object reference not set to an instance of an object.
   at Blazui.Component.DialogService.ShowDialogAsync[TResult](Object typeOrRender, String title, Single width, IDictionary`2 parameters)
   at Blazui.Component.DialogService.ShowDialogAsync[TComponent,TResult](String title, Single width, IDictionary`2 parameters)
   at Blazui.Component.DialogService.ShowDialogAsync[TComponent,TResult](String title, IDictionary`2 parameters)
   at Wistd.StockControl.WebSite.Pages.Search.Index.showdialog() in D:\WiStd\StockControl\Wistd.StockControl.WebSite\Pages\Search\Index.razor:line 9
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_0(Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c.<.cctor>b__23_0(Object state)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

可以给BInput添加KeyDown事件吗?

自带的默认只有ValueChanged事件,只有输入完后焦点移动到其他地方才会触发此事件,我想要的效果是每输入一个字符的时候,就触发一次事件,但是不会写

BDatePicker控件DateChanged有问题

<BDatePicker Placeholder="开始时间" Date="StartTime" ValueChanged="ChangeStartTime" DateChanged="StartTimeChanged"/>
如上方代码,没有ValueChanged的情况下,DateChanged无法生效。

DialogService.ShowDialogAsync 弹出一个窗口关闭后无法紧接着弹出第二个

感觉没办法很好的描述,直接上代码:

            try
            {
                await DialogService.ShowDialogAsync<MessageBoxComponent, int>("添加员工向导", new Dictionary<string, object>() { { "Message", "新创建的员工密码为默认密码:123456,系统会在用户首次登录时提醒员工修改密码。" }, { "OkTitle", "开始创建" } });
            }
            catch { goto cancel; }
            string name;
            try
            {
                name = (await DialogService.ShowDialogAsync<InputComponent, string>("添加员工 1/2 - 设置员工名", new Dictionary<string, object>() { { "Title", "员工名" } })).Result;
            }
            catch { goto cancel; }
            Shop shop;
            try
            {
                shop = (await DialogService.ShowDialogAsync<SearchShopComponent, Shop>("添加员工 2/2 - 选择所属分店", new Dictionary<string, object>())).Result;
            }
            catch { goto cancel; }
            NavigationManager.NavigateTo(NavigationManager.Uri, true);

已在chrome上测试,同样无法弹出。
两个相同类型的TComponent也无法弹出。
F12看到有新对话框相关元素但是显示位置错误,在页面最顶端并且不可见。

BPaginationBase在PageSize修改后最大页码不会跟着更新

PageSize修改后未同步更新pageCount

@page "/"
@code{
    class A{public string AA { get; set; }}
    protected int pageSize = 5;
    protected int currentPage = 1;
    protected BTable table;
    List<A> AllDatas = new List<A>();
    List<A> Datas = new List<A>();
    int CurrentPage
    {
        get => currentPage;
        set
        {
            currentPage = value;
            Datas = AllDatas.Skip((currentPage - 1) * pageSize).Take(pageSize).ToList();
        }
    }
    protected override void OnInitialized()
    {
        for (int i = 0; i < 100; i++)
        {
            AllDatas.Add(new A() { AA = i.ToString() });
        }
        CurrentPage = 1;
    }
}
<BTable DataSource="Datas" Total="AllDatas.Count" @bind-CurrentPage="CurrentPage" PageSize="pageSize" @ref="table" />
<BButton OnClick="()=> { pageSize = 10;table.MarkAsRequireRender();CurrentPage = 1;}"> BTN</BButton>

table 全选

加载页面后选中全选按钮,
然后调用--- table?.MarkAsRequireRender();、 this.StateHasChanged(); 后
行数据选中状态为取消,但是全选状态没有改变

about loading

1.可以考虑支持一些组件默认在加载的时候带loading。例如table,panel,layout,menutree,card and so on

BTable列排序

使用标签增加的列总在最后面,需要BTableTemplateColumn增加排序权重,对于数据库中TableColumnAttribute也同样需要

Dialog全屏弹窗扩展

在DialogOption 中增加了一个 bool 类型的属性 FullScreen 默认 false

另外在DialogService中增加了一个扩展方法,如下:


 public async Task<DialogResult> ShowFullScreenDialogAsync<TComponent>(string title, IDictionary<string, object> parameters)
            where TComponent : ComponentBase
        {
            var taskCompletionSource = new TaskCompletionSource<DialogResult>();
            var option = new DialogOption()
            {
                Content = typeof(TComponent),
                IsDialog = true,
                Title = title,
                Width = 0,
                FullScreen = true,
                Parameters = parameters,
                TaskCompletionSource = taskCompletionSource,

            };
            ShowDialog(option);
            return await taskCompletionSource.Task;
        }
 

文件上传

文件上传Linux下一直不进入控制器,然后在BUpload添加一个name属性为控制器的参数名称就行了 Windows不添加name也可以上传成功 但是Linux下还是要加上

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.