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 " >

コードの例
コードの例（怠zyLoading）
ライブデモ

機能 /タスク

• 一般的なデータサポート
• アイテムのテンプレート
• スタイリング（ブートストラップ/フォント素晴らしい）
• サブツリーロードインジケーター（怠zyloading）
• ノードの選択の無効化
• 単一の選択
• マルチ選択（チェックボックス）
• イベント人口（onselect、onexpand、...）
• サポートEventCallback <>

ログを変更します

• 1.3
  • 怠zyなロードを処理するには、新しいプロパティ「onnodeexpand」を追加します
  • ブランチの荷重を示すために、新しいスタイルの「ノデロードクラス」を追加します
• 1.2
  • ノードが選択可能かどうかを評価するために、オプションのプロパティ「nodedidabled」を追加しました
  • 新しいスタイルクラス「nodeTitleSelectableClass」を追加しました（ノードが選択可能な場合に設定）
  • 新しいスタイルクラス「nodetitledisabledClass」を追加しました（ノードが無効になっている場合は設定）
• 1.1.8
  • 「ChildSelector」プロパティのデフォルトを追加します
• 1.1.7
  • 「スタイル」を子供に渡します
• 1.1.6
  • .NETコア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
  • かみそりからBlazor libに変換します
• 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 >

コードの例
ライブデモ

機能 /タスク

• 一般的なデータサポート
• アイテムのテンプレート
• オートコンプリート
• キー経由の選択（アップ/ダウン/入力）
• スタイリング（ブートストラップ）
• アイテムの選択を無効にします
• イベント人口（onselect、onRemove）
• サポートEventCallback <>

ログを変更します

• 1.2.3
  • .NETコア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
  • かみそりからBlazor libに変換します
  • 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コア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
  • かみそりからBlazor libに変換します
• 1.1.0
  • .NET Core 3 Preview4に更新します
  • 名前空間MW.Blazorに移動します
  • CasCadeValueを使用して、現在のページインデックスを提供します