Paragraph

Back To Home

Paragraph (p)

Using the component "Paragraph" simply means placing a

on the page.

You can control the p style using a style option.

If you want to use other tags such as

or inside of the paragraph, they can be added to the text in the slot - UNLESS you are using a transform on the value. IF SO, add the tags you want to use as an array to the parameter "additionalTags" inside of slots.

Example:

{
  type: 'division',
  options: {
    class: 'small-5',
    style: 'display: inline-block; text-align: center; vertical-align: middle;',
    components: [
      {
        type: 'paragraph',
        options: {
          style: 'border-style: dashed',
        },
        slots: {
          text:'<h4>Balance Due</h4>'
        }
      },
      {
        type: 'paragraph',
        options: {
          style: 'border-style: dashed',
        },
        slots: {
          text: function(state) {
            if (state.sources.realEstateTaxDelinquencies.data.rows.length) {
              return state.sources.realEstateTaxDelinquencies.data.rows[0].total_due;
            } else {
              return '0';
            }
          },
          additionalTags: ['b', 'h2'],
          transforms: [
            'currency'
          ]
        }
      }
    ]
  },