Create a horizontal, styled divider that extends to the right edge of the display.
- Apple News Format
- Apple News API
In Creating Your First Article, you added some text components to your article. Now, you can add a
divider component to visually separate some text components and create color contrast.
On this page, you’ll learn how to create a horizontal dividing line that extends to the right edge of the display.
Define a ComponentLayout Object that Bleeds to the Right Edge
Before you can make your divider line extend to the right edge of the display, you must define a new
Component object that uses the
Copy the example code bigDividerLayout: Copy This Code.
Paste the code inside your
Articleobject, after the closing brace (
Document .component Layouts
}) of the last
Componentobject and before the closing brace for the whole
Your code should look like the example code bigDividerLayout: Result.
bigDividerLayout: Copy This Code
...) indicate lines of code that have been omitted from this example.
Add a Divider in Your Article
divider component in your JSON file represents a divider line in your article.
Copy the example code Divider: Copy This Code.
Paste the code inside the
componentsarray of your article, after the
Your code should look like the example code Divider: Result.
After you make this change in your code, you can preview your working
article file in News Preview to see a yellow divider.
Divider: Copy This Code
Ellipses (...) indicate lines of code that have been omitted from this example.
At any time, you can try changing property values in your
article file and then use News Preview to see how these changes affect the look of your article.
For example, try changing the layout of your article’s
articlefile, find the
big, find the
ignoreproperty and replace its value (
articlefile in News Preview.
The divider now ignores the margins on both sides of the document.