Blazor.Components

大火組件

我正在研究的一些大麻零件：

• 樹
• 標籤選擇器
• 頁面面板

請參閱運行示例：https：//blazorcomponents.z6.web.core.windows.net/

樹

 < Tree 
    Nodes =" Items " 
    SelectedNode =" SelectedItem " 
    ChildSelector =" item => item.Childs " >
    < TitleTemplate > @context.Text </ TitleTemplate >
</ Tree >

客戶依賴

 < link rel =" stylesheet " href =" _content/MW.Blazor.Tree/styles.css " />
< link rel =" stylesheet " href =" https://use.fontawesome.com/releases/v5.8.1/css/all.css " integrity =" sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf " crossorigin =" anonymous " >

代碼示例
代碼示例（懶負載）
現場演示

功能 /任務

• 通用數據支持
• 項目模板
• 造型（引導程序/字體很棒）
• 子樹加載指示器（懶負載）
• 禁用節點的選擇
• 單個選擇
• 多選擇（複選框）
• 事件人口（OnSelect，Onexpand，...）
• 支持EventCallback <>

更改日誌

• 1.3
  • 添加新屬性“ onnodeexpand”來處理懶惰的加載
  • 添加新樣式的“ NodeloadingClass”以指示分支加載
• 1.2
  • 添加了可選屬性“ nodedisabled”以評估是否可選節點
  • 添加了新樣式類“ nodetitleselectableclass”（設置節點是可選的）
  • 添加了新樣式類“ NodetitledisabledClass”（設置節點是禁用的）
• 1.1.8
  • 添加“ ChildSelector”屬性的默認值
• 1.1.7
  • 將“風格”傳遞給孩子
• 1.1.6
  • 更新為.NET Core 3.0（最終）
• 1.1.4
  • 更新到.NET CORE 3.0-PREVIEW9
• 1.1.3
  • 更新到.NET CORE 3.0-PREVIEW8
• 1.1.2
  • 更新到.NET CORE 3.0-PREVIEW6
• 1.1.1
  • 從剃須刀轉變為爆炸式自由
• 1.1.0
  • 更新到.NET Core 3 Preview4
  • 移至名稱空間MW.Blazor
  • 實現EventCallback
  • 打破變化：SelectedNodes（ IList<TItem> ） - > SelectedNode（ TItem ）

標籤選擇器

 < TagSelector 
    SelectableTags =" @Tags " 
    SelectedTags =" @Selected " 
    Filter =" @((item,term) => item.Contains(term)) " >
    < TagTemplate > @context </ TagTemplate >
</ TagSelector >

客戶依賴

 < link rel =" stylesheet " href =" _content/MW.Blazor.TagSelector/styles.css " />
< script src =" _content/MW.Blazor.TagSelector/interop.js " > </ script >

代碼示例
現場演示

功能 /任務

• 通用數據支持
• 項目模板
• 自動完成
• 通過鍵選擇（上/下/輸入）
• 造型（bootstrap）
• 禁用項目的選擇
• 事件人口（ONSELECT，ONREMOVE）
• 支持EventCallback <>

更改日誌

• 1.2.3
  • 更新為.NET Core 3.0（最終）
• 1.2.1
  • 更新到.NET CORE 3.0-PREVIEW9
• 1.2
  • 添加新的回調“ onCreateTag”以捕獲用戶輸入並飛行創建標籤（問題＃1）
• 1.1.3
  • 更新到.NET CORE 3.0-PREVIEW8
• 1.1.2
  • 更新到.NET CORE 3.0-PREVIEW6
• 1.1.1
  • 從剃須刀轉變為爆炸式自由
  • 為SelectedTags添加EventCallback
• 1.1.0
  • 更新到.NET Core 3 Preview4
  • 移至名稱空間MW.Blazor
  • 實現EventCallback

頁面面板

 < PagePanel PageIndex =" @CurrentPage " Style =" height:250px " >
    < Page Widths =" 50%;100%;200% " >
        < div class =" d-flex justify-content-center align-items-center h-100 text-white h4 " style =" background:#00ff90 " >
            Page 1
        </ div >
    </ Page >
    < Page Widths =" 50%;30%;20%;50% " >
        < div class =" d-flex justify-content-center align-items-center h-100 text-white h4 " style =" background:#1596c7 " >
            Page 2
        </ div >
    </ Page >
    < Page Widths =" 70%;70%;20%;50% " >
        < div class =" d-flex justify-content-center align-items-center h-100 text-white h4 " style =" background:#b823be " >
            Page 3
        </ div >
    </ Page >
    < Page Widths =" 60%;60%;60%;100% " >
        < div class =" d-flex justify-content-center align-items-center h-100 text-white h4 " style =" background:#ff6a00 " >
            Page 4
        </ div >
    </ Page >
</ PagePanel >

< button onclick =" @(() => CurrentPage--) " > < </ button >
@CurrentPage
< button onclick =" @(() => CurrentPage++) " > > </ button >


@functions { int CurrentPage { get; set; } }

客戶依賴

 < link rel =" stylesheet " href =" _content/MW.Blazor.PagePanel/styles.css " />

代碼示例
現場演示

功能 /任務

• 同一頁面上的多個頁面
• “寬度”屬性的默認值
• 過渡時間的財產
• 簡化“寬度”屬性

更改日誌

• 1.1.6
  • 更新為.NET Core 3.0（最終）
• 1.1.4
  • 更新到.NET CORE 3.0-PREVIEW9
• 1.1.3
  • 更新到.NET CORE 3.0-PREVIEW8
• 1.1.2
  • 更新到.NET CORE 3.0-PREVIEW6
• 1.1.1
  • 從剃須刀轉變為爆炸式自由
• 1.1.0
  • 更新到.NET Core 3 Preview4
  • 移至名稱空間MW.Blazor
  • 使用CascadeValue提供當前頁面索引