10行のコードの下でBlazor用のシンプルなツールチップコンポーネントを構築する

久しぶりにブログポストを書きました.私の最後のポスト以来、私は一生懸命に私の本のための最初のいくつかの章を書いてきました.私の妻と私も9月の始めに私たちの最初の子供を持っていた驚くべき興味深い新しい挑戦を取ることだった.私は、これまでに毎分愛しています、しかし、私は私のコーヒーマシンに感謝します!
とにかく、このポストでは、このポストでは、あなたのBlazorアプリケーションのための本当にシンプルで再利用可能な、ツールチップコンポーネントをどのように構築するかを示します.私はこのポストのタイトルで芸術的なライセンスのビットを使用していますが、それはCSSを10行未満ですが、それはCSSを含んでいません.しかし、CSSがいくつかの点でミニ化されるので、私はそれが数えなければならないと思いません...とにかく、動いてください.
あなたが結果に興味があるならば、あなたはそうすることができますcheck out the GitHub repo このポストのコードの最終的な作業版があります.私も、私が使用したと指摘したいです.NET 5プレビュービットを構築するには、サンプルを実行するためにインストールされている必要があります.

ツールチップコンポーネントの作成

まず最初にするのは、tooltipと呼ばれる新しいコンポーネントを作成することです.かみそりを追加し、次のコードを追加します.

<div class="tooltip-wrapper">
    <span>@Text</span>
    @ChildContent
</div>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public string Text { get; set; }
}

コンポーネントには2つのパラメータがあります.ChildContent and Text . コンポーネントを使用する場合は、ツールヒントを表示するマークアップをラップします.ラップされたマークアップはChildContent パラメータとメインの内部に表示されますdiv 私たちのツールチップの.他のパラメータText , ツールヒントが表示されるテキストを設定するのに使用します.
それはすべての剃刀のコードの面でです!悪くない、スペースを含む9行.このすべての作業を行う本当の魔法はCSSにあります.私は新しいを使用しています.NET 5 RC 1ビットと私はBlazorの新しいCSSの分離機能を利用することができます.

CSSの追加

CSSアイソレーションをブレザーで使用するには、スタイルを使用するコンポーネントと同じ名前のCSSファイルを作成する必要があります.この場合、コンポーネントはtooltipと呼ばれます.かみそり.したがって、スタイルシートはtooltipと呼ばれる必要があります.かみそり.CSSこれが完了したら、次のスタイルを追加できます

.tooltip-wrapper {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    cursor: help;
}

span {
    visibility: hidden;
    position: absolute;
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    background-color: #363636;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
}

span::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip-wrapper:hover span {
    visibility: visible;
}

ファーストクラス.tooltip-wrapper はコンポーネントのコンテナdivに適用される.としてdivレンダリングを行いますinline-block それで、ドキュメントフローは混乱しません.また、相対的な位置を設定します.つまり、子のスパン(tooltip text)を絶対的に位置させることができます.
次のスタイルのセットはspan 要素には、表示されるツールチップテキストが含まれます.既定では、スパンは隠されており、上に示したスタイルで親のディレクションに対して絶対的に配置されているので、ToolTipコンポーネントの開始タグと終了タグの間に含まれているコンテンツの上にツールチップが表示されます.
次のスタイルは、擬似要素と呼ばれます.これはDOMに要素を追加する予定です.このスタイルが何をするかは、ツールチップがラップされているコンテンツを指すツールヒントテキストの下部にある小さな矢印を作成します.
最終的なスタイルは、ユーザーがカーソルで親のdivの上で動くたびに、tooltipテキストを含んでいるスパンを示します.
それはすべてそこにある!

ツールチップの使用

ツールヒントを使用するには、ユーザーがツールヒントテキストを表示するには、上にホバーすることができますしたいコンテンツをラップし、表示するメッセージを追加します.すべてがうまくいくならば、それはそれのように見えなければなりません..

概要

ちょうどこのポストでは、あなたのBlazorアプリケーションのためのシンプルな再利用可能なツールチップコンポーネントを作成する方法を示しました.全体のコンポーネントは9行のかみそりのコードで、JavaScriptを必要としません、そして、CSSのおよそ36行はありました.また、配送される新しいCSSの分離機能を使用する機会がありました.角を曲がったところにあるネット5.
これは、私が通常書くよりはるかに短いポストでした、しかし、それはちょうど再びブログポストを書くことにちょうどよいです!私はそれがすぐに利用できるようにすぐに私はそれについてのブログの投稿を持っているし、どのようにそれをあなたの手を得ることができるようにすぐにアクションの火花のためのミーップを発表することを望む.