はじめる

インストール

ターミナルに以下を入力してください：

# npm
npm i effsz

# pnpm
pnpm add effsz

# yarn
yarn add effsz

クイックスタート

簡単に言うと、各Webコンポーネントは使用前に定義する必要があります。このライブラリのすべてのモジュールは、そのような機能を提供します。

useLimit (effsz/limit モジュール) は、オーバーフロー時に表示可能な子要素の数を制限するコンテナを定義します。
useScroll (effsz/scroll モジュール) は、ネイティブスクロールをベースにしながらも、異なるブラウザで同じように表示される独自のスクロールバーと影を設定するコンテナを定義します。
useSplit (effsz/split モジュール) は、サイズ変更可能なスロットに領域を分割するコンテナを定義します。
useMasonry (effsz/masonry モジュール) は、一方の軸が一般的な厳密なグリッドレイアウト、もう一方の軸がメイソンリーレイアウトを使用するコンテナを定義します。コンテンツはスロットを通して表示され、各スロット要素には、順序インデックスとアスペクト比の値が指定された slot 属性が必要です。アスペクト比の値は、style 属性内の aspect-ratio プロパティ、または data-effsz-ar 属性で定義できます。このコンポーネントは、アスペクト比の異なる多数の画像を表示する際に役立ちます。
effsz/expand の useExpand は、それぞれ定義済みの最大サイズと最小サイズに拡大または縮小できるコンテナを定義します。
effsz/carousel の useCarousel は、カルーセルコンテナを定義します。
effsz/slide の useSlide は、画面外からスライドアウトするダイアログ形式でコンテンツを表示できるコンテナを定義します。

各関数は、コンポーネントの動作を制御するための observe および unobserve イベントハンドラを含むオブジェクトを返します。

例えば、コンテナを分割したい場合：

jsx

import { useEffect } from 'react';
import { useSplit } from 'effsz/split'

// カスタムWebコンポーネントを使用する前に定義してください
// 注意：SSRの場合、ブラウザがドキュメント本文を解析する前に呼び出す必要があります
// そのため、ドキュメントのヘッダーに別途定義スクリプトを追加する必要がある場合があります
const { observe } = useSplit();

export const App = () => {
    const ref = useRef();
    useEffect(() => {
      // Webコンポーネントのイベントを監視できます
      const unobserve = observe((e) => {
        // イベントハンドラ
      }, ref.current);
      // そして、あなたは観察を中止することができます
      return () => unobserve();
    }, []);
    // JSXでWebコンポーネントを使用するだけです
    // すべての属性はISplitContainerAttrsインターフェースで定義されています
    return <div ref={ref}>
        <effsz-split
            ini='0.25 0.5'
            min='0.25 0.25 0.1'
            lmin='0.1'
            fdir='rr'
        >
            <div class='first'>
                ...
            </div>
            <div class='second'>
                ...
            </div>
            <div class='last'>
                ...
            </div>
        </effsz-split>
    </div>;
}

以上です。シンプルさを楽しんでください。

はじめる ​

インストール ​

クイックスタート ​

はじめる

インストール

クイックスタート