Tethys Platform
Table Of Contents
Table Of Contents

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 %}