Guides and Sample Code

Developer

Apple News Format: Design Tutorial

On This Page

Dividers

Dividers appear in articles as horizontal lines. A divider can provide color contrast, separate items in a header, and create visual divisions between sections of content.

image: ../Art/divider_2x.png

You’ll place a divider component in the components array of the article. For any divider component, the value of the role property is "divider".

For information on customizing dividers, see Divider in the Apple News Format Reference.

JSON Example: Divider Component

Create a divider component that uses a component layout object with the user-created name bigDividerLayout. You will define the bigDividerLayout object in the next example. For more information about component layout objects, see Component Layout Objects.

Example Code

Ellipses (...) indicate lines of code that have been omitted from this example.

  1. {
  2. ...
  3. "components": [
  4. ...
  5. {
  6. "role": "divider",
  7. "layout": "bigDividerLayout",
  8. "stroke": {
  9. "width": 3,
  10. "color": "#D5B327"
  11. }
  12. },
  13. ...
  14. ],
  15. ...
  16. }

JSON Example: Component Layout Object

Define the bigDividerLayout component layout object that is referred to in the example above. In bigDividerLayout, specify that the component will begin in column 0, will span all ten columns of the article, and will have a a top and bottom margin of 6 points.

To cause the divider to reach the far right edge of the display, use the ignoreDocumentMargin property. For more information about ignoreDocumentMargin and the capabilities of component layout objects, see Component Layout in the Apple News Format Reference.

Example Code

Ellipses (...) indicate lines of code that have been omitted from this example.

  1. {
  2. ...
  3. "componentLayouts": {
  4. ...
  5. "bigDividerLayout": {
  6. "ignoreDocumentMargin": "right",
  7. "columnStart": 0,
  8. "columnSpan": 10,
  9. "margin": {
  10. "top": 6,
  11. "bottom": 6
  12. }
  13. }
  14. }
  15. ...
  16. }

Further Exploration

At any time, you can try changing property values in your article.json file, and then use News Preview to see how these changes impact the look of your article.

For example, try changing the layout of your article’s divider component:

  1. In your code, find the bigDividerLayout component layout object.

  2. In bigDividerLayout, find the ignoreDocumentMargin property.

  3. Replace the value of the ignoreDocumentMargin property, "right", with "both".

  4. Preview your article.json file in News Preview. See also: Updating Your Article Preview.

    The divider now ignores the margins on both sides of the document.