Skip to content

Latest commit

 

History

History
45 lines (27 loc) · 1.43 KB

size_view.md

File metadata and controls

45 lines (27 loc) · 1.43 KB
Raw

Size View Readme

Alexa Devices Family | Size

Overview

This is a comparison view for planet size. Text callouts feature relevant information, while Frames create graphical representations of size differences.

Updates

Staggered animations were added that use the document's onMount field to trigger when the page loads, and the comparative size graphics were animated to scale in.

Layout Notes

  • The size comparison graphic is created using Frames and programmatically determined zIndex and relative sizes.
  • Within the footer, a textToHint transform is used to create a Hint, which adds the user-defined wake word to a provided string. This is then supplied to the AlexaFooter's footerHint* property.*

Layout

External Packages Used

  • alexa-layouts
  • alexa-styles

Components Used

  • Text
  • Frame
  • Image
  • Container
  • Pager
  • alexa-layouts:AlexaHeader
  • alexa-layouts:AlexaFooter

Variations

Extra Large TV/Medium and Large Hubs

The layout is the same for these devices, with the exception of medium hub dropping some text for size issues.

Small Round Hubs

The layout is converted to a Pager, with callout information on one page and programmatically generated Frames on the other. The onPageChanged event is used to add a transition animation to the page elements.