LoginSignup
3

More than 1 year has passed since last update.

Blazor with LeaderLine

Last updated at Posted at 2021-12-07

LeaderLineは、JavaScriptで様々な要素に矢印をひけるJavaScriptライブラリです。
今回はこのライブラリを使って、Blazorアプリケーションに彩を添えてみたいと思います:thumbsup:

LeaderLine

LeaderLineについては、いくつか記事がありますので、こちらも参照してみてください。

JSで要素同士に線や矢印を引けるライブラリ"LeaderLine" (@RuRey0310 さん)

LeaderLineというHTML要素同士に線を引けるライブラリを使ってみる。React × TypeScript (@sora42533 さん)

Demo

使い方

LeaderLineの使い方は、とっても簡単:clap:
idで指定された要素同士を指定するだけで、簡単に矢印が引けます。

<div id="start">start</div>
<div id="end">end</div>
// Add new leader line from `start` to `end` (HTML/SVG element, basically).
new LeaderLine(
  document.getElementById('start'),
  document.getElementById('end')
);

l2.png

with Blazor

細かい使い方は省略いたしますが、、、
Blazorでは、どうなるかというと、ちょっと面白いことができます:point_up:
Demo を見ていただくと分かりますが、Index.razorNavMenu.razorを横断して矢印をひくことができます:chart_with_upwards_trend:

これはBlazorのページ構造が、SPAだからできることですね。BlazorはRazorコンポーネントで部品化しているので、Index.razorNavMenu.razorは別々のソースファイルでありますが、Razorコンポーネント間をこんな簡単に参照できる仕組みがBlazorにはまだないので、なんだか不思議な感じですね:open_mouth:

おわりに

LeaderLineのリファレンスページにはいろいろな矢印のひき方があり、Blazorアプリケーションに一味いろどりを添える、面白いライブラリではないでしょうか。また、実際サンプルを作ってみて、SPAであることを改めて実感することもできました:raising_hand_tone2:

今回はあまりBlazorには関係ない小ネタ感がありますが、何かのお役にたてれば幸いです:bow:

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3