ItemOutline

The Item Outline component displays an ouline around an item that is being hovered or is selected.

name	type	required	comment
ariaLabel	string	no
children	ReactNode | ReactNode[]	no
className	string	no
role	AriaRole	no
selected	boolean	no	Whether or not the item is selected and should therefore be outlined
style	CSSProperties	no

Result

Loading...

Live Editor

function ItemPositionPreviewOutlineDemo() { const [selected, setSelected] = useState(false); const position = { position: { x: 10, y: 10 }, dimensions: { width: 200, height: 200 }, rotation: 0, zIndex: 1, }; return ( <div> <div> <input type="checkbox" id="selected-box" onChange={(ev) => setSelected(ev.target.checked)} /> <label htmlFor="selected-box">Select Item</label> </div> <DesignLayer style={{ position: 'relative', height: 300 }}> {/* Note that in a real design experience, the item preview and item outline should be in a different design layer */} <ItemPosition {...position}> <ItemPreview src="https://placebear.com/360/360" /> </ItemPosition> <ItemPosition {...position}> <ItemOutline selected={selected} /> </ItemPosition> </DesignLayer> </div> ); }

function ItemPositionPreviewOutlineDemo() {
    const [selected, setSelected] = useState(false);
    const position = {
        position: { x: 10, y: 10 },
        dimensions: { width: 200, height: 200 },
        rotation: 0,
        zIndex: 1,
    };
    return (
        <div>
            <div>
                <input type="checkbox" id="selected-box" onChange={(ev) => setSelected(ev.target.checked)} />
                <label htmlFor="selected-box">Select Item</label>
            </div>
            <DesignLayer style={{ position: 'relative', height: 300 }}>
                {/* Note that in a real design experience, the item preview and item outline should be in a different design layer */}
                <ItemPosition {...position}>
                    <ItemPreview src="https://placebear.com/360/360" />
                </ItemPosition>
                <ItemPosition {...position}>
                    <ItemOutline selected={selected} />
                </ItemPosition>
            </DesignLayer>
        </div>
    );
}