UI Components

States

If we are creating new content component and extends Component from substance we are getting state handling right out of the box. The different states we have more general, selected and focused. With this we can render different content and style based of that. A good example of component are the Image component in the content area.

Default state

Focus and selected state

import {Component} from "substance"

class MyComponent extends Component {

    render($$) {
        // Default things

        const nodeState = this.props.isolatedNodeState

        if (nodeState === 'focused' || nodeState === 'selected') {
            // Present this
        } 
        else {
            // Do something else
        }
    }
}

Components styles

We have introduced a type property so you can send in a space separated string ("primary small disabled") for the latest of our components for give the component different styles. In that way it's easy to add and remove styles without extending the component props list and keep it more slim and readable.

$$(UIButton, {
    'type': 'primary small'
})

See more example for UIButton and UIChip below.

Naviga Content Icon Pack

Icons made and provided through the writer and used by UI components. When we're referring to icons this if the icons you can use.

Available icon for specific Writer version can be seen here: Icons for Writer 7.0.0

UIButton

For technical implementation see UI Components: UIButton

Following properties decide style of the button.

Type (Optional)

To give the UIButton different style you should use the property type. You can provide different style with just applying different style with space (" "). It doesn't matter in which order it's applied. Default: primary

For more real example see example section below with pictures and example code.

Type	Description
{WRITER-COLOR}	Default, primary, alert etc.
outlined	Get outline version
dark	Should be added if button is used on dark background
secondary	Often used together with a primary button
text	Text styled button can be combined with color

Size (Optional)

You also have the property size that can determines different style to the button

Type	Description
large
small

Width (Optional)

You also have the property width that can determines different style to the button

Type	Description
block
full

Icon (Optional)

Icon property is used with Font Awesome 4.0 naming.

Styles and examples

This is standard button available in the Writer

Examples

// Primary button
$$(UIButton, {
    type: 'primary'
})

// Default button
$$(UIButton, {
    type: 'default'
})

// Alert outlined
$$(UIButton, {
    type: 'alert outlined'
})

// Cancel button with 
$$(UIButton, {
    label: 'Cancel',
    type: 'secondary'
})

// Primary button
$$(UIButton, {
    label: 'Apply',
    type: 'primary'
})

Buttons on dark background

Examples

// Dark outline button
$$(UIButton, {
    type: 'dark outlined'
})

// Dark Negative Primary button
$$(UIButton, {
    type: 'dark negative primary'
})

// Dark default
$$(UIButton, {
    type: 'dark default'
})

Examples

// Text Default button
$$(UIButton, {
    type: 'text default'
})

// Text Primary button
$$(UIButton, {
    type: 'text primary'
})

Examples

// Default icon button
$$(UIButton, {
    type: 'primary',
    icon: 'fa-plus'
})

// Text Primary icon button
$$(UIButton, {
    type: 'text primary',
    icon: 'fa-plus'
})

Width

// Block
$$(UIButton, {
    label: 'Block button',
    width: 'block'
})

Sizes

$$(UIButton, {
    label: 'Large',
    size: 'large'
})

// Default
$$(UIButton, {
    label: 'Default',
})

// Small
$$(UIButton, {
    label: 'Small',
    size: 'small'
})

UIButtonGroup

Implementation

For technical implementation see UI Components: UIButtonGroup

UIIconButton

Implementation

For technical implementation see: UI Components: UIIconButton

UIChip

Implementation

For technical implementation see: UI Components: UIChip

Styles and examples

Property	Description
type (optional)	Default default. {Writer Color}
size (optional)	Default: normal. large|normal|small

Examples

$$(UIChip, {
    avatarUrl: 'https://urltoimage.com/nicklas.png',
    value: 'Nicklas Janresjö',
    type: 'alert'
})

UICheckbox

Implementation

For technical implementation see: UI Components: UICheckbox

Styles and examples

UIToggle

Implementation

For technical implementation see: UI Components: UIToggle

Styles and examples

UITextarea

Implementation

For technical implementation see: UI Components: UITextarea

Styles and examples

UIInputText

Implementation

For technical implementation see: UI Components: UIInputText

Styles and examples

UISelect

Implementation

For technical implementation see: UI Components: UISelect

Styles and examples

UIAvatar

Used together with other components as complement. For example when presentation avatar in lists or in UIChip.

Implementation

For technical implementation see: UI Components: UIAvatar

Styles and examples

Could be used inside list

UIDatePicker

Implementation

For technical implementation see: UI Components: UIDatePicker

Styles and examples

UIDatePicker can be used with two styles default or secondary

You can apply prefix to presentation

Available sizes

UITimePicker

Developed together with UIDatePicker. See sizes and prefix on UIDatePicker

Implementation

For technical implementation see: UI Components: UITimePicker

Styles and examples

UIFieldEditor

An editor component that lets the user edit text fields on a node.

Implementation

For technical implementation see: UI Components: UIFieldEditor

Styles and examples

UIInlineImage

Inline image component which rerenders itself when its FileNode is loaded.

Implementation

For technical implementation see: UI Components: UIInlineImage

Styles and examples

UIByline

Byline component that will allow you to add authors to content

Implementation

For technical implementation see: UI Components: UIByline

Styles and examples

UITooltip

Implementation

For technical implementation see: UI Components: UITooltip

Styles and examples

UIPagination

Implementation

For technical implementation see: UI Components: UIPagination

Styles and examples

UIDropdown

Implementation

For technical implementation see: UI Components: UIDropdown

Styles and examples

Property	Description
size (optional)	Default: normal. huge | large | normal | small | tiny

UIPill

Implementation

For technical implementation see: UI Components: UIPill (no documentation generated - yet)

Styles and examples

Rounded (default)

Square

UIIcon

Implementation

For technical implementation see: UI Components: UIIcon (no documentation generated - yet)

Available icons can be seen in http://content-icon-pack.s3-website-eu-west-1.amazonaws.com/writer/7.0.0/

Append weight to name if you take the name from above link

Styles and examples

$$(UIIcon, {
    name: 'space-rocket-flying-regular',
    size: 20,
    color: '#000'
})

UIButtonList

For technical implementation see: UI Components: UIButtonList (no documentation generated - yet)

Available icons can be seen in Naviga Style Guide: Atom - Icon

Append weight to name if you take the name from above link

Styles and examples

// Text button in a list

$$(UIButtonList, {
    listValues: values,
    size: 'tiny',
    type: 'text',
    width: 'full',
    .on('click', () => {
              // Do something (substance event callback style)
    })
})


// Text button in a list with example of listValues

$$(UIButtonList, {
    listValues: [
        {
            label: 'A',
            value: 'a',
            tooltipText: 'Button A'
        },
        {
            label: 'B',
            value: 'b',
            tooltipText: 'Button B'
        },
        {
            label: 'C',
            value: 'c',
            tooltipText: 'Button C'
        }
    ],
    size: 'large',
    type: 'text',
    width: 'block',
    .on('click', () => {
              // Do something (substance event callback style)
    })
})

// Text button in a list with example of icons

$$(UIButtonList, {
    listValues: [
        {
            icon: 'arrow-left-bold',
            value: 'left',
            tooltipText: 'Go back'
        },
        {
            icon: 'arrow-right-bold',
            value: 'right',
            tooltipText: 'Go forward'
        }
    ],
    size: 'small',
    type: 'text',
    width: 'full',
    .on('click', () => {
              // Do something (substance event callback style)
    })