When true, displays a blurred version of the image behind the image. For examples, see Image aspect ratios and scaling examples. The imageScale then determines how to fit that image within the box. For example, you can set imageAspectRatio to square and pass in an imageSource that references a landscape image. The bounding box size and aspect ratio does not need to match the actual aspect ratio of the source image. Note that imageAspectRatio determines the aspect ratio of the bounding box for your image. When you provide both imageWidth and imageHeight, AlexaImage uses your provided dimensions for the image bounding box size, so imageAspectRatio is ignored. For example, if imageWidth is 300dp and imageAspectRatio is standard_landscape, the resulting image bounding box is 300dp wide by 400dp tall and therefore has a 4:3 aspect ratio. When you set just one dimension ( imageHeight or imageWidth), AlexaImage calculates the size of the other dimension so that the resulting bounding box matches the specified aspect ratio. The imageAspectRatio parameter accepts the following options. NameĪlign to the bottom, horizontally centeredĪlign to the left side, vertically centeredĪlign to the right side, vertically centeredĭetermines the aspect ratio and size of the image bounding box when you set only one of imageHeight or imageWidth. The imageAlignment parameter accepts the following options. This is used when the image to display is smaller than the bounding box. When you provide just one, AlexaImage calculates the other dimension based on the specified imageAspectRatio.ĭetermines how to align the image within the bounding box.When you provide both, the image bounding box has the specified dimensions.AlexaImage then scales the image to fit within the box according to imageScale option and positions the image as specified in the imageAlignment option.Īt a minimum, you must provide either imageHeight or imageWidth. These parameters are dimensions that set the height and width of the bounding box for the image. When true, display a drop shadow behind the image. When true, use rounded corners for the image. The image is scaled to fit within this width using the imageScale setting.Īrray of entity data to bind to this component. Options are none, fill, best-fit, best-fill, best-fit-down. The image is scaled to fit within this height using the imageScale setting.ĭetermines how to scale the image to fit within the bounding box. Ignored when imageScale is set to fill or best-fill. When true, display a blurred version of the image behind the image. Options are square, round, standard_landscape, standard_portrait, poster_landscape, poster_portrait, widescreen. This applies when you provide either imageHeight or imageWidth, but not both. Options are bottom, bottom-left, bottom-right, center, left, right, top, top-left, top-right.Īspect ratio to use for the image bounding box. Used when the image is smaller than the bounding box. Nameĭetermines how to position the image within the bounding box. You must also provide either imageHeight or imageWidth, but you do not need to provide both. AlexaImage parametersĪll parameters except type are optional. The table of parameters notes the version of alexa-layouts in which each parameter was added. Use the Other Versions option at the top of this page to see documentation for different versions of AlexaImage. AlexaImage was introduced in version 1.1.0. The latest version of the alexa-layouts package is 1.6.0. To use AlexaImage, import the alexa-layouts package. You can display the image with standard aspect ratios (such as portrait or round) and effects such as rounded corners. The Alexa image responsive component ( AlexaImage) displays an image. Use the Other Versions option to see the documentation for the most recent version of AlexaImage) (This is not the most recent version of AlexaImage. alexa-presentation-language/apl-alexa-image-layout.html Viewport Object in the Data-binding Context.Best Practices for Screen Reader Support.Build APL Visuals that Support Screen Readers.Build Responsiveness into Your Templates.Host Layouts, Graphics, and Other Resources in an APL Package.Synchronize Spoken Text with Text on the Screen.Combine Visual Content with Alexa Speech and Audio.Combine Content with Backgrounds, Borders, and Headers.Support Devices with Character Displays. ![]() Select the Viewport Profiles Your Skill Supports.Support Tablets and Other Devices that Can Change Size.Experiment with APL Examples in the Authoring Tool.Import a Scalable Vector Graphic (SVG) (Beta).Build Documents in the Developer Console.Test APL Skills in the Developer Console Simulator.Configure Your Skill with the APL Interface. ![]()
0 Comments
Leave a Reply. |