No recent searches.
import {Box} from 'controls'
tag App
<self>
<Box @intersect.out.log('outside of viewport')> 'drag'
<Box @intersect(self).out.log('outside of App')> 'drag'
<Box @intersect(self,0.5).out.log('halfway')> 'drag'
<Box @intersect(self,1).out.log('covered')> 'drag'
imba.mount <App.frame>
tag app
show-items = 10
<self>
css w:100% p:5 g:5 d:vbox
for i in [0 .. 1000] when i < show-items
<div>
css min-width:30 p:2 bg:teal3 c:gray7 bxs:sm rd:md ta:center
"#{i}"
<[h:10px]@intersect.in=(show-items += 10)>
imba.mount <app>
import {genres} from 'imdb'
tag Card
shown = 1
css bg:gray3 d:vflex ja:center c:white rd:md pos:relative
<self[o:{shown}] @intersect(20)=(shown = e.ratio)>
<div[fs:xl c:gray8]> data.title
<div[bg:{data.color} p:1 2 rd:lg]> shown.toFixed(2)
tag App
css self
d:hgrid pos:absolute inset:0 gap:4px py:6
ofx:scroll scroll-snap-type:x mandatory
.item scroll-snap-align:start w:200px
@before,@after content:" " d:block w:6
<self> for item in genres
<Card.item data=item>
let app = <App>
imba.mount app