@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
46 lines (32 loc) • 1.77 kB
Markdown
# MTileSelectable
A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `modelValue*` | The current value of the tile (selected or not). | `boolean` | - |
| `bordered` | Adds a border around the tile. | `boolean` | `true` |
| `inputType` | Type of input used for selection. | `"checkbox"` `"radio"` | `"checkbox"` |
| `inputPosition` | Position of the input relative to the tile content. | `"left"` `"right"` | `"right"` |
| `centered` | Vertical alignment of the input. | `boolean` | - |
| `hideInput` | If `true`, hides the input and makes the whole tile selectable. | `boolean` | - |
| `trigger` | Determines how the tile expansion is triggered. | `"input"` `"container"` | - |
## Slots
| Name | Description |
| --- | --- |
| `default` | Default slot for the main content of the tile. |
| `details` | Named slot for additional content shown below the main content. |
## Events
| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the value changes. | [value: boolean] |
## Dependencies
### Depends on
- [MCheckbox](../checkbox)
- [MRadio](../radio)
### Graph
```mermaid
graph TD;
MTileSelectable --> MCheckbox
MTileSelectable --> MRadio
style MTileSelectable fill:#008240,stroke:#333,stroke-width:4px
```