UITile

UITile

A selectable tile component that provides a visually distinct, clickable area for grid-based selection interfaces. Commonly used for dashboard widgets, option selectors, and feature toggles.

<template>
  <UITile
    id="example-tile"
    label="Option Label"
    :icon="IconComponent"
    :selected="isSelected"
    :disabled="false"
    size="small"
    @click="handleTileClick"
  >
    <template #icon>
      <CustomIcon class="w-8 h-8" />
    </template>

    <template #default>
      <div class="p-2">
        Additional content can be placed here
      </div>
    </template>
  </UITile>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CustomIcon } from '@/components/icons'

const isSelected = ref(false)

const handleTileClick = () => {
  isSelected.value = !isSelected.value
}
</script>

Props

• id (string, required): Unique identifier for the tile
• label (string): Label text for the tile
• icon (Component): Icon component to display
• selected (boolean): Whether the tile is selected
• size (‘small’ | ‘medium’ | ‘large’): Size of the tile
• disabled (boolean): Whether the tile is disabled
• variant (‘default’ | ‘outlined’ | ‘filled’): Visual style of the tile

Events

• click: Emitted when the tile is clicked
• select: Emitted when the tile is selected
• deselect: Emitted when the tile is deselected

Slots

• default: Custom content for the tile
• icon: Custom icon content
• label: Custom label content

Usage Examples

1. Basic Tile:

<template>
  <UITile
    id="basic-tile"
    label="Basic Tile"
  />
</template>

2. Selectable Tile:

<template>
  <UITile
    id="select-tile"
    label="Select Me"
    :selected="selected"
    @click="selected = !selected"
  />
</template>

<script setup>
const selected = ref(false)
</script>

3. Icon Tile:

<template>
  <UITile
    id="icon-tile"
    label="Icon Tile"
    size="medium"
  >
    <template #icon>
      <StarIcon class="w-6 h-6 text-primary-500" />
    </template>
  </UITile>
</template>

4. Custom Content Tile:

<template>
  <UITile
    id="content-tile"
    size="large"
  >
    <div class="p-4">
      <h3 class="text-lg font-medium">Custom Title</h3>
      <p class="text-sm text-gray-500">
        This is a custom content tile with more information and details.
      </p>
      <div class="mt-4">
        <UIButton size="small">
          Action
        </UIButton>
      </div>
    </div>
  </UITile>
</template>

Best Practices

1. Selection States:

   • Use clear visual indicators for selection
   • Consider keyboard navigation
   • Maintain consistent selection behavior
   • Provide feedback on selection change

2. Layout:

   • Maintain consistent sizing in grids
   • Ensure adequate spacing between tiles
   • Consider mobile responsiveness
   • Handle overflow content appropriately

3. Accessibility:

   • Include ARIA attributes
   • Support keyboard navigation
   • Provide sufficient color contrast
   • Add descriptive labels

4. Content:

   • Keep labels concise
   • Use appropriate icons
   • Maintain visual hierarchy
   • Limit content to what’s necessary