vue-muuri icon indicating copy to clipboard operation
vue-muuri copied to clipboard

Add `ItemFluid` component

Open nikolay-borzov opened this issue 6 years ago • 1 comments

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 avatar Nov 01 '17 07:11 nikolay-borzov

@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.

jocodev1 avatar Nov 01 '17 13:11 jocodev1