Tiles

Tiles allow the user to select one or more options from a visually impactful group. The component can be single or multi select, with each tile appearing as clickable boxes of content.

Usage

Using v-model we can define a group of tiles and keept track of the selected tile. Clicking a title selects it or unselects it if it is already selected.

Use the title prop or slot to give your tile a title.

Use the description prop or slot to give your tile a description.

<template>
  <ci-tiles v-model="selectedTile">
    <ci-tile
      value="tile1"
      title="Tile 1"
      description="This is tile 1"
    />
    <ci-tile value="tile2">
      <template #title>Tile 2</template>
      <template #description>This is tile 2</template>
    </ci-tile>
    <ci-tile value="tile3">
      <div class="ci-text-sm ci-font-semibold">Tile 3</div>
      <div class="ci-text-sm">This is a <strong><i>customized</i></strong> tile 3</div>
    </ci-tile>
  </ci-tiles>
</template>
<script>
export default {
  data() {
    return {
      selectedTile: 'tile1'
    }
  }
}
</script>

Direction

Use the directions prop to set the orientation of tiles. This is vertical by default but can also be horizontal.

<template>
  <ci-tiles v-model="selectedTile" direction="horizontal">
    <ci-tile value="tile1" title="Tile 1" description="This is tile 1"></ci-tile>
    <ci-tile value="tile2" title="Tile 2" description="This is tile 2"></ci-tile>
    <ci-tile value="tile3" title="Tile 3" description="This is tile 3"></ci-tile>
  </ci-tiles>
</template>
<script>
export default {
  data() {
    return {
      selectedTile: ''
    }
  }
}
</script>

Multiple Selections

Define your v-model as an array to alow multiple selections.

<template>
  <ci-tiles v-model="selectedTiles">
    <ci-tile value="tile1" title="Tile 1" description="This is tile 1"></ci-tile>
    <ci-tile value="tile2" title="Tile 2" description="This is tile 2"></ci-tile>
    <ci-tile value="tile3" title="Tile 3" description="This is tile 3"></ci-tile>
  </ci-tiles>
</template>
<script>
export default {
  data() {
    return {
      selectedTiles: []
    }
  }
}
</script>

Mandatory

Use the mandatory prop to require at least one selection at all times. This works with single and multiselect tiles. You will need to supply an initial value to your v-model or you will incur an error.

<template>
  <DemoGrid layout="vertical">
    <ci-tiles v-model="selectedTiles" mandatory>
      <ci-tile value="tile1" title="Tile 1" description="This is tile 1"></ci-tile>
      <ci-tile value="tile2" title="Tile 2" description="This is tile 2"></ci-tile>
      <ci-tile value="tile3" title="Tile 3" description="This is tile 3"></ci-tile>
    </ci-tiles>
    <ci-tiles v-model="selectedTile" mandatory>
      <ci-tile value="tile1" title="Tile 1" description="This is tile 1"></ci-tile>
      <ci-tile value="tile2" title="Tile 2" description="This is tile 2"></ci-tile>
      <ci-tile value="tile3" title="Tile 3" description="This is tile 3"></ci-tile>
    </ci-tiles>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      selectedTiles: ['tile1'],
      selectedTile: 'tile1'
    }
  }
}
</script>

Disabled

Add the disabled attribute to disable a tile or the whole group, giving it a disabled appearance and preventing it from being clicked.

<template>
  <DemoGrid layout="vertical">
    <ci-tiles v-model="selectedTiles" disabled>
      <ci-tile value="tile1" title="Tile 1" description="This is tile 1"></ci-tile>
      <ci-tile value="tile2" title="Tile 2" description="This is tile 2"></ci-tile>
      <ci-tile value="tile3" title="Tile 3" description="This is tile 3"></ci-tile>
    </ci-tiles>
    <ci-tiles v-model="selectedTile">
    <ci-tile value="tile1" title="Tile 1" description="This is tile 1"></ci-tile>
    <ci-tile value="tile2" title="Tile 2" description="This is tile 2" disabled></ci-tile>
    <ci-tile value="tile3" title="Tile 3" description="This is tile 3" disabled></ci-tile>
  </ci-tiles>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      selectedTiles: ['tile1'],
      selectedTile: 'tile2'
    }
  }
}
</script>

Padding

Use the padding prop to adjust the padding on your tiles. The default is sm and the options are 2xs, xs, sm or md.

<template>
  <DemoGrid>
    <ci-tiles
      v-for="(padding, idx) in paddings"
      :key="idx"
      v-model="padding.model"
      :padding="padding.padding"
    >
      <ci-tile :value="padding.padding" :title="padding.title" :description="padding.description" class="padding-demo-tile" />
    </ci-tiles>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      paddings: [
        { padding: 'flush', model: '', title: 'Padding flush', description: 'This is for padding flush'},
        { padding: '2xs', model: '', title: 'Padding 2xs', description: 'This is for padding 2xs'},
        { padding: 'xs', model: '', title: 'Padding xs', description: 'This is for padding xs'},
        { padding: 'sm', model: '', title: 'Padding sm', description: 'This is for padding sm'},
        { padding: 'md', model: '', title: 'Padding md', description: 'This is for padding md'}
      ]
    }
  }
}
</script>

<style>
.padding-demo-tile {
  min-width: 200px;
}
</style>

Hide Controls

Use the hide-controls prop to hide the radio/checkbox controls for a clean or custom layout.

<template>
  <ci-tiles v-model="selectedTile" hide-controls mandatory>
    <ci-tile value="tile1" title="Tile 1" description="This is tile 1"></ci-tile>
    <ci-tile value="tile2" title="Tile 2" description="This is tile 2"></ci-tile>
    <ci-tile value="tile3" title="Tile 3" description="This is tile 3"></ci-tile>
  </ci-tiles>
</template>
<script>
export default {
  data() {
    return {
      selectedTile: 'tile1'
    }
  }
}
</script>

Stacked

Use the stacked prop to set tiles stacked vertically.

<template>
  <ci-tiles v-model="selectedTile" stacked>
    <ci-tile value="tile1" title="Tile 1" description="This is tile 1"></ci-tile>
    <ci-tile value="tile2" title="Tile 2" description="This is tile 2"></ci-tile>
    <ci-tile value="tile3" title="Tile 3" description="This is tile 3"></ci-tile>
  </ci-tiles>
</template>
<script>
export default {
  data() {
    return {
      selectedTile: ''
    }
  }
}
</script>

Slots

Slot	Description
title	Used to pass in a title, instead of the title prop
description	Used to pass in a description, instead of the description prop
default	Used for custom content. Renders after the title & description

Tiles Events

Event	Payload	Description
@update	The new value of the tiles	Fired whenever the value changes

Tile Events

Event	Payload	Description
@click	The value of the tile	Fired whenever the tile is clicked