BlazorMarkdownEditor
Rewrite the Markdown Editor for Blazor with EasyMDE
これは、.NET8を備えたBlazor WebAssemblyとBlazor ServerのMarkdownエディターコンポーネントです。コンポーネントは、EasyMDEバージョン1.0.xに基づいて、エディターを作成します。更新と変更を制御したいと思っていたので、JavaScriptライブラリのリポジトリを作成することにしました。コンポーネントはJavaScriptライブラリ周辺のラッパーであり、BlazorアプリケーションでMarkdownエディターを使用できるBlazorコンポーネントです。
より多くのドキュメントとこのコンポーネントを支援するには、ここに作成した投稿をご覧ください。
オンラインでマークダウンエディターを試してください（アップロードは有効になりません）
_Imports.razorにエディターを追加します
@using PSC.Blazor.Components.MarkdownEditor
@using PSC.Blazor.Components.MarkdownEditor.EventsArgs
次に、 index.html 、 host.htmlまたはApp.razorでそれらの行を追加します。
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/markdowneditor.css" rel="stylesheet" />
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/easymde.min.css" rel="stylesheet" />
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js"></script>
jQueryも必要であることを忘れないでください。コンポーネントには、自分でメンテナンスされているEasy Markdown Editor Scriptバージョン1.0.xが含まれています。このスクリプトをプロジェクトに追加できますが、コンポーネントでスクリプトを使用すると、正常に動作し、すべての機能がテストされていると確信しています。
CSS markdowneditor.cssは、 att 、 note 、 tip 、 warn 、 videoなど、マークダウンエディターに追加した新しいタグと同じスタイルが含まれています。
Razorページでは、これらの行でコンポーネントを追加できます
<div class="col-md-12">
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged" />
<hr />
<h3>Result</h3>
@((MarkupString)markdownHtml)
</div>
@code {
string markdownValue = "#Markdown EditornThis is a test";
string markdownHtml;
Task OnMarkdownValueChanged(string value)
{
return Task.CompletedTask;
}
Task OnMarkdownValueHTMLChanged(string value)
{
markdownHtml = value;
return Task.CompletedTask;
}
}
valueとValueHTMLChangedの間の主な異なるのは、 ValueHTMLChangedテキストのレンダリングされたHTMLコードを返すのに対し、editorで編集者に記述されたテキストを返すValueです。 ValueHTMLChangedにはSVGタグにマーメイドグラフを表示するためのコードが含まれています。
その結果、次のスクリーンショットのように、マークダウンエディターが素晴らしいです。これは、このリポジトリのデモのスクリーンショットです。
マークダウンエディターに次のコードを追加します
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false"
CustomButtonClicked="@OnCustomButtonClicked">
<Toolbar>
<MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa fa-bolt" Title="Bold" />
<MarkdownToolbarButton Separator Name="Custom button"
Value="@("Hello from your custom Toolbar Button")"
Icon="fa fa-star"
Title="A Custom Button" />
<MarkdownToolbarButton Separator Name="https://github.com/erossini/BlazorMarkdownEditor"
Icon="fa fab fa-github" Title="A Custom Link" />
</Toolbar>
</MarkdownEditor>
@code {
// omitted code...
Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs)
{
Console.WriteLine("OnCustomButtonClicked -> " + eventArgs.Value);
buttonText += "OnCustomButtonClicked -> " + eventArgs.Value + "<br />";
return Task.CompletedTask;
}
}
タグMarkdownEditorでは、1つ以上のMarkdownToolbarButtonを含む新しいタブToolbarを追加します。
各MarkdownToolbarButtonには、デフォルトのActionのいずれか（下の表を参照）またはWebサイトへのリンクなどのカスタム値を持つことができます。 MarkdownToolbarButtonの前に垂直線を表示する場合は、 MarkdownToolbarButtonにプロパティSeparatorを追加します。
同様に、最初のinitの後にマークダウンエディターのコンテンツを更新する必要があります。たとえば、アプリケーションがAPIから値を読み取る必要があり、時間がかかるためです。そのためには、次のコードのように、 MarkdownEditorにrefを追加し、 SetValueAsyncプロパティを呼び出すために使用する必要があります
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1" />
@code {
MarkdownEditor Markdown1;
// omitted code...
async Task ChangeText()
{
markdownValue = "Test!";
await Markdown1.SetValueAsync(markdownValue);
}
}
コンポーネントにさらに機能を追加するために、Mermaid.js 10.2.1のバージョンが含まれています。
この機能をMarkdownエディターに追加するには、 index.htmlにこのスクリプトを追加するだけで十分です
< script src = "/_content/PSC.Blazor.Components.MarkdownEditor/js/mermaid.min.js" > </ script >スクリプトは、このライブラリが呼び出されているかどうかを確認します。ページに追加された場合、Markdownエディターはツールバーにボタンを自動的に追加して、人魚のタグを挿入します。そのタグはです
```mermaid
```
コンポーネントでこのスクリプトを使用します
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
またはCDN
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
人魚レンダリングは機能しません。エラーはです
E.Replaceは関数ではありません
したがって、次の段落で説明しているように、スクリプトを新しいものでアップグレードすることをお勧めします。
10.9.1の新しいバージョンのMermaidを使用するには、 index.html 、 host.html 、またはApp.razorにこのコードを追加する必要があります。
<script type="module">
import mermaid
from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
現時点では、このスクリプトをmarkdownEditor.jsに含める方法を見つけようとしていますが、うまくいくかどうかはわかりません。
### An example of the mermaid graphs
A ** Sequence diagram ** is an interaction diagram that shows how processes operate with one another and in what order .Sequendediagram Alice- >> John：こんにちはジョン、お元気ですか？ジョン - >>アリス：素晴らしい！アリス - ）ジョン：後で会いましょう！
A **Gantt chart** is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
ガントタイトルガント図a gantt diagram dateformat yyyy-mm-ddセクションセクションセクションAタスク：A1、2014-01-01、30d別のタスク：A1、20d後のセクションSecの別のタスク：2014-01-12、12d別のタスク：24D
An **entity–relationship model** (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types).
erdiagram Customer || -o {注文：注文|| - | {line-item：contas customer} | .. | {delivery-address：outes
## Add Highlight.js
This script is not included in the component but the component can detect if _Highlight.js_ is loaded. In this case, the Markdown Editor renders also the code in one of the supported languages.
To enable this function, add the script in your project and then in the `index.html` add the following lines
両方のライブラリがindex.htmlにロードされている場合、人魚レンダリングは機能しません。
マークダウンには、ハイライトノート、ヒント、警告、または注意メッセージなど、ページにいくつかの有用な情報を表示するいくつかの欠落タグがあります。そこで、このマークダウンエディターに追加しました。この実装の結果の例は、次のスクリーンショットにあります。
メッセージを追加するには、エディターのツールバー内のアイコンをクリックするか、それらのコマンドを追加します。
| 指示 | 色 | 説明 |
|---|---|---|
| `` at | 赤 | 注意メッセージを表示します |
| 「メモ | azure | ドキュメントにメモを追加します |
| ``ヒント | 緑 | ヒントメッセージが表示されます |
| 「警告 | オレンジ | これは警告メッセージです |
Markdownエディターコンポーネントには、 alert.cssと呼ばれるCSSがあり、 markdowneditor.cssを追加していない場合はこの行でindex.htmlに追加できます。
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/alert.css" rel="stylesheet" />
デフォルトでは、Markdownエディターはブラウザのローカルストレージにテキストを保存します。
AutoSaveEnabledはTrueあり、 AutoSaveSubmitDelayは最大5000ミリ秒に設定されています。これは、テキストが5秒ごとに保存されることを意味します。
保存されたテキストをクリーニングしたい場合は、次のコードを使用できます
<MarkdownEditor @bind-Value="@markdownValue" MaxHeight="300px"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1"
AutoSaveEnabled="true" />
@code {
MarkdownEditor Markdown1;
async Task DeleteStorage()
{
await Markdown1.CleanAutoSave();
}
}
Markdownエディターでは、テキストにビデオを追加できます。ビデオは、YouTube、Vimeo、またはその他のビデオプロバイダーからのものです。ビデオは、エディターとレンダリングされたHTMLコードに表示されます。
```video
https://www.youtube.com/shorts/JY1zFZgX6zM
```
BlazorのMarkdownエディターには、JavaScriptバージョンのすべての機能をマッピングするためのエステレンスプロパティのコレクションがあります。このリポジトリには、2つのプロジェクトがあります。
Index.razor基本的な関数でコンポーネントを使用する方法とUpload.razor画像アップロードに対処する方法を示すRazor。アップロードをテストするには、プロジェクトMarkdownEditorDemo.Apiを実行する必要があります| 名前 | 説明 | タイプ | デフォルト |
|---|---|---|---|
| AutoSaveEnabled | 自動保存の設定を取得または設定します。書かれているテキストを保存し、将来ロードします。含まれているフォームが送信されると、テキストが忘れられます。 Markdownエディターの一意のIDを選択することをお勧めします。 | ブール | 間違い |
| AutoSaveid | 自動保存識別子を取得または設定します。コンポーネントが自動保存できるように、一意の文字列識別子を設定する必要があります。これをあなたのウェブサイトの他の場所にあるコンポーネントの他のインスタンスから分離するもの。 | 弦 | デフォルト値 |
| AutoSavedelay | ミリ秒単位でのセーブ間の遅延。デフォルトは10000（10S）です。 | int | 10000（10S） |
| autosavesubmitdelay | フォームの送信が失敗し、テキストをミリ秒単位で保存すると仮定する前に遅延します。 | int | 5000（5S） |
| AutoSaveText | AutoSaveのテキスト | 弦 | AutoSaved： |
| AutoSaveTimeFormatLocale | DateTimeが表示される形式を設定します。詳細については、JavaScriptドキュメントDateTimeFormatインスタンスを参照してください | 弦 | en-us |
| AutoSaveTimeFormatyear | その年のフォーマットを設定します | 弦 | 数値 |
| AutoSavetimeFormatMonth | 月の形式を設定します | 弦 | 長さ |
| AutoSaveTimeFormatday | その日の形式を設定します | 弦 | 2桁 |
| AutoSavetimeFormathour | 時間の形式を設定します | 弦 | 2桁 |
| AutoSavetimeFormatminute | 分の形式を設定します | 弦 | 2桁 |
| autodownloadfontawesome | Trueに設定すると、Force Downloads Font Awesome（アイコンに使用）。 falseに設定されている場合は、ダウンロードを防ぎます。 | ブール？ | ヌル |
| CharpulesStatUstext | キャラクターのカウントのためにStatusBarに表示する単語を設定します | 弦 | characters: |
| CustomButtonClicked | カスタムツールバーボタンがクリックされた後に発生します。 | EventCallback | |
| customimageupload | カスタム画像アップロードハンドラーを設定します | ||
| 方向 | RTLまたはLTR。左から左の言語をサポートするためにテキストの方向を変更します。デフォルトはLTRです。 | 弦 | LTR |
| エラーズ | ユーザーに表示されるエラーは、ErrorCallbackオプションを使用して表示されます。ここで、 Image_Name 、 Image_Size 、およびImage_Max_sizeは、カスタマイズまたは国際化に使用できるそれぞれの値に置き換えられます。 | MarkDownErrormessages | |
| 隠れ家 | 非表示にするアイコン名の配列。ツールバーを完全にカスタマイズすることなく、デフォルトで表示される特定のアイコンを非表示にするために使用できます。 | 弦[] | 「サイドバイサイド」、「フルスクリーン」 |
| ImageAccept | アップロード前に画像タイプを確認するために使用されるMIMEタイプのコンマ分離されたリスト（注：クライアントを信頼しないで、常にサーバー側でファイルタイプをチェックします）。 DefaultはImage/PNG、Image/JPEG、Image/JPG、Image.gifになります。 | 弦 | Image/PNG、Image/JPEG、Image/JPG、Image.gif |
| imagecsrftoken | AJAXコールをアップロードするためのAjaxコールを含めるCSRFトークン。たとえば、Django Backendで使用されます。 | 弦 | |
| ImageMaxize | アップロード前にチェックされたバイトの最大画像サイズ（注：クライアントを信頼しないで、常にサーバー側で画像サイズをチェックしてください）。デフォルトは1024 * 1024 * 2（2MB）です。 | 長さ | 1024 * 1024 * 2（2MB） |
| Imagepathabsolute | Trueに設定されている場合、 ImageUploadFunctionからImageUrlを扱い、 FilepathはImageuploadendPointから相対パスではなく絶対的なパスとして戻ります。 | 弦 | |
| ImageTexts | Import_name 、 Image_size 、およびImage_max_sizeがそれぞれの値に置き換えられるImport Image機能のユーザー（主にステータスバーに）に表示されるテキストは、カスタマイズまたは国際化に使用できます。 | MarkdownimageTexts | ヌル |
| ImageUploAdauthEnticationsChema | APIの認証が必要な場合は、このプロパティに使用するスキーマを割り当てます。 Bearerは一般的なものです。 | 弦 | 空の |
| ImageUploAdauthEnticationToken | APIの認証が必要な場合は、このプロパティにトークンを割り当てます | 弦 | 空の |
| Linenumbers | trueに設定されている場合、エディターの行番号を有効にします。 | ブール | 間違い |
| linesstatustext | ラインのカウントのためにステータスバーに表示する単語を設定します | 弦 | lines: |
| ラインラッピング | falseに設定する場合は、ラインラッピングを無効にします。デフォルトはtrueです。 | ブール | 間違い |
| MarkDownurl | MarkdownガイドのURLを設定します。 | マークダウンガイドへのリンク | |
| マックスハイト | 組成領域の固定高さを設定します。 Minheightオプションは無視されます。 「500px」のような有効なCSS値を含む文字列である必要があります。デフォルトは未定義です。 | 弦 | |
| maxuploadimagemessagesize | ファイルをアップロードするときに最大メッセージサイズを取得または設定します。 | 長さ | 20 * 1024 |
| ミニハイト | 組成領域が自動栽培を開始する前に、組成領域の最小高さを設定します。 「500px」のような有効なCSS値を含む文字列である必要があります。デフォルトは「300px」です。 | 弦 | 300px |
| NativeSpellchecker | 編集者のスペルチェックを有効にする（true）または無効（false） | ブール | 真実 |
| プレースホルダー | 設定されている場合、カスタムプレースホルダーメッセージを表示します。 | 弦 | ヌル |
| segmentfetchTimeout | ファイルをアップロードするときに、セグメントフェッチタイムアウトを取得または設定します。 | タイムスパン | 1分 |
| シャワー | 表示するアイコン名の配列。ツールバーを完全にカスタマイズすることなく、デフォルトで隠された特定のアイコンを表示するために使用できます。 | 弦[] | 「コード」、「テーブル」 |
| スペルチェッカー | 編集者のスペルチェックを有効にする（true）または無効（false） | ブール | 真実 |
| Tabsize | 設定されている場合は、タブサイズをカスタマイズします。デフォルトは2です。 | int | 2 |
| テーマ | テーマをオーバーライドします。デフォルトはeasyMdeです。 | 弦 | easymde |
| ツールバー | [オプション]ツールバーのコンテンツを取得または設定します。 | renderfragment | |
| ツールバルティップ | falseに設定する場合は、ツールバーボタンのヒントを無効にします。デフォルトはtrueです。 | ブール | 真実 |
| uploadImage | TRUEに設定されている場合、画像のアップロード機能を有効にします。これは、ドラッグドロップ、コピーパステ、および参照ファイルウィンドウでトリガーできます（ユーザーがアップロードイメージアイコンをクリックすると開きます）。デフォルトはfalseになります。 | ブール | 間違い |
| 価値 | マークダウン値を取得または設定します。 | 弦 | ヌル |
| valuehtml | Markdown値からHTMLを取得します。 | 弦 | ヌル |
| wordsstatustext | 単語のカウントのためにステータスバーに表示する単語を設定します | 弦 | words: |
| 名前 | 説明 | タイプ |
|---|---|---|
| エラーコールバック | エラーメッセージを表示する方法を定義するために使用されるコールバック関数。デフォルトは（errormessage）=> alert（errormessage）になります。 | func <string、task> |
| ImageUploAdChanged | 選択した画像が変更されるたびに発生します。 | func <filechangedeventargs、task> |
| ImageUploadeded | 個々の画像のアップロードが終了したときに発生します。 | func <filedendeventargs、task> |
| ImageUploAdendPoint | 非同期POSTリクエストを介して、画像データが送信されるエンドポイント。サーバーはこの画像を保存し、JSON応答を返すことになっています。 | 弦 |
| ImageUploAdprogressed | 宛先ストリームに書かれている画像の進行状況に通知します。 | func <fileprogressedeventargs、task> |
| ImageUploAdstarted | 個々の画像のアップロードが開始されたときに発生します。 | func <filestartedeventargs、task> |
| ValueChanged | マークダウン値が変更された後に発生するイベント。 | EventCallback |
| valuehtmlChanged | マークダウン値が変更され、新しいHTMLコードが利用可能になった後に発生するイベント。 | EventCallback |
BlazorのMarkdownエディターは、ファイルのアップロードを処理し、エディターに相対マークダウンコードを追加できます。そのためには、プロパティのUploadImage trueに設定する必要があります。また、アップロードAPIは、プロパティImageUploadEndpointで指定する必要があります。場合によっては、APIには認証が必要です。 ImageUploadAuthenticationSchemaとImageUploadAuthenticationTokenを使用すると、正しいスキーマとトークンを通過して通話で使用することができます。
これらの値は、ヘッダーのHttpClient POSTリクエストに追加されます。両方のプロパティがnullでない場合にのみ、ヘッダーに追加されます。
アップロードのAPIを作成する方法をよりよく理解したい場合は、Puresourcecodeに特定の投稿を作成しました。
以下は、組み込みのツールバーアイコン（デフォルトで有効になっているものの一部のみ）で、好きなように再編成できます。 「名前」は、JSで参照されているアイコンの名前です。 「アクション」は、開く機能またはURLのいずれかです。 「クラス」はアイコンに与えられたクラスです。 「ツールチップ」はtitle=""属性を介して表示される小さなツールチップです。ショートカットヒントは自動的に追加され、指定されたアクションがそれに割り当てられたキーバインドがある場合に反映されることに注意してください（つまり、 actionの値がboldに設定され、 tooltipがBoldに設定されている場合、ユーザーが表示する最終テキストは「太字（CTRL-B）」になります）。
さらに、 "|"を追加して、任意のアイコン間にセパレーターを追加できます。ツールバーアレイへ。
| 名前 | アクション | ツールチップ クラス |
|---|---|---|
| 大胆な | ToggleBold | 大胆な fa fa-bold |
| イタリック | トグルタイリック | イタリック fa fa-italic |
| strikethrough | Togglestrikethrough | strikethrough fa fa-strikethrough |
| 見出し | ToggleHeadingSmaller | 見出し fa fa-header |
| 見出しsmaller | ToggleHeadingSmaller | より小さな見出し fa fa-header |
| ヘディングビガー | ToggleHeadingBigger | より大きな見出し fa fa-lg fa-header |
| Heading-1 | ToggleHeading1 | 大きな見出し FA FA-Header Header-1 |
| Heading-2 | ToggleHeading2 | 中程度の見出し FA FA-Header Header-2 |
| 見出し-3 | ToggleHeading3 | 小さな見出し FA FA-Header Header-3 |
| コード | glecodeblock | コード fa fa-code |
| 引用 | ToggleBlockQuote | 引用 fa fa-quote-left |
| 秩序化しなかったリスト | ToggleUnorderedList | ジェネリックリスト fa fa-list-ul |
| 注文リスト | ToggleOrderEdList | 番号付きリスト fa fa-list-ol |
| クリーンブロック | CleanBlock | クリーンブロック fa fa-eraser |
| リンク | DrawLink | リンクを作成します fa fa-link |
| 画像 | ドローイメージ | 画像を挿入します fa fa-picture-o |
| テーブル | drawtable | テーブルを挿入します fa fa-table |
| 水平ルール | Drawhorizontalrule | 水平線を挿入します fa fa-minus |
| プレビュー | TogglePreview | トグルプレビュー fa fa-eye disabale |
| 並んで | トグルサイドサイド | 並んで切り替えます fa fa-columnsは邪悪なno-mobileではありません |
| 全画面表示 | トグルフルスクリーン | フルスクリーンを切り替えます fa fa-arrows-alt do-disable no-mobile |
| ガイド | このリンク | マークダウンガイド fa fa-question-circle |
EasyMdeには、事前定義されたキーボードショートカットの配列が付属していますが、構成オプションで変更できます。デフォルトのリストは次のとおりです。
| ショートカット（Windows / Linux） | ショートカット（macos） | アクション |
|---|---|---|
| ctrl- ' | cmd- ' | 「ToggleBlockQuote」 |
| ctrl-b | CMD-B | 「トグルボールド」 |
| ctrl-e | CMD-E | 「クリーンブロック」 |
| ctrl-h | CMD-H | 「ToggleHeadingsmaller」 |
| ctrl-i | CMD-I | 「トグルタイリック」 |
| Ctrl-K | CMD-K | 「ドローリンク」 |
| ctrl-l | CMD-L | 「ToggleUnorderedList」 |
| ctrl-p | CMD-P | 「TogglePreview」 |
| ctrl-alt-c | CMD-ALT-C | 「glecodeblock」 |
| ctrl-alt-i | CMD-ALT-I | 「ドローイメージ」 |
| ctrl-alt-l | CMD-ALT-L | 「ToggleOrderEdlist」 |
| Shift-Ctrl-H | Shift-CMD-H | 「ToggleHeadingbigger」 |
| F9 | F9 | 「トグルサイドサイド」 |
| F11 | F11 | 「トグルフルスクリーン」 |
多くの人が私に同じ質問を送ってくれました。私のコンポーネント（MarkDownEditor、Datatable、SVGアイコンなどのGitHubで見つけたその他）は、フリーウェアです。
次の方法のいずれかでプロジェクトに貢献するようお願いします。
あなたがそれをする方法がわからない場合、またはあなた：
次に、私が作成したサポートライセンスの1つを購入できます。異なる価格があります。金額はあなたの決定です。 Puresourcecodeショップに完全なリストがあります
貢献はあなたに与えます：
| コンポーネント名 | フォーラム | 説明 |
|---|---|---|
| Blazorのデータテーブル | フォーラム | Blazor WebAssemblyおよびBlazor Server用のDatatableコンポーネント |
| BlazorのMarkdownエディター | フォーラム | これは、Blazorで使用するマークダウンエディターです。ライブプレビューと、ユーザー向けの埋め込みヘルプガイドが含まれています。 |
| ブラウザはBlazorを検出します | フォーラム | Blazor WebAssemblyとBlazor Serverのブラウザ検出 |
| BlazorのCodesnipper | フォーラム | 243スタイルの196プログラミング言語のブレザーページにコードスニペットを追加する |
| クリップボードにコピーします | フォーラム | クリップボードにテキストをコピーするボタンを追加します |
| BlazorのSVGアイコンとフラグ | フォーラム | カミソリのページで使用するSVGアイコンとSVGフラグがたくさんあるライブラリ |
| Blazorのモーダルダイアログ | フォーラム | Blazor WebAssembly用の簡単なモーダルダイアログ |
| psc.extensions | フォーラム | Nugetパッケージの.net5の多くの機能を無料でダウンロードできます。このパッケージには、主張、文字列、列挙、日付と時刻、表現を支援するために、日常の仕事のためにこのパッケージ機能を収集しました... |
| ブレザーのためのクイル | フォーラム | Quill Componentは、クイルを簡単に消費し、Blazorアプリケーションの単一ページに複数のインスタンスを配置できるカスタム再利用可能なコントロールです。 |
| ブレザーのセグメント | フォーラム | これは、Blazor WebアセンブリとBlazor Serverのセグメントコンポーネントです |
| Blazorのタブ | フォーラム | これは、Blazor WebアセンブリとBlazorサーバーのタブコンポーネントです |
| BlazorのWorldMap | フォーラム | データでワールドマップを表示します |
