App Elements

Details on various applications elements

Within some of the layout elements, there are other components that you can embed in those higher level components to extend their functionality.

Header

Below is a sample file for Header.js :

import React from 'react';
import { Component } from 'react';
import { connect } from 'react-redux';
import HeaderToggle from './header/HeaderToggle'
import HeaderLink from './header/HeaderLink'
import Avatar from './Avatar'

class Header extends Component {

  constructor(props) {
    super(props);
      this.state = {
        ...props
      }

  }

  render() {
    return(
      <header className="as-toolbar">
        <HeaderToggle />
      <div className="as-toolbar__group">
        <div className="as-toolbar__item">
          <Avatar
            size='l'
            alt='Isthmus'
            icon="https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/spaces%2F-LNBHPmcyIcNeWf3W50m%2Favatar.png?generation=1537815172519034&alt=media"
          />
        </div>
        <nav className="as-toolbar__actions">
          <ul>
            <HeaderLink name='Home' link='/' />
            <HeaderLink name='Another Map' link='/page' />
            <HeaderLink name='Help' link='/help' />
          </ul>
        </nav>
      </div>

      <div className="as-toolbar__item as-body">
        <i className="as-icon-settings as-subheader as-m--0"></i>
      </div>

    </header>
    );
  }
}


const mapStateToProps = state => ({
  client: state.client,
  map: state.map,
  layers: state.layers,
  viewport: state.viewport,
  boundingbox: state.boundingbox
});

const mapDispatchToProps = dispatch => ({});

export default connect(mapStateToProps, mapDispatchToProps)(Header);

As you can see here there are several Isthmus components as well as Airship wrapper elements. You can use the framework provided here, or create your own by reviewing the Airship Toolbar documentation here.

Header Toggle

import HeaderToggle from './header/HeaderToggle'

<HeaderToggle />

The HeaderToggle component handles the menu toggle when the application is in responsive or left/right navigation mode. It requires no props.

HeaderToggle in responsive mode

Header Link

import HeaderLink from './header/HeaderLink'

<nav className="as-toolbar__actions">
    <ul>
        <HeaderLink name='Home' link='/' />
    </ul>
</nav>

The HeaderLink creates a link within the nav section of the toolbar as shown above. It takes the following props:

Prop	Description
name	The name of the link that will show up in the toolbar
link	The route of the link - see more in the Pages & Routers section

pagePages & Routers

HeaderLink(s)

Avatar

import Avatar from './Avatar'

<div className="as-toolbar__item">
  <Avatar
    size='l'
    alt='Isthmus'
    icon="https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/spaces%2F-LNBHPmcyIcNeWf3W50m%2Favatar.png?generation=1537815172519034&alt=media"
  />
</div>

The Avatar creates an Airship Avatar within the toolbar and must be wrapped in the as-toolbar__item class, or it can be used in any other area of the application. It takes the following props:

Prop	Description
size	Size of the Avatar - options are '', 'l', or 'xl' - see more in the Airship docs
alt	Image alt tag
icon	Link to the icon that will show up in the Avatar

Sample Avatar

Other Elements

Badge

import Badge from '.././widgets/Badge'

<Badge
    color='green'
    name='Badge Component'
    text='as-color--type-02'
/>

The Badge component will add a simple badge to your application and takes the following props:

Prop	Description
color	Color of the badge - see the Airship docs for more info. Options include grey, blue, pink, green, yellow, warning, complementary, success, error, primary, and secondary
name	Text name of the badge
text	Text color of the badge - see the Airship docs for more information

Sample Badge component

IconBadge

import IconBadge from '.././widgets/IconBadge'

<IconBadge
    color='success'
    name='Icon Badge Component'
    text='as-color--type-04'
    icon='as-icon-info'
/>

The Badge component will add a simple badge to your application and takes the following props:

Prop	Description
color	Color of the badge - see the Airship docs for more info. Options include grey, blue, pink, green, yellow, warning, complementary, success, error, primary, and secondary
name	Text name of the badge
text	Text color of the badge - see the Airship docs for more information
icon	Name of the icon you want to add - see the Airship docs for more information

Sample IconBadge component

Button

import Button from '.././widgets/Button'

// ...

constructor(props) {
  super(props);
    this.state = {
      ...props
    }
  this.moveMap = this.moveMap.bind(this);
}

// ...

moveMap() {
    this.props.map.flyTo([39.8283459, -98.5794797], 4);
 }

<Button
    name='Center Map'
    action={this.moveMap}
    type='secondary'
    size=''
/>

The Button component will add a button into your application. You can also define a function that you can pass to the button when it is clicked. It takes the following props:

Prop	Description
name	Name displayed on the button
action	A function, defined in the component where you add the Button component. You must bind the function name using this.functionName = this.functionName.bind(this);
type	Button type - see the Airship docs for more information. Options include '', 'secondary', 'primary'
size	Button size - see the Airship docs for more information. Options include 's', '', 'l'

Sample Button

LinkButton

import LinkButton from '.././widgets/LinkButton'

<LinkButton
  name='CARTO Website'
  link='https://carto.com'
  type='primary'
  size=''
/>

The LinkButton component will add a button into your application. You can add a link that the button will open in the props. It takes the following props:

Prop	Description
name	Name displayed on the button
link	Link that the button will open. Defaults to opening in a new tab.
type	Button type - see the Airship docs for more information. Options include '', 'secondary', 'primary'
size	Button size - see the Airship docs for more information. Options include 's', '', 'l'

Sample LinkButton

InputButton

import InputButton from '.././widgets/InputButton'

<InputButton
  name='Input Button'
  type='primary'
  size='l'
/>

The InputButton component will add a button into your application as an <input ...></input>

Prop	Description
name	Name displayed on the button
type	Button type - see the Airship docs for more information. Options include '', 'secondary', 'primary'
size	Button size - see the Airship docs for more information. Options include 's', '', 'l'

Input

import Input from '.././widgets/Input'

<Input
    id='input'
    placeholder='Text Input'
/>

The Input component will add a simple input into your application as an <input ...></input>. You can repurpose it to use it as you see fit. It takes the following props:

Prop	Description
id	HTML id of the Input
placeholder	Text placeholder of the input

Sample Input