入门

安装

在终端中输入：

# npm
npm i effsz

# pnpm
pnpm add effsz

# yarn
yarn add effsz

快速入门

简而言之，每个 Web 组件都应该在使用前进行定义。此库中的每个模块都提供了这样的功能

effsz/limit 中的 useLimit 定义了一个容器，当容器溢出时，该容器会限制可见子元素的数量；
effsz/scroll 中的 useScroll 定义了一个基于原生滚动条的容器，但设置了自己的滚动条和阴影，这些滚动条和阴影在不同的浏览器中显示相同；
effsz/split 中的 useSplit 定义了一个容器，该容器将其区域分割成可调整大小的槽位；
effsz/masonry 组件中的 useMasonry 定义了一个容器，其中一个轴使用典型的严格网格布局，另一个轴使用 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'

// define custom web component before use
// note, that for SSR you need to call it before browser parse document body
// so you might need to add separate definition script to the document head
const { observe } = useSplit();

export const App = () => {
    const ref = useRef();
    useEffect(() => {
      // you can observe web component events
      const unobserve = observe((e) => {
        // event handler
      }, ref.current);
      // and you can unobserve
      return () => unobserve();
    }, []);
    // just use web component in jsx
    // all attributes are described in ISplitContainerAttrs interface
    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>;
}

就这些。享受简单吧。

入门 ​

安装 ​

快速入门 ​

入门

安装

快速入门