90 lines
13 KiB
HTML
90 lines
13 KiB
HTML
<!DOCTYPE html> <head> <meta charset=utf-8> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content=#333333 name=theme-color> <base href=/svelma-pro/ > <link href=global.css rel=stylesheet> <link href=manifest.json rel=manifest> <link href=favicon.ico rel=icon type=image/png> <link href=./all.css rel=stylesheet> <link href=client/main.1916252291.css rel=stylesheet><link href=client/tiles.32985126.css rel=stylesheet><link href=client/chunk.f5a3f321.css rel=stylesheet><link href=client/chunk.b01e898f.css rel=stylesheet><link href=client/chunk.fb378401.css rel=stylesheet> <noscript id=sapper-head-start></noscript><title>svelma-pro</title><meta content=Svelma property=og:site_name><meta content=https://c0bra.github.io/svelma-pro/svelma-pro-logo.png property=og:image><meta content=200 property=og:image:width><meta content=200 property=og:image:height><meta property=og:url><meta content=article property=og:type><meta content="Tiles | Svelma" property=og:title><meta content="2D grids with flexbox" property=og:description><noscript id=sapper-head-end></noscript> </head> <body> <div id=sapper> <nav class="has-shadow is-spaced navbar" id=navbar><div class=container style=height:50px;min-height:50px><div class=navbar-brand><a href=/ class="brand navbar-item svelte-19nr2rz"> svelma-pro </a></div></div></nav> <main><section class="svelte-1ib6y6h docs"><div class="svelte-h7woek sidebar-bg"></div> <aside class="svelte-h7woek sidebar"><p class="svelte-h7woek sidebar-label">Installation</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=install>Start</a></ul> <p class="svelte-h7woek sidebar-label">Bulma Elements</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=bulma/intro>Intro</a></li> <li class=svelte-h7woek><a href=bulma/hero>Hero</a> <li class=svelte-h7woek><a href=bulma/media>Media</a> <li class=svelte-h7woek><a href=bulma/table>Table</a> <li class=svelte-h7woek><a href=bulma/tiles>Tiles</a> </ul> <p class="svelte-h7woek sidebar-label">Svelma Components</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/button>Button </a> <li class=svelte-h7woek><a href=components/carousel>Carousel </a> <li class=svelte-h7woek><a href=components/collapse>Collapse </a> <li class=svelte-h7woek><a href=components/colorpicker>ColorPicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/datepicker>Datepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/dialog>Dialog </a> <li class=svelte-h7woek><a href=components/district>District <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><p>Form</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/field>Field </a> <li class=svelte-h7woek><a href=components/input>Input </a> <li class=svelte-h7woek><a href=components/switch>Switch </a> </li> </ul> <li class=svelte-h7woek><a href=components/icon>Icon </a> <li class=svelte-h7woek><a href=components/layout>Layout <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/message>Message </a> <li class=svelte-h7woek><a href=components/modal>Modal </a> <li class=svelte-h7woek><a href=components/nav>Nav <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/notification>Notification </a> <li class=svelte-h7woek><a href=components/pagination>Pagination </a> <li class=svelte-h7woek><a href=components/progress>Progress </a> <li class=svelte-h7woek><a href=components/select>Select <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/slider>Slider <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/snackbar>Snackbar </a> <li class=svelte-h7woek><a href=components/stable>Stable <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/table>Table </a> <li class=svelte-h7woek><a href=components/tabs>Tabs </a> <li class=svelte-h7woek><a href=components/timepicker>Timepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/tip>Tip <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/toast>Toast </a> </li> </ul></aside> <div class="svelte-1ib6y6h docs-main"> <header class=header><h1 class=title>Tiles</h1> <h2 class=subtitle>2D grids with flexbox</h2></header> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input name=parameters type=hidden value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcxkACyuC6SskGq1XHMAHJjcWh5bHMjUBBmAAxBUAESCqAoFFQ2GgUFs7pjrYZiWYHRCTpd5gACgOILD3e7EnQoGIZAkYNQYMRmLufEY96dLNalQowQiGEDrmLCzAAJJlkEwFQJ6DKeBAYDmO6S4rmuG5QFuu5er-8TELAqBBFBQFhO6gFXLBcYIfEd64A-MA7vGSyWJINGyOYFIAAxcdRpyxsx5hsQmjidt2LDunitjoMQKGft-uGeP-gbLqu67pKBQYhmGzCEAAjh0Vy2AAyuIb7MAqypYe6Q6EMw0BwlekTKNAmBDnxDIotOSpTjO85BGhamYVuTETp4CJBChyniIOuDIZgqkYekOE0bAqaqaBzquoFGGbtuMVPopLFaNO6A6QGtn2bAhBORgxDwBZQRDjI7F8Z4wmsTGZhclWNZ1g43VvGkMAOHZDmIOguDMO6NVwOEdUNQqKWOOEqLYK4M7hB0sJBOEsKwO-AaTc6glOOEXC4AAXltO17WZh1OmQMCnWdXBzdtVx3QdzBHU9L1LB9u37eZv0ndGE6IBQUC4NgZGzeECXoQoFDLZYq0wOtm3MMu6BwBFXABlqSKsO6dxEmmKP_fE2MYHjCoEwkU0CIxZMU215ghkEdBBAGF1iPGwlmGUABUADEYHdkE9UdtmyMAKoAEoADI-JgAioIg2YuMQAgQGQZS0GQZqw7CABsAAsMgwLYABSdwAFoABo25dqAAOoAJwdBB1BXUrADCLvYKSABqtgAJp3CHl0-zw2BQQAchHtge7Ywch1xTsdiI4foCHcDYG7ACiIiYAA4lAcBZx0xCkvbUDYAAEgrUAQVAXFwBBXBEsohfR7H2CO8ZyIQIXs7IsQFcdPbpIdhAADyEAQQA7AAinLs4LqvAAqc7rwns5K43UD--vs48Kv1DMErZ96avED4Jdq-uLOABCqByyv28b-_rgQVWcsbav1Xm7E-88KQh2AW7Hg_slYV1PhvC-V9gFywTh0S-cA14b1nDvPeqDD5l0wFvDepJL7MBDmfc2998CkJfq_TAXEV4Kw3guGARd_5ux_m7XeKCE5_wgCPe26gq7GQgqbROydU7p0zo7bOud86FxLuXSu1da71ybi3CCAiIDEDuB7CkxAuAJygMQLiCcRDYHQC3Sx9956VwgI7Mu5sOjKKrtvHgHRg6r1wErdQl0lZu1nB0SO0dy6pwANLGVfsvRx5sKAQUbtHJ2EFmC6PzvbN2CcuKL1fp4smUBwH4A6GAEORTYmm3tncfAOcuCzjgOE_2RIeDEFsBSVwhjZzoEqVAaethegwApEUiC_tX5cQ6TXB2IhDFcXEY3G2pcy6zkzsZCgtgE5uxbvbPpMSnHxLLgnAx6BzHEF9hQQuHsHa72IJYgxG4baYDAKvHwjphZlB6u8EaE5KzVlrEqOAUtGjMGaK0doXQeh9CxIjIKeUAACdwyhrDeAixK648qEHBZgGYcxaD-CMD1H5_UvlrBEBzfg0RigOUbHNBabwFS4s5MS0leI4AUtgFS8IYhFQ6JAk5AAHPS04ehGUEWZaymAAqlhCogCSkV5L_iUqcjwIi0p2WcvsjrbYIAGySqIuqtlsqWXyrZU5YgLkoCYEevZSAOt7JkHZTwGsowghRi1TRA46oDUUuYLAXFIcrjqrCIQINXIeDapYnoD1ZLDXCE8fZb14qtXb1wOqKqMAQ1hoOGUXVOjYAZqcHobNBEYBMrlZwBVc1TWuUtUhbltqLBOSnCEZGEqWKWAjSW6NcafVaqDWNdI6a3X5sjaK_wcBY0zm7UYV-U0LKDlTQOvCbas1cqLXmrkxK13CqjWK-1yqWAtp1Su_V26jXFpNWai1k0rW1r1vWuaCgEQHvDcO0tXaE1GDnpgTAbL51lFDYOttL7o1juwG-3FbsZzKFtPW0YfoF2trbZQI8xbPX-DlCuM9c1zbYFsKSJ9ra9BygoGBAFEIgVQnaEMEYqAaq4DKOhv0BI-CoHqsoeiaYuZlAtlxfA5teVcXRegCg_hzAckXfmsoSHEh5qXYW3NNF13SrDYpkQymt0jrLcauaSrEj7tdXhAtR6UMns05h5yVar01ptbe9lashNXHw0OjtXrJ0QbTOYX9_7xPttQzG0DE731WQgBQZ0FqR7MCgxF4tNYKCqA8w5eD4b1Olq0NKRzBwACE4RwjmH9lKFg5hssyasAipTCnl16s-YK0rqnOQ1YbFKmVJnU27t0zkfTBw5PGY0y189FmppWd1napyY7iD1QWB1-IjXnP-FS3p4rPnmsBdxdvLY8XYCJclUB144743gcg-YGAYgLAXUSBzfLzBNtTeS9Gub7XittqyzlvLZYCtFcHSptd9WGRci6w1776BPt5hAEq4grgMM0DoOgUs2gZTIBAKEFYQhRyjHCEoVAvBYAgDkJyuAt6hAUkIAJri2OQBphEKwwoigZIQHgBwboXBwhBC6PNLCQgAB65tKSECJKTrUWEOg8A54T7ilI-f0R6TwcIfAOgUAUJEdEF10ASl0Ozj2ZJCDm3FwLqXMu5foHCJNNMTO0QMQ51zu4ZJteS-lz0_Xe0iyCFVySATpJreC9t7L-XwQdrm6J5r0neOYKRBcBz13YuRRpip2mGndP4ejidyAfgrA3iB6LKMIQyeGqk5hRFJEqI6ArEk4iFEaIVjhE1FkTPzNU9yCoxn3QWfU8il6r8hA8OhiuSEPzyXhXiCk4zBZTv5ru8S8F33wryJSfk-7yz9UbxdWIHJ7aDoQ-Ohd7kAvxUyOIAwXMB47A2tA8-h-jP3QQeSUH-1oVhGR3hTSGkEAA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="is-small fa-external-link-alt fas icon"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><script src=https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js></script> <h5 class=title>Click to drag tiles</h5> <div class="svelte-1q6iq0m tile is-ancestor"><div class="svelte-1q6iq0m tile is-vertical is-8"><div class="svelte-1q6iq0m tile"><div class="svelte-1q6iq0m tile is-parent is-vertical"><article class="svelte-1q6iq0m tile is-child notification is-primary"><p class=title>Vertical...</p> <p class=subtitle>Top tile</article> <article class="svelte-1q6iq0m tile is-child notification is-warning"><p class=title>...tiles</p> <p class=subtitle>Bottom tile</article></div> <div class="svelte-1q6iq0m tile is-parent"><article class="svelte-1q6iq0m tile is-child notification is-info"><p class=title>Middle tile</p> <p class=subtitle>With an image</p> <figure class="image is-4by3"><img alt=profile src=https://bulma.io/images/placeholders/640x480.png></figure></article></div></div> <div class="svelte-1q6iq0m tile is-parent"><article class="svelte-1q6iq0m tile is-child notification is-danger"><p class=title>Wide tile</p> <p class=subtitle>Aligned with the right tile</p> <div class=content></div></article></div></div> <div class="svelte-1q6iq0m tile is-parent"><article class="svelte-1q6iq0m tile is-child notification is-success"><div class=content><p class=title>Tall tile</p> <p class=subtitle>With even more content</p> <div class=content></div></div></article></div></div></div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code><script>
|
|
import { onMount } from 'svelte'
|
|
|
|
waitForDraggabilly() {
|
|
return new Promise((resolve, reject) => {
|
|
const interval = setInterval({
|
|
if (Draggabilly) {
|
|
clearInterval(interval);
|
|
resolve();
|
|
}
|
|
}, 100);
|
|
});
|
|
}
|
|
|
|
onMount(async () => {
|
|
const draggables = document.querySelectorAll('.tile.is-child');
|
|
|
|
await waitForDraggabilly();
|
|
|
|
for (const elm of draggables) {
|
|
let drag = new Draggabilly(elm, {
|
|
containment: '.tile.is-ancestor',
|
|
});
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.tile:not(.is-ancestor) {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
:global(.is-dragging) {
|
|
-webkit-transform: rotate(25deg);
|
|
transform: rotate(25deg);
|
|
cursor: move;
|
|
}
|
|
|
|
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9yb3V0ZXMvYnVsbWEvdGlsZXMuc3ZlbHRlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQTtFQUNFLHlCQUFpQjtLQUFqQixzQkFBaUI7TUFBakIscUJBQWlCO1VBQWpCLGlCQUFpQjtBQUNuQjs7QUFFQTtFQUNFLGdDQUF3QjtVQUF4Qix3QkFBd0I7RUFDeEIsWUFBWTtBQUNkIiwiZmlsZSI6InNyYy9yb3V0ZXMvYnVsbWEvdGlsZXMuc3ZlbHRlIiwic291cmNlc0NvbnRlbnQiOlsiXG4udGlsZTpub3QoLmlzLWFuY2VzdG9yKSB7XG4gIHVzZXItc2VsZWN0OiBub25lO1xufVxuXG46Z2xvYmFsKC5pcy1kcmFnZ2luZykge1xuICB0cmFuc2Zvcm06IHJvdGF0ZSgyNWRlZyk7XG4gIGN1cnNvcjogbW92ZTtcbn1cbiJdfQ== */</style>
|
|
|
|
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
|
|
|
|
<div class="tile is-ancestor">
|
|
<div class="tile is-vertical is-8">
|
|
<div class="tile">
|
|
<div class="tile is-parent is-vertical">
|
|
<article class="tile is-child notification is-primary">
|
|
<p class="title">Vertical...</p>
|
|
<p class="subtitle">Top tile</p>
|
|
</article>
|
|
<article class="tile is-child notification is-warning">
|
|
<p class="title">...tiles</p>
|
|
<p class="subtitle">Bottom tile</p>
|
|
</article>
|
|
</div>
|
|
<div class="tile is-parent">
|
|
<article class="tile is-child notification is-info">
|
|
<p class="title">Middle tile</p>
|
|
<p class="subtitle">With an image</p>
|
|
<figure class="image is-4by3">
|
|
<img src="https://bulma.io/images/placeholders/640x480.png" />
|
|
</figure>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div class="tile is-parent">
|
|
<article class="tile is-child notification is-danger">
|
|
<p class="title">Wide tile</p>
|
|
<p class="subtitle">Aligned with the right tile</p>
|
|
<div class="content">
|
|
<!-- Content -->
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div class="tile is-parent">
|
|
<article class="tile is-child notification is-success">
|
|
<div class="content">
|
|
<p class="title">Tall tile</p>
|
|
<p class="subtitle">With even more content</p>
|
|
<div class="content">
|
|
<!-- Content -->
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div></code></pre></figure></div> </div></div></div></section></main></div> <script>__SAPPER__={baseUrl:"/svelma-pro",preloaded:[void 0,null,{}]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/svelma-pro/service-worker.js');var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="/svelma-pro/client/client.3704696d.js";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/svelma-pro/client/shimport@1.0.1.js";s.setAttribute("data-main","/svelma-pro/client/client.3704696d.js")}document.head.appendChild(s)</script> |