Başlarken

Kurulum

Terminalinize şunu yazın:

# npm
npm i effsz

# pnpm
pnpm add effsz

# yarn
yarn add effsz

Hızlı başlangıç

Özetle, her bir web bileşeni kullanılmadan önce tanımlanmalıdır. Bu kütüphanedeki her modül, bu amaçla bir fonksiyon sunar:

• effsz/limit içindeki useLimit, içeriği taştığında görünür öğe sayısını sınırlayan bir kapsayıcı tanımlar;
• effsz/scroll içindeki useScroll, yerel kaydırma (scroll) mekanizmasını temel alan ancak tüm tarayıcılarda aynı şekilde görünen özel kaydırma çubukları ve gölgeler ekleyen bir kapsayıcı tanımlar;
• effsz/split içindeki useSplit, alanını yeniden boyutlandırılabilir bölmelere (slot) ayıran bir kapsayıcı tanımlar;
• effsz/masonry içindeki useMasonry, bir eksende katı bir ızgara (grid) düzeni, diğer eksende ise "masonry" (tuğla dizilimi benzeri) düzeni kullanan bir kapsayıcı tanımlar. İçeriği bölmeler (slot) aracılığıyla görüntüler; her bir öğenin, sıra numarasını belirten bir slot özniteliğine ve en boy oranını (aspect ratio) tanımlayan bir değere sahip olması gerekir. Bu değer, style özniteliği içindeki aspect-ratio özelliğiyle veya data-effsz-ar özniteliğiyle belirtilebilir. Bu bileşen, farklı en boy oranlarına sahip çok sayıda görseli sergilemek için oldukça kullanışlıdır;
• effsz/expand içindeki useExpand, önceden tanımlanmış maksimum ve minimum boyutlara göre genişletilebilen veya daraltılabilen bir kapsayıcı tanımlar;
• effsz/carousel içindeki useCarousel, bir atlıkarınca (carousel) kapsayıcısı tanımlar;
• effsz/slide içindeki useSlide, içeriğini ekran dışından kayarak gelen (açılan) bir diyalog penceresi şeklinde görüntülemeye olanak tanıyan bir kapsayıcı tanımlar.

Her fonksiyon, bileşenin davranışını kontrol etmenizi sağlayan observe ve unobserve olay işleyicilerini içeren bir nesne döndürür.

Örneğin, bir Split (bölmeli) kapsayıcı kullanmak istediğinizi varsayalım:

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

// Kullanmadan önce özel web bileşenini tanımlayın
// SSR için, tarayıcı belge gövdesini ayrıştırmadan önce çağırmanız gerektiğini unutmayın
// bu nedenle belge başlığına ayrı bir tanımlama betiği eklemeniz gerekebilir
const { observe } = useSplit();

export const App = () => {
    const ref = useRef();
    useEffect(() => {
      // web bileşeni olaylarını gözlemleyebilirsiniz
      const unobserve = observe((e) => {
        // olay işleyicisi
      }, ref.current);
      // ve takibi bırakabilirsiniz
      return () => unobserve();
    }, []);
    // JSX içinde web bileşenini kullanmanız yeterli
    // tüm öznitelikler ISplitContainerAttrs arayüzünde tanımlanmıştır
    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>;
}

İşte bu kadar. Sadeliğin tadını çıkarın.