Button and Button Group

Last Updated: August 10, 2015

class tethys_sdk.gizmos.Button(display_text='', name='', style='', icon='', href='', submit=False, disabled=False, attributes=None, classes='')

display_text

Display text that appears on the button.

Type:

str

name

Name of the input element that will be used for form submission.

Type:

str

style

Name of the input element that will be used for form submission.

Type:

str

icon

Name of a valid Bootstrap Icon (see Bootstrap Icons).

Type:

str

href

Link for anchor type buttons.

Type:

str

submit

Set this to true to make the button a submit type button for forms.

Type:

bool

disabled

Set the disabled state.

Type:

bool

attributes

A dictionary representing additional HTML attributes to add to the primary element (e.g. {"onclick": "run_me();"}).

Type:

dict

classes

Additional classes to add to the primary HTML element (e.g. "example-class another-class").

Type:

str

Controller Example

from tethys_sdk.gizmos import Button

# Single Buttons
map_button = Button(
    display_text='',
    name='map-button',
    icon='globe',
    style='info',
    attributes={
        'data-toggle':'tooltip',
        'data-placement':'top',
        'title':'Map'
    }
)

save_button = Button(
    display_text='',
    name='save-button',
    icon='save',
    style='success',
    attributes={
        'data-toggle':'tooltip',
        'data-placement':'top',
        'title':'Save'
    }
)

edit_button = Button(
    display_text='',
    name='edit-button',
    icon='pen',
    style='warning',
    attributes={
        'data-toggle':'tooltip',
        'data-placement':'top',
        'title':'Edit'
    }
)

remove_button = Button(
    display_text='',
    name='remove-button',
    icon='trash',
    style='danger',
    attributes={
        'data-toggle':'tooltip',
        'data-placement':'top',
        'title':'Remove'
    }
)

previous_button = Button(
    display_text='Previous',
    name='previous-button',
    attributes={
        'data-toggle':'tooltip',
        'data-placement':'top',
        'title':'Previous'
    }
)

next_button = Button(
    display_text='Next',
    name='next-button',
    attributes={
        'data-toggle':'tooltip',
        'data-placement':'top',
        'title':'Next'
    }
)

context = {
    'map_button': map_button,
    'save_button': save_button,
    'edit_button': edit_button,
    'remove_button': remove_button,
    'previous_button': previous_button,
    'next_button': next_button
}

Template Example

{% load tethys_gizmos %}

{% gizmo map_button %}
{% gizmo save_button %}
{% gizmo edit_button %}
{% gizmo remove_button %}
{% gizmo previous_button %}
{% gizmo next_button %}

class tethys_sdk.gizmos.ButtonGroup(buttons, vertical=False, attributes='', classes='')

The button group gizmo can be used to generate a single button or a group of buttons. Groups of buttons can be stacked horizontally or vertically. For a single button, specify a button group with one button. This gizmo is a wrapper for Twitter Bootstrap buttons.

buttons

A list of dictionaries where each dictionary contains the options for a button.

Type:

list, required

vertical

Set to true to have button group stack vertically.

Type:

bool

attributes

A string representing additional HTML attributes to add to the primary element (e.g. "onclick=run_me();").

Type:

str

classes

Additional classes to add to the primary HTML element (e.g. "example-class another-class").

Type:

str

Controller Example

from tethys_sdk.gizmos import Button, ButtonGroup

# Horizontal Button Group
add_button = Button(display_text='Add',
                    icon='plus-square',
                    style='success')
delete_button = Button(display_text='Delete',
                       icon='glyphicon glyphicon-trash',
                       disabled=True,
                       style='danger')
horizontal_buttons = ButtonGroup(buttons=[add_button, delete_button])

# Vertical Button Group
edit_button = Button(display_text='Edit',
                     icon='glyphicon glyphicon-wrench',
                     style='warning',
                     attributes='id=edit_button')
info_button = Button(display_text='Info',
                     icon='glyphicon glyphicon-question-sign',
                     style='info',
                     attributes='name=info')
apps_button = Button(display_text='Apps',
                     icon='glyphicon glyphicon-home',
                     href='/apps',
                     style='primary')
vertical_buttons = ButtonGroup(buttons=[edit_button, info_button, apps_button], vertical=True)

context = {
            'horizontal_buttons': horizontal_buttons,
            'vertical_buttons': vertical_buttons,
          }

Template Example

{% load tethys_gizmos %}

{% gizmo horizontal_buttons %}
{% gizmo vertical_buttons %}