graphieros/vue-data-ui v2.6.46

on GitHub

VueUiTreemap

• Improve drilling feature

• Add breadcrumbs

Clicking breadcrumbs will drill back to the selected node. Breadcrumbs are only visible when drilling down.
Breadcrumbs are customizable through scoped slots:

#breadcrumb-label and #breadcrumb-arrow

<VueUiTreemap :dataset="dataset" :config="config">
  <template #breadcrumb-label="{ crumb, isRoot }">
    <span v-if="isRoot">Home</span>
    <span v-else>{{ crumb.label }}</span>
  </template>

  <template #breadcrumb-arrow>
    <!-- Use your own icon here -->
    <VueUiIcon name="arrowRight" />
  </template>
</VueUiTreemap>

You can also target the following css classes to override the basic styling of breadcrumbs:

.vue-ui-treemap-breadcrumbs{} /* nav wrapping element*/

.vue-ui-treemap-crumb{} /* individual wrapper for each breadcrumb */

.vue-ui-treemap-crumb-unit{} /* sub-wrapper for each breadcrumb */

.vue-ui-treemap-crumb-unit-label{} /* wrapper for the label */

.vue-ui-treemap-crumb-unit-arrow{} /* wrapper for the arrow */