vue-muuri
vue-muuri copied to clipboard
Add `ItemFluid` component
Usually grid item's width and height depends on content width and height. Therefore it would be great to have a fluid item
<template>
<div :id="id" class="item">
<div class="item-content item-fluid">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'item-fluid',
props: {
id: {
type: [Number, String],
default: 'item-sm'
},
onClick: {
type: Function,
default (id) {
return null
}
}
}
}
</script>
<style scoped></style>
To make it work we should set default .item
to have fluid width and height:
.item {
...
width: auto;
max-width: 100%;
height: auto;
...
}
@nikolay-borzov This idea is good, but these styles are not this simple. If you set max-width
to 100%, the tile is going to run off the screen. Theoretically, we should set the max-width
to the _width property of the grid object. I'll try to come up with a solution for it.