RepeatableImageFill
The object for adding a background image that Apple News can repeat.
Declaration
object RepeatableImageFillProperties
| Name | Type | Description |
|---|---|---|
type Required | string | Always |
URL Required | uri | The URL of the image file to use for filling the component. Image URLs can begin with Encode image filenames as URLs. |
attachment | string | A string that indicates how the fill behaves when someone scrolls. Valid values:
|
height | (SupportedUnits | number) | The height of the image as it’s repeated. When you omit the height, Apple News uses the width property to determine the size based on the aspect ratio of the provided image. |
horizontalAlignment | string | A string that sets the horizontal alignment of the image fill within its component. Valid values:
|
repeat | string | A string that defines the direction in which Apple News repeats the background image. Valid values:
|
verticalAlignment | string | The vertical alignment of the repeatable image fill within its component. Valid values:
This property has no effect when the |
width | (SupportedUnits | number) | The width of the image as it’s repeated. When you omit |
Mentioned in
Discussion
Use the RepeatableImage fill type object to add a repeatable image on components.
The recommended dimensions for a repeatable image are as follows:
Minimum dimensions: 3 x 6 or 6 x 3 pixels
Maximum dimensions: 3000 x 3000 pixels
Example
{
"components": [
{
"role": "container",
"layout": {
"minimumHeight": 300
},
"style": {
"fill": {
"type": "repeatable_image",
"URL": "bundle://myimage.jpg",
"repeat": "x",
"width": 30,
"height": 30,
"verticalAlignment": "center"
}
}
}
]
}