BlazorでMarkDownEditorを作る(その3)
こちらにソースがあります。
今回は見た目を少しだけ改善する。
下準備としてBootstrapのバージョンを調べる
デフォルトでBootstrapが読み込まれているようなので、それを使う。
でも、どのバージョンなんだろう。
ということで、調べてみた。
Startup.cs，_Imports.razor，MainLayout.razorを見てみるも読み込んでいるようなところはない。
っで、見つからないのでソリューション内で検索かけてみた。
すると、_Host.cshtmlにあった。
ここでBootstrapのバージョンが確認できるかなと思ったけどないね。
仕方ないので、bootstrap.min.cssを開いてみると、Bootstrap v4.3.1と書いてあった。minでもちゃんとわかりやすいところに記述されてるのね。
速攻わかった。
読み込ませたいライブラリがある場合は _Host.cshtmlに書くようだ
Bootstrapのバージョンを調べる過程でわかったけど、他のライブラリを読み込むにはここに記述する。ここの<head>の中に記述して、cssフォルダ配下にライブラリを配置すればいけるはず。
@page "/"
@namespace BlazorMarkDownEditor.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorMarkDownEditor</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
ちなみに、startup.csでこいつを定義していた。
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
エントリーポイント的なところっぽいね。
デザインを調整して、とりあえずの完成
今回の私の中でのゴールは、左側にエディタ 欄 、右側にプレビュ欄にすることでした。さて、完成したStep3のコンポーネントはこんな感じ
Step3.razor
@using System.ComponentModel.Design.Serialization
@using Markdig
<div>
<div class="container">
<div class="row" style="height: 500px">
<div class="col-6">
<textarea class="form-control h-100" type="text" @bind-value="@input" @bind-value:event="oninput" @onkeyup="OnKeyUpEvent" />
</div>
<div class="col-6">
<div>@((MarkupString)outputTxt)</div>
</div>
</div>
</div>
</div>
@code {
public string input { get; set; } = string.Empty;
public string outputTxt { get; set; }
private void OnKeyUpEvent(KeyboardEventArgs e)
{
this.outputTxt = Markdown.ToHtml(this.input);
}
}
使う側もいつも通り。
Index.razor
@page "/"
<Step3></Step3>
スタイルの調整をしながら思ったけど、スコープ付きのCSSが書ければ便利だなーと思った。例えば、こんな感じに
@code {
}
@css {
}
Blazorのissueとしては上がってるみたい。
https://github.com/aspnet/AspNetCore/issues/10170
現状、代替案としては以下があるようです。
Blazor自体で対応するようになったらどうなるんだろう。
さて、本題に戻る。
とりあえず、デザインを調整してできた結果がこれ。
このコンポーネント内だけ、h1,h2のスタイル定義を変えて、カッコイイのを作るのもあり。有OFTheありです。
振り返り
こう見ると、今回Blazorあんまり関係ないな。
イベントの定義は２で書いたものをそのままだし。
次回以降は、ちょっとEFとかつかってデータ保存やろうかな。