mirror of
https://origin.cursor.com/mrdevmx/panels.git
synced 2026-10-09 13:23:17 +00:00
1e1c3b21b8
El menú queda en una sola fila con iconos, desplegables por módulo y sin wrap; el ribbon se compacta como tarjeta de acciones. Co-authored-by: alberto.martinez <alberto.martinez@mrdev.mx>
31 lines
945 B
Vue
31 lines
945 B
Vue
<template>
|
|
<Toolbar v-if="ribbon.length" class="ribbon">
|
|
<template #start>
|
|
<div v-for="(group, i) in ribbon" :key="group.key" class="ribbon-cluster">
|
|
<Divider v-if="i > 0" layout="vertical" />
|
|
<div class="ribbon-group">
|
|
<div class="ribbon-group-items">
|
|
<Button
|
|
v-for="item in group.items"
|
|
:key="item.key"
|
|
:icon="item.icon"
|
|
:label="item.label"
|
|
:title="item.title"
|
|
:class="['ribbon-action', `ribbon-action--${item.key}`]"
|
|
icon-pos="top"
|
|
text
|
|
size="small"
|
|
:disabled="item.disabled"
|
|
@click="item.command?.()"
|
|
/>
|
|
</div>
|
|
<div class="ribbon-group-label">{{ group.label }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Toolbar>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { ribbon } = useDesktop();
|
|
</script>
|