Skip to content

Nitrogen Elements

ngocdaothanh edited this page Sep 12, 2010 · 6 revisions

What is a Nitrogen Element?

Elements are the the building blocks of a Nitrogen page.

Elements are nothing fancy, each element is just an Erlang record with a backing module that tells the rendering engine how to render the record. Learn more about records from the Erlang documentation.

Many Nitrogen elements have a direct HTML counterpart. For example, the #span Nitrogen element translates directly to a <span> in HTML.

The Standard Properties of a Nitrogen Element

Each Nitrogen element has a number of basic properties. All of the properties are optional.

  • id – Sets the name of an element.
  • actions – Add Actions to an element. Actions are described later.
  • show_if – Set to true or false to show or hide the element.
  • class – Set the CSS class of the element.
  • style – Add CSS styling directly to the element.

Most elements extend this list with properties of their own. For example, the #panel element, which creates an HTML div, includes a body property. The #checkbox element, which creates an HTML checkbox, includes a text element to set the text of the checkbox.

A Tree of Elements

Elements can be combined in a list or nested to build complex structures. For example:

Body = #body { body=[
	#panel { body=[
		#label { text="This is a label." },
		#label { id=label1, text="This is another label with a name." },
		#button { id=button1, class=mybutton, text="Push Me" }

Dropping Down to HTML

Nitrogen allows you to drop down directly to HTML for more control over your page. You can use plain HTML anywhere you would otherwise have an element.

For example:

Body = #body { body=[
	#panel { body=[
		#label { text="This is a label." },
		"This is some <b>plain</b> HTML.",
		#label { text="This is another label." },
		This is some more HTML. Erlang allows for multiline strings
		as long as you escape your double-quotes like this (\").

Creating Custom Elements

It is very easy to create your own custom element.

First, define a record as follows:

-record(myelement, {?ELEMENT_BASE(element_myelement), attr1, attr2}).

Second, create a backing module called element_myelement. Your module should expose a render(ControlID, Record) function that returns HTML.

  • ControlID – contains the HTML id of the element.
  • Record – contains a record of type myelement with parameters to customize the control.
Something went wrong with that request. Please try again.