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={}, 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 Twitter Bootstrap icon class (see the Bootstrap glyphicon reference).
- 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='glyphicon glyphicon-globe', style='info', attributes={ 'data-toggle':'tooltip', 'data-placement':'top', 'title':'Map' } ) save_button = Button( display_text='', name='save-button', icon='glyphicon glyphicon-floppy-disk', style='success', attributes={ 'data-toggle':'tooltip', 'data-placement':'top', 'title':'Save' } ) edit_button = Button( display_text='', name='edit-button', icon='glyphicon glyphicon-edit', style='warning', attributes={ 'data-toggle':'tooltip', 'data-placement':'top', 'title':'Edit' } ) remove_button = Button( display_text='', name='remove-button', icon='glyphicon glyphicon-remove', 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='glyphicon glyphicon-plus', 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 %}