Recipes & Scenarios
🎮 Interactive Layout Lab
Uses real vfit-lt / vfit-rt / vfit-lb / vfit-rb / vfit-center components.
Drag sliders and toggle parameters to observe how all 5 positioning components respond to container size, scale, spacing, and unit changes.
1. Top-Left — vfit-lt
top + left multiplied by scale. Auto transform-origin: 0 0.
<vfit-lt :top="20" :left="20">
<Logo />
</vfit-lt>2. Top-Right — vfit-rt
top + right multiplied by scale. Auto transform-origin: 100% 0.
<vfit-rt :top="20" :right="20">
<Clock />
</vfit-rt>3. Bottom-Left — vfit-lb
bottom + left multiplied by scale. Auto transform-origin: 0 100%.
<vfit-lb :bottom="20" :left="20">
<Chart />
</vfit-lb>4. Bottom-Right — vfit-rb
bottom + right multiplied by scale. Auto transform-origin: 100% 100%.
<vfit-rb :bottom="20" :right="20">
<Panel />
</vfit-rb>5. Center — vfit-center
Auto top:50%; left:50% + translate(-50%,-50%). Content scales with scale.
<vfit-center>
<MainMap />
</vfit-center>6. Percentage Units unit="%"
In percent mode, spacing does not change with scale; only content scales.
<vfit-lt :top="10" :left="10" unit="%">
<Banner />
</vfit-lt>7. Custom Scale :scale
Pass :scale to override global. Pass 0 or omit to use global fitScale.
<vfit-lt :top="30" :left="30" :scale="0.5">
<MiniWidget />
</vfit-lt>8. Z-Index :z
Higher z renders on top. Default 300.
<vfit-lt :top="10" :left="10" :z="999">
<TopLayer />
</vfit-lt>
<vfit-lt :top="30" :left="30" :z="100">
<BottomLayer />
</vfit-lt>9. Universal FitContainer
Use when all four sides are needed or for backward compatibility:
<FitContainer :top="20" :right="20" :bottom="20" :left="20" unit="px">
Fill all sides
</FitContainer><FitContainer :top="50" :left="50" unit="%">
<div style="transform:translate(-50%,-50%)">Percent centered</div>
</FitContainer>