Breakdown
| Status | stable |
| Published | 4.0.0 |
Enumerate the properties of an entity in a read-only way. This is not a replacement for forms; breakdowns are to facilitate observing and learning about an entity in a compact interface.
I am item #1.
This is item #2.
With a second paragraph. 👍
I am item #3.
I am item #4.
I am item #5.
I am item #6.
Left warehouse.
Received at depot and awaiting upcoming delivery pickup.
Signed by John.
In transit.
<jds-breakdown>
<jds-breakdown-heading>Order details</jds-breakdown-heading>
<jds-breakdown-item>
<template #label>
<jds-terminology tooltip="Found on the order details page">Order ID</jds-terminology>
</template>
#164
</jds-breakdown-item>
<jds-breakdown-item label="Timeline">
<jds-timeline>
<jds-timeline-item color="blue" big>I am item #1.</jds-timeline-item>
<jds-timeline-item>
This is item #2.
<template #description>With a second paragraph. 👍 </template>
</jds-timeline-item>
<jds-timeline-item>I am item #3.</jds-timeline-item>
<jds-timeline-item color="purple">I am item #4.</jds-timeline-item>
<jds-timeline-item>I am item #5.<jds-button icon="edit">Edit</jds-button></jds-timeline-item>
<jds-timeline-item color="fuchsia" big>I am item #6.</jds-timeline-item>
</jds-timeline>
</jds-breakdown-item>
<jds-breakdown-item label="Product" icon="product" class="jds-whitespace-nowrap">
Giant brownies
<div class="jds-bg-blue-500" style="width: 500px; height:2px;" v-if="clicked"></div>
<template #toolbar><jds-button icon="comment" @click="clicked = !clicked">Add Comment</jds-button></template>
</jds-breakdown-item>
<jds-breakdown-item label="Value"><jds-money currency="EUR" :amount="13580" />
</jds-breakdown-item>
<jds-breakdown-heading>Delivery</jds-breakdown-heading>
<jds-breakdown-item label="Status" :loading="loader2">
<jds-terminology tooltip="On its way to the customer.">In transit</jds-terminology>
<template #toolbar><jds-button type="secondary" @click="load2">Refresh</jds-button></template>
</jds-breakdown-item>
<jds-breakdown-item :loading="loader3">
<template #label><jds-link>Shipping timeline</jds-link></template>
<jds-timeline>
<jds-timeline-item color="blue" big>Left warehouse.</jds-timeline-item>
<jds-timeline-item>
Received at depot and awaiting upcoming delivery pickup.
<template #description>Signed by John.</template>
</jds-timeline-item>
<jds-timeline-item v-for="i in randomEvents" key="i">Random event {{i}}</jds-timeline-item>
<jds-timeline-item color="fuchsia" big>In transit.</jds-timeline-item>
</jds-timeline>
<template #toolbar><jds-button type="secondary" @click="load3">Refresh</jds-button></template>
</jds-breakdown-item>
<jds-breakdown-item label="Estimated delivery">
Tomorrow
</jds-breakdown-item>
</jds-breakdown>Stack mode
When horizontal space is tight, you can use a stack layout mode. In general, wrapper components will try to assign this automatically, so it's unlikely you'll have to manually set a layout mode.
<jds-breakdown stack>
<jds-breakdown-item>
<template #label>
<jds-terminology tooltip="Found on the order details page">Order ID</jds-terminology>
</template>
#164
</jds-breakdown-item>
<jds-breakdown-item label="Product">Brownies</jds-breakdown-item>
<jds-breakdown-item label="Value"><jds-money currency="EUR" :amount="13580" /></jds-breakdown-item>
<jds-breakdown-item label="Status">
Delivered
</jds-breakdown-item>
</jds-breakdown>At other times, we want a breakdown to take up horizontal space, for important information that shouldn't make people have to scroll down too far. For this , you can also set a columns prop to indicate how many columns the data will try to form.
<jds-breakdown columns="4">
<jds-breakdown-item>
<template #label>
<jds-terminology tooltip="Found on the order details page">Order ID</jds-terminology>
</template>
#164
</jds-breakdown-item>
<jds-breakdown-item label="Product">Brownies</jds-breakdown-item>
<jds-breakdown-item label="Value"><jds-money currency="EUR" :amount="13580" /></jds-breakdown-item>
<jds-breakdown-item label="Status">
Delivered
</jds-breakdown-item>
</jds-breakdown>JdsBreakdown
Props
| Prop | Value | Default | |
| stack | boolean | false | Stack this breakdown vertically instead of horizontally. This is generally inferred automatically from where the breakdown is being used, so only set this manually when necessary. Engaged automatically when avoid |
| columns | string | 1 | Numeric string. Sets stack mode, and defines how many columns to show. Try to comfortably fit the information you plan to show, so it fits in one column without wrapping. A maximum of 4 is reasonable. Automatically adjusts to fewer columns if the target number isn't possible. |
Slots
| Slot | |
| default |
Changelog
JdsBreakdownHeading
Slots
| Slot | |
| default |
Changelog
JdsBreakdownItem
Props
| Prop | Value | Default | |
| label | string | (Empty string) | A short, recognizable label for this piece of information. Try to stick to the Jobilla grammar map. Either this or the #label slot is required. The slot takes priority. |
| icon | string | none | If this label has a Jobilla-grammar associated icon, you must use it here. |
| loading | boolean | false |
Slots
| Slot | |
| label | Item label, for when you need to include simple HTML, such as a JDS Terminology component, or link. Either this slot or the prop is required. The slot takes priority. |
| default | |
| toolbar | A home for one or two buttons relevant to this data point, if needed. |