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:

Property	Definition	Example	Default
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:

Property	Definition	Example	Default
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:

Property	Definition	Example	Default
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:

Property	Definition	Example	Default
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:

Property	Definition	Example	Default
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"}	-