Atom Widgets
Atom widgets are used to display data without editing capabilities.
It is possible to extend the list and variety of atom widgets, and Rierino is shipped with the following widgets:
Text Atom
TextAtom displays an image using a text tag such as <p> or <span>. This widget has the following special properties:
props.tag
Tag to use (p, span, h1..h6, blockquote)
h1
p
props.dom
Attributes to apply to text tag
{"className": "Custom-image"}
-
Image Atom
ImageAtom displays an image using <img> tag. This widget has the following special properties:
props.baseUrl
Base url for image to be used as a prefix to its data
http://cdn.example.com
-
props.dom
Attributes to apply to image tag
{"className": "Custom-image"}
-
View Atom
ViewAtom is a wrapper, which acts similar to ContentsEditor, displaying all its content widgets. This widget has the following special properties:
props.tag
Tag to use (div, main, article, section, header, void)
main
div
props.dom
Attributes to apply to view tag
{"className": "Custom-image"}
-
props.contents
Complete contents mapping object data paths to widgets and props
[{"path":"name", "widget": "TextAtom"}]
-
Link Atom
LinkAtom is a wrapper, similar to ViewAtom, but using <a> tag with a url reference and a single content entry. This widget has the following special properties:
props.url
Url link (uses data value if not provided)
http://example.com
-
props.text
Text to display as link (uses data value or props.content if not provided)
Click here
-
props.dom
Attributes to apply to link tag
{"className": "Custom-image"}
-
props.content
Content details mapping object data paths to widgets and props
{"path":"name", "widget": "TextAtom"}
-
Repeat Atom
RepeatAtom is a wrapper, which repeats its content widget for its data array. This widget has the following special properties:
props.tag
Tag to use (div, main, article, section, header, void)
main
div
props.content
Content details mapping array entry data paths to widgets and props
{"path":"name", "widget": "TextAtom"}
-
Last updated