Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Putting CSS Anchor Positioning to the test by throwing dropdown menus around 💪 [popover].dropdown { top: anchor(bottom); right: anchor(right); position-try-options: flip-block, flip-inline; } That's all 👆 Keeps the menu tethered to the button

112,008 görüntüleme • 2 yıl önce •via X (Twitter)

9 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

Here's the @CodePen link! 🚀 Starting to piece together these demos for @figma Config 2024 🫡 This demo should be good everywhere. Where Anchoring isn't supported, it uses floating-ui 🤙

Arunabh Verma profil fotoğrafı
Arunabh Verma2 yıl önce

Cool, I tried something similar with React Native. I had to find the distance between the edge and the menu, then change its position. Curious about the throwing menu—how is it so smooth? Did you nail that with CSS or need some JS?

𝓈𝓃𝑜𝓌𝓎 𝚙𝚑𝚒𝚕 🌌✨❄️🫂 profil fotoğrafı
𝓈𝓃𝑜𝓌𝓎 𝚙𝚑𝚒𝚕 🌌✨❄️🫂2 yıl önce

@chrrynobaka

Daniel Vaughn profil fotoğrafı
Daniel Vaughn2 yıl önce

One gotcha that I’ve noticed is that source order matters. You can’t reference an anchor name before it’s declared. Makes sense, but depending the scenario, it can definitely be a pain.

wsk profil fotoğrafı
wsk2 yıl önce

Can this be animated? Like here:

Agrim Sharma profil fotoğrafı
Agrim Sharma2 yıl önce

So cool

Nine profil fotoğrafı
Nine2 yıl önce

My G haha

Nir Galon profil fotoğrafı
Nir Galon2 yıl önce

Cool 😎

Alex Inkin profil fotoğrafı
Alex Inkin2 yıl önce

Is it possible to shrink height up to some point before flipping vertically?

Benzer Videolar