Sınırlandırıcı kapsayıcı (Limit container)

Amaç

Bu kapsayıcı, içeriği taştığında görünür alt öğelerin sayısını sınırlandırır. Ayrıca, taşma durumunda özel bir içerik ( slot='limit' özniteliğine sahip bir öğe) görüntüleyebilir. Bu özellik; araç çubuklarında veya kartlarda, öğelerin bir kısmını gösterip geri kalanını ek paneller ya da genişletilebilir alanlar aracılığıyla sunmanız gerektiğinde oldukça kullanışlıdır.

Kullanım

import { useEffect } from 'react';
import { useLimit } from 'effsz/limit';

const { observe } = useLimit();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // sınır olaylarını ele al
        });
        return () => unobserve();
    }, []);
    return <effsz-limit fdir='rr' gap='5'>
        <div className='first'>...</div>
        <div className='second'>...</div>
        <div slot='limit' className='overflow'>...</div>
    </effsz-limit>
};

Türler

/**
 * Limit container attributes
 */
export interface ILimitContainerAttrs {
    /**
     * Flex direction
     */
    fdir: 'r' | 'rr' | 'c' | 'cr';
    /**
     * Gap in px
     */
    gap: string;
};

/**
 * Limit container
 */
export interface ILimitContainerElement extends HTMLElement {
    /**
     * Limit axis
     */
    get axis(): 'x' | 'y';
    /**
     * Visible elements count
     */
    get limitCount(): number;
    /**
     * Is container hiding some children
     */
    get isLimited(): boolean;
}