The summary displays specified information from a jig at the bottom of the user's screen that will stay there when the screen is scrolled.
For types of cart and counter, you need to define value.
The core structure includes: layout
There are 3 options for the layout property:
title and subtitle - The title and subtitle of your summary
value - The actual value in your summary. Only available for cart and counter
color - There is a list of colors available
leftIcon - There is a list of icons available, but you can customize the design with your own icon. Only available for the default layout.
Examples and code snippets
The full example of the summary type: default is on GitHub.
summary:
children:
type: component.summary
options:
type: default
title: Your cart is empty
leftIcon:
type: icon
icon: shopping-cart-empty-1
The full example of the summary type: cart using product-item is on GitHub.
The full example of the summary type: cart using expander is on GitHub.
summary-cart-product-item
summary:
children:
type: component.summary
options:
layout: cart
title: "Flights found:"
value: 3
data: =@ctx.datasources.flight-schedule-static
item:
type: component.expander
options:
header:
centerElement:
type: component.stage
options:
right:
title: =@ctx.current.item.toabrv
subtitle: =@ctx.current.item.disembark
left:
title: =@ctx.current.item.fromabrv
subtitle: =@ctx.current.item.board
children:
- type: component.entity
options:
children:
- type: component.field-row
options:
children:
- type: component.entity-field
options:
label: Boarding
value: =@ctx.current.item.from
- type: component.entity-field
options:
label: Destination
value: =@ctx.current.item.to
- type: component.field-row
options:
children:
- type: component.entity-field
options:
label: Board Time
value: =@ctx.current.item.board
- type: component.entity-field
options:
label: Disembark Time
value: =@ctx.current.item.disembark
- type: component.entity-field
options:
label: Passenger
value: =@ctx.current.item.name
- type: component.field-row
options:
children:
- type: component.entity-field
options:
label: Flight
value: =@ctx.current.item.flight
- type: component.entity-field
options:
label: Gate
value: =@ctx.current.item.gate
- type: component.entity-field
options:
label: Seat
value: =@ctx.current.item.seat
- type: component.location
options:
address: =@ctx.current.item.to
The full example of the summary type: counter using product-item is on GitHub.
The full example of the summary type: counter using expander is on GitHub.
summary-counter-product-item
summary:
children:
type: component.summary
options:
layout: counter
title: Flights found
value: 3
data: =@ctx.datasources.flight-schedule-static
item:
type: component.expander
options:
header:
centerElement:
type: component.stage
options:
right:
title: =@ctx.current.item.toabrv
subtitle: =@ctx.current.item.disembark
left:
title: =@ctx.current.item.fromabrv
subtitle: =@ctx.current.item.board
children:
- type: component.entity
options:
children:
- type: component.field-row
options:
children:
- type: component.entity-field
options:
label: Boarding
value: =@ctx.current.item.from
- type: component.entity-field
options:
label: Destination
value: =@ctx.current.item.to
- type: component.field-row
options:
children:
- type: component.entity-field
options:
label: Board Time
value: =@ctx.current.item.board
- type: component.entity-field
options:
label: Disembark Time
value: =@ctx.current.item.disembark
- type: component.entity-field
options:
label: Passenger
value: =@ctx.current.item.name
- type: component.field-row
options:
children:
- type: component.entity-field
options:
label: Flight
value: =@ctx.current.item.flight
- type: component.entity-field
options:
label: Gate
value: =@ctx.current.item.gate
- type: component.entity-field
options:
label: Seat
value: =@ctx.current.item.seat
- type: component.location
options:
address: =@ctx.current.item.to
