浮動UIの起動

25893 ワード
webdev テキストリンク
執筆Nefe James ✏️

導入


浮動小数点型の要素は、コンテンツのフローを中断せずにUIの上に“float”要素です.ツールチップは浮動要素の例ですユーザーが特定の領域の上でホバーするとき、彼らはページに現れる短いメッセージです.我々は、ユーザーの流れに沿ってユーザーを作成するためのツールヒントを使用することができます更新プログラムやユーザーにアラームを送信し、機能についての詳細情報を提供します.
Popper 長い間、浮動小数点要素を作成するための最も人気のあるJavaScriptライブラリの一つです.しかし、新しいプレーヤーは町にあります:その後継者.Floating UI .
浮動UIは、いくつかのアップグレードが付属しています.それは互換性があるクロスプラットフォームで、反応で使われることができて、ネイティブのアプリケーションに反応することができます.ポッパーより小さいPopperは3 KBで、浮動UIは600バイトです.Popperがそうでない間、それはデフォルトで揺れることもできる木です.浮動小数点UIだけでなく、いくつかの利点をアップグレードするPopperに代替されていません.
この記事では、浮動UIについて学び、浮動小数点型の要素を作成する方法を学びます.

浮動UIについて


浮動UIは、作成するための拡張可能な、低レベルライブラリですinteractive elements ツールヒント、popovers、ドロップダウン、メニューなど.
浮動小数点型UIはプリミティブを公開します.プリミティブは、与えられた参照要素の横にある浮動小数点数を使用するために使用できます.また、Webをサポートし、反応、ネイティブ、webgl、キャンバス、および詳細に反応する.

始める


以下のコマンドを実行して、浮動UIをインストールします.
npm install @floating-ui/dom
また、以下のようにESDまたはUMD形式を使用してCDNを通して浮動UIを読み込むこともできます.
<script type="module">
  import * as FloatingUIDOM from 'https://cdn.skypack.dev/@floating-ui/[email protected]';
</script>

計算機能


The computePosition 関数は浮動小数点UIの中心です.これは、浮動小数点数を要素として指定するために必要な座標を計算します.
基本的なツールチップを作りましょうcomputePosition 作品
HTMLを設定することから始めます.
<!DOCTYPE html>
<html lang="en">
  <body>
    <button id="button" aria-describedby="tooltip">My button</button>
    <div id="tooltip" role="tooltip">My tooltip oltip with more content</div>
    <script src="/index.js" type="module" />
  </body>
</html>
次に、ツールヒントを設定し、absolute だから、フロートし、他のコンテンツの流れを混乱させません.
#tooltip {
  color: #fff;
  background: #363636;
  font-size: 1.2rem;
  padding: 10px 15px;
  border-radius: 8px;
  position: absolute;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
}

button {
  border-radius: 8px;
  border: none;
  outline: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 10px 15px;
  color: #fff;
  background: rgb(48, 19, 129);
}
ツールヒントの構造とスタイルを設定して、機能について作業しましょう.
import {computePosition} from 'https://cdn.skypack.dev/@floating-ui/[email protected]';

const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');

computePosition(button, tooltip).then(({x, y}) => {
  // Do things with `x` and `y`
  Object.assign(tooltip.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
});
The button が参照要素であり、tooltip が浮動小数点数です.
このように異なる位置にツールヒントの配置を変更できます.
computePosition(button, tooltip, {
  placement: 'top-start',
})then(({ x, y }) => {
  //other code below
};
要素を配置できる12のコア位置があります.
  • left-start , left and left-end
  • top-start , top and top-end
  • right-start , right and right-end
  • bottom-start , bottom and bottom-end
    • 浮動小数点数のデフォルト位置はbottom .

    ミドルウェア


    ミドルウェアは、呼び出しの間に走るコードの一部ですcomputePosition そして、消費者にデータを変更するか、または提供するその最終的なリターン.これは、浮動小数点要素の配置と動作を変更します.
    ミドルウェアは、基本的な配置位置決めを超えたすべての機能が実装されている方法です.
    浮動UIはいくつかのミドルウェアを提供します.
  • offset 参照要素と浮動要素の間隔
  • shift 浮動小数点型の要素をシフトし、その内容全体が常に表示されます.また、要素がビューポートの外側にオーバーフローしないようにします
  • flip の座標を変更します.bottom ビューポートは、ビューポートの上部に近接している場合は、浮動小数点型の要素を自動的に下部に配置します
  • size float要素のサイズ変更を処理する
  • autoPlacement 自動的に利用可能なほとんどのスペースを使用して位置を選択することによって、浮動要素の配置を選択します
  • inline 複数の行(例えばハイパーリンク)の上にわたるインラインリファレンス要素のためにポジショニングを改善します
    • 基本的なツールチップの動作をこれらのミドルウェアの一部として拡張しましょう.
    computePosition(button, tooltip, {
    placement: "top",
    middleware: [offset(4), flip(), shift({padding: 5})],
  }).then(({ x, y }) => {
    //other code below
});
    上記の使用offset ツールヒントとボタンの間に4 px間隔を追加します.
    コンテンツクリッピングの問題を修正するほかにshift ミドルウェアは、ツールヒントとビューポートの端の間隔を定義するオプションオブジェクトを受け取ります.間隔を5 pxに設定します.
    我々がミドルウェアを整える順序は重要です;offset 常に配列の先頭になければなりません.

    ホバーのツールヒントの表示


    現在、ツールチップは常に表示されます.しかし、それは私たちがボタンを押すと表示する必要があります.
    その機能を設定しましょう.
    function setUpTooltip() {
  computePosition(button, tooltip, {
    placement: "top",
    middleware: [offset(4), flip(), shift({ padding: 5 })],
  }).then(({ x, y }) => {
    Object.assign(tooltip.style, {
      left: `${x}px`,
      top: `${y}px`,
    });
  });
}

function showTooltip() {
  tooltip.style.display = "block";
  setUpTooltip();
}

function hideTooltip() {
  tooltip.style.display = "none";
}
    上記のツールヒントロジックを関数に移動します.setUpTooltip , したがって、ツールヒントを表示したい場合は、その関数を呼び出すことができます.
    また、2つの関数を作成します.hideTooltip and showTooltip . hideTooltip ツールヒントの表示をnone . showTooltip ツールヒントの表示をblock とクラスsetUpTooltip .
    電話したいhideTooltip 我々がボタンと呼び出しから遠ざかるときshowTooltip ボタンを押すと
    [
  ["mouseenter", showTooltip],
  ["mouseleave", hideTooltip],
].forEach(([event, listener]) => {
  button.addEventListener(event, listener);
});
    ここでは、イベントリスナーと関数をボタンにアタッチします.これにより、ツールチップはホバーにのみ表示されます.
    以下のツールヒントの最終コードがあります.
    import {
  computePosition,
  flip,
  shift,
  offset,
} from "https://cdn.skypack.dev/@floating-ui/[email protected]";

const button = document.querySelector("#button");
const tooltip = document.querySelector("#tooltip");

function setUpTooltip() {
  computePosition(button, tooltip, {
    placement: "top",
    middleware: [offset(4), flip(), shift({ padding: 5 })],
  }).then(({ x, y }) => {
    Object.assign(tooltip.style, {
      left: `${x}px`,
      top: `${y}px`,
    });
  });
}

function showTooltip() {
  tooltip.style.display = "block";
  setUpTooltip();
}

function hideTooltip() {
  tooltip.style.display = "none";
}

[
  ["mouseenter", showTooltip],
  ["mouseleave", hideTooltip],
  ["focus", showTooltip],
  ["blur", hideTooltip],
].forEach(([event, listener]) => {
  button.addEventListener(event, listener);
});

    フローティングUIを使って


    我々は簡単に反応のアプリケーションに浮動UIを統合することができます.
    まず、反応ライブラリをインストールしなければなりません.
    npm install @floating-ui/react-dom
    UIを浮かべるuseFloating フック我々は反応アプリケーションで使用することができます.このフックを使用して、基本的なツールヒントを反応させましょう.
    import { useFloating, shift, offset, flip } from "@floating-ui/react-dom";

export default function App() {
  const { x, y, reference, floating, strategy } = useFloating({
    placement: "right",
    middleware: [offset(4), flip(), shift({ padding: 5 })],
  });

  return (
    <>
      <button ref={reference}>Button</button>
      <div
        id="tooltip"
        ref={floating}
        style={{ top: y, left: x }}
      >
        Tooltip
      </div>
    </>
  );
}
    The useFloating フックはすべてのcomputePosition 'Sオプションは、ツールヒントの配置を定義し、ミドルウェアを追加できることを意味します.

    結論


    この記事では、私たちは浮いているUIについて学びました、どのようにそれが働くか、その異なった特徴と反応アプリケーションにそれを集積する方法.
    浮動小数点型のUIは、Popper上でいくつかの利点を提供しているが、私は見て愛される1つのことは、条件を表示する方法を示すためにホバーの反応のためのホバーツールを示しています.悲しいことに、ドキュメントはそれをカバーしません.また、新しいライブラリであるので、開発者のコンテンツやサポートはほとんどありません.UIを浮かせながら、偉大な新しいツールですが、これらは私たちがそれを扱うときに考慮する必要がありますものです.

    あなたのウェブアプリにフル可視性



    LogRocket フロントエンドアプリケーションを監視するソリューションを再生する場合は、自分のブラウザで起こった問題を再生することができます.代わりに、エラーが発生したり、スクリーンショットやログのダンプのユーザーを求めるのを推測するのではなく、LogRocketすぐに何が間違って理解するためにセッションをリプレイすることができます.これは、フレームワークに関係なく、任意のアプリケーションを完全に動作し、RedUx、Vuex、および@ NGRX/ストアからの追加のコンテキストを記録するプラグインがあります.
    ログのReduxのアクションと状態に加えて、ログログオンレコードコンソールログ、JavaScriptのエラー、StackTrart、ヘッダー/本文、ブラウザのメタデータ、およびカスタムログを使用してネットワークのリクエスト/応答.また、DOMは、最も複雑な単一のページやモバイルアプリケーションのピクセル完璧なビデオを再現、ページ上のHTMLとCSSを記録するために楽器を計る.
    Try it for free .
    (初心者向け) JavaScript のブロック: let と var
    Programmers宝くじ