shark.base

Text

Just plain text.

Hello world! 
Text('Hello world!')

Hello world!
Name Class Type Default Description
text str <class 'shark.base.StringParam'>

The text

shark.objects.layout

Theme

Select a bootstrap Theme

Name Class Type Default Description
theme str <class 'shark.objects.layout.BootswatchTheme'> cerulean

The theme

Br

Creates the <br/> html tag.

First line
Second line 
['First line', Br(), 'Second line']

First line
<br/>
Second line

Row

A Bootstrap Row.

Name Class Type Default Description
items NoneType <class 'shark.param_converters.ObjectsParam'> None

Items in the row

Paragraph

Add a paragraph.

This is a paragraph of text. 

Paragraph("This is a paragraph of text.")

<p>
    This is a paragraph of text.
</p>
Name Class Type Default Description
items NoneType <class 'shark.param_converters.ObjectsParam'> None

Content of the paragraph

Lead

Create a Bootstrap Lead.

This is a Bootstrap Lead. 

Lead("This is a Bootstrap Lead.")

<p class="lead">
    This is a Bootstrap Lead.
</p>
Name Class Type Default Description
items NoneType <class 'shark.param_converters.ObjectsParam'> None

Content of the paragraph

Footer

A footer.

This is a footer. 
Footer("This is a footer.")

<footer >
    This is a footer.
</footer>
Name Class Type Default Description
items NoneType <class 'shark.param_converters.ObjectsParam'> None

Items in the <footer>

Panel

A Basic Panel.

This is a Panel. 
Panel("This is a Panel.")

<div class="panel panel-default">
    <div class="panel-body">
        This is a Panel.
    </div>
</div>
Name Class Type Default Description
items NoneType <class 'shark.param_converters.ObjectsParam'> None

Items in the panel
header NoneType <class 'shark.param_converters.ObjectsParam'> None

Header of the panel

Div

A flexible <div> element.

Content of the Div 
Div('Content of the Div', quick_float=QuickFloat.right)

<div class="pull-right">
    Content of the Div
</div>
Name Class Type Default Description
items NoneType <class 'shark.param_converters.ObjectsParam'> None

Items in the row
quick_float NoneType <class 'shark.objects.enumerations.QuickFloat'> None

Quick float to pull div left or right
centered bool <class 'shark.param_converters.BooleanParam'> False

Whether the div is center block
clearfix bool <class 'shark.param_converters.BooleanParam'> False

indicates whether to use clearfix

Span

Text in the <span>... 
Span('Text in the <span>...')

<span>Text in the &lt;span&gt;...</span>
Name Class Type Default Description
text str <class 'shark.param_converters.ObjectsParam'>

The text

Spacer

Add some vertical spacing to your layout.

First paragraph...

Second paragraph after extra space. 

Objects(
    Paragraph('First paragraph...'),
    Spacer(40),
    Paragraph('Second paragraph after extra space.')
)

<p>
    First paragraph...
</p>
<div style="height:40px;"></div>
<p>
    Second paragraph after extra space.
</p>
Name Class Type Default Description
pixels int <class 'shark.param_converters.IntegerParam'> 20

Vertical spacing in pixels

Main

Adds a <main> section.

Name Class Type Default Description
items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

Items in the <main>

Jumbotron

Create a Bootstrap Jumbotron.

Check this out! 
Jumbotron("Check this out!")

<div class="jumbotron">
    Check this out!
</div>
Name Class Type Default Description
items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

Items in the container

shark.objects.lists

UnorderedList

Name Class Type Default Description
items NoneType <class 'shark.param_converters.ObjectsParam'> None

List items in

icon_list bool <class 'shark.param_converters.BooleanParam'> False

Use Font Awesome icons as bullets

HorizontalList

Name Class Type Default Description
items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

List items in list

OrderedList

Name Class Type Default Description
items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

List items in

DefinitionTerm

Name Class Type Default Description
items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

Content of <dt>

DescriptionTerm

Name Class Type Default Description
items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

Content of <dd>

DescriptionList

Name Class Type Default Description
items list <class 'shark.param_converters.ListParam'> []

A list of tuples
horizontal bool <class 'shark.param_converters.BooleanParam'> False

Whether to use horizontal

ListItem

Name Class Type Default Description
items NoneType <class 'shark.param_converters.ObjectsParam'> None

Content of

    • icon str <class 'shark.param_converters.ObjectsParam'>

    Font Awesome icon to use as bullet

    shark.objects.tables

    Table

    Creates the table element.

    You can construct tables out of all the elements, but more commonly you would use the create_table shortcut.

    Jedi Action Outcome
    Luke Try Fail
    Yoda Do Success 
    Table(
    TableHead([
        TableHeadColumn('Jedi'),
        TableHeadColumn('Action'),
        TableHeadColumn('Outcome')
    ]), [
        TableRow([
            TableColumn('Luke'),
            TableColumn('Try'),
            TableColumn('Fail')
        ]),
        TableRow([
            TableColumn('Yoda'),
            TableColumn('Do'),
            TableColumn('Success')
        ])
    ]
)

    <table class="table">
    <thead ><tr>
        <th colspan="0" rowspan="0">
            Jedi
        </th>
        <th colspan="0" rowspan="0">
            Action
        </th>
        <th colspan="0" rowspan="0">
            Outcome
        </th>
    </tr></thead>
    <tbody>
    <tr>
        <td>
            Luke
        </td>
        <td>
            Try
        </td>
        <td>
            Fail
        </td>
    </tr>
    <tr>
        <td>
            Yoda
        </td>
        <td>
            Do
        </td>
        <td>
            Success
        </td>
    </tr>
    </tbody>
</table>
    Name Class Type Default Description
    head NoneType <class 'shark.objects.tables.TableHead'> None

    Table Header
    rows Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

    Rows in the table
    table_style NoneType <class 'shark.objects.tables.TableStyle'> None

    Style for the table

    TableHead

    Name Class Type Default Description
    columns Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

    Columns in the table

    TableHeadColumn

    Name Class Type Default Description
    items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

    Content of the column
    colspan int <class 'shark.base.StringParam'> 0

    Columns the cell spans
    rowspan int <class 'shark.base.StringParam'> 0

    Rows the cell spans

    TableRow

    Name Class Type Default Description
    columns Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

    Columns in the table
    action NoneType <class 'shark.param_converters.UrlParam'> None

    Action to do when clicked

    TableColumn

    Name Class Type Default Description
    items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

    Content of the column
    colspan int <class 'shark.param_converters.IntegerParam'> 0

    Span number of columns
    rowspan int <class 'shark.param_converters.IntegerParam'> 0

    Span number of rows
    align str <class 'shark.base.StringParam'>

    Align left, right or center

    shark.objects.navigation

    NavBar

    NavBar(
    NavBarPosition.none,
    NavBrand('Example'),
    [
        NavDropDown(
            'Sites',
            [
                NavLink('Google', 'http://google.com'),
                NavLink('Yahoo', 'http://yahoo.com'),
                NavDivider(),
                NavLink('Bing',  'http://bing.com')
            ]
        ),
        NavLink('Other', '#')
    ],
    NavSearch(),
    NavLink('Blog', '/blog')
)

    <nav class="navbar navbar-default navbar-none">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#NavBar_9_items" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Example</a>
        </div>

        <div class="collapse navbar-collapse" id="NavBar_9_items">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Sites
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="http://google.com">
                            Google
                        </a></li>
                        <li><a href="http://yahoo.com">
                            Yahoo
                        </a></li>
                        <li class="divider"></li>
                        <li><a href="http://bing.com">
                            Bing
                        </a></li>
                    </ul>
                </li>
                <li><a href="%23">
                    Other
                </a></li>
            </ul>
            <form class="navbar-form navbar-left" action="/search" role="search">
                <div class="form-group">
                    <input name="keywords" type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/blog">
                    Blog
                </a></li>
            </ul>
        </div>
    </div>
</nav>
    Name Class Type Default Description
    position int <class 'shark.objects.navigation.NavBarPosition'> 1

    Position of the NavBar
    brand NoneType <class 'shark.objects.navigation.NavBrand'> None

    NavBrand for the NavBar
    items NoneType <class 'shark.param_converters.ObjectsParam'> None

    Items on the left side of the navbar
    search NoneType <class 'shark.objects.navigation.NavSearch'> None

    Search box
    right_items NoneType <class 'shark.param_converters.ObjectsParam'> None

    Items on the right side of the navbar

    SideNav

    Name Class Type Default Description
    items NoneType <class 'shark.param_converters.ObjectsParam'> None

    Items on the left side of the navbar

    NavBrand

    Name Class Type Default Description
    name NoneType <class 'shark.param_converters.ObjectsParam'> None

    Name and or logo of the application
    url str <class 'shark.param_converters.UrlParam'> /

    URL to navigate to when the brand name is clicked

    NavLink

    Name Class Type Default Description
    name NoneType <class 'shark.param_converters.ObjectsParam'> None

    Name of the link
    url NoneType <class 'shark.param_converters.UrlParam'> None

    URL to navigate to when the item is clicked
    active bool <class 'shark.param_converters.BooleanParam'> False

    Display as activated

    NavDivider

    NavDropDown

    Name Class Type Default Description
    name NoneType <class 'shark.param_converters.ObjectsParam'> None

    Heading of the dropdown
    items NoneType <class 'shark.param_converters.ObjectsParam'> None

    Items in the dropdown menu

    NavSearch

    Name Class Type Default Description
    name str <class 'shark.base.StringParam'> Search

    Placeholder text
    button_name Raw <class 'shark.param_converters.ObjectsParam'> <span class="glyphicon glyphicon-search"></span>

    Text on the search button
    url str <class 'shark.base.StringParam'> /search

    Search URL

    Pill

    Name Class Type Default Description
    items NoneType <class 'shark.param_converters.ObjectsParam'> None

    Text/content on the pill
    action str <class 'shark.param_converters.UrlParam'>

    Action when clicked
    active bool <class 'shark.param_converters.BooleanParam'> False

    Is the pill active?
    id_name str <class 'shark.base.StringParam'>

    Internal name to activate the right pill

    Pills

    shark.objects.modals

    Modal

    Name Class Type Default Description
    title str <class 'shark.base.StringParam'>

    Title of the modal dialog
    items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

    Items that make up the modal dialog main area
    buttons Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

    Dialog’s buttons

    shark.objects.font_awesome

    Icon

    Icon from Font Awesome See the Font Awesome documentation on ideas of how and where to use the various options.

    Just an icon, there are 605 available.
    Icon spinning
    Icon with pulse
    Using the Icon.* enumeration to select the icon. Useful with code completion
    Rotated 270 degrees
    Flipped
    Simple stacked icons
    Stacked icon can be just the name or an actual Icon
    Another example

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

    multiple_div_row([
    Icon('comments', 1, fixed_width=True), 'Just an icon, there are 605 available.', Br(),
    Icon('rocket', 1, spin=True, fixed_width=True), 'Icon spinning', Br(),
    Icon('spinner', 1, pulse=True, fixed_width=True), 'Icon with pulse', Br(),
    Icon(Icon.cc_amex, 1, fixed_width=True), 'Using the Icon.* enumeration to select the icon. Useful with code completion', Br(),
    Icon('hand_paper_o', 1, rotate=270, fixed_width=True), 'Rotated 270 degrees', Br(),
    Icon('line_chart', 1, flip_horizontal=True, fixed_width=True), 'Flipped', Br(),
    # Some examples of stacked icons
    Icon('flag', inverse=True, stacked_on='circle'), 'Simple stacked icons', Br(),
    Icon(Icon.terminal, inverse=True, stacked_on=Icon('square')), 'Stacked icon can be just the name or an actual Icon', Br(),
    Icon('camera', stacked_on=Icon('ban', classes='text-danger'), stacked_on_top=True), 'Another example', Br()
], [
    Paragraph([
        Icon('quote_left', 2, border=True, pull_left=True),
        LOREM_IPSUM
    ])
])

    <div class="row">
    <div class="col-md-6 col-sm-12">
        <span class="fa fa-comments fa-lg fa-fw"></span>
        Just an icon, there are 605 available.
        <br/>
        <span class="fa fa-rocket fa-lg fa-fw fa-spin"></span>
        Icon spinning
        <br/>
        <span class="fa fa-spinner fa-lg fa-fw fa-pulse"></span>
        Icon with pulse
        <br/>
        <span class="fa fa-cc-amex fa-lg fa-fw"></span>
        Using the Icon.* enumeration to select the icon. Useful with code completion
        <br/>
        <span class="fa fa-hand-paper-o fa-lg fa-fw"></span>
        Rotated 270 degrees
        <br/>
        <span class="fa fa-line-chart fa-lg fa-fw fa-flip-horizontal"></span>
        Flipped
        <br/>
        <span class="fa-stack">
            <span class="fa fa-stack-2x fa-circle"></span>
            <span class="fa fa-stack-1x fa-flag fa-inverse"></span>
        </span>
        Simple stacked icons
        <br/>
        <span class="fa-stack">
            <span class="fa fa-stack-2x fa-square"></span>
            <span class="fa fa-stack-1x fa-terminal fa-inverse"></span>
        </span>
        Stacked icon can be just the name or an actual Icon
        <br/>
        <span class="fa-stack">
            <span class="fa fa-stack-1x fa-camera"></span>
            <span class="fa fa-stack-2x fa-ban" classes="text-danger"></span>
        </span>
        Another example
        <br/>
    </div>
    <div class="col-md-6 col-sm-12">
        <p>
            <span class="fa fa-quote-left fa-2x fa-border fa-pull-left"></span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
</div>
    Name Class Type Default Description
    name int <class 'shark.base.StringParam'> 348

    Name of the Font Awesome icon or you can use it like this: Icon.camera_retro
    size int <class 'shark.param_converters.IntegerParam'> 0

    Size of the icon. 1=33% larger, 2=2x the size, 3=3x the size, until 5x
    fixed_width bool <class 'shark.param_converters.BooleanParam'> False

    Fixed width icons for use in places like menus
    border bool <class 'shark.param_converters.BooleanParam'> False

    Add a rounded border around the icon
    pull_left bool <class 'shark.param_converters.BooleanParam'> False

    Pull left. Useful for paragraph icons
    pull_right bool <class 'shark.param_converters.BooleanParam'> False

    Pull left. Useful for paragraph icons
    spin bool <class 'shark.param_converters.BooleanParam'> False

    Spin the icon. Great for use with spinner, circle-o-notch, refresh and cog
    pulse bool <class 'shark.param_converters.BooleanParam'> False

    Spin the icon in 8 steps
    rotate int <class 'shark.param_converters.BooleanParam'> 0

    Rotate the icon 90, 180 or 270 degrees. Other values are ignored.
    flip_horizontal bool <class 'shark.param_converters.BooleanParam'> False

    Flip the icon horizontally
    flip_vertical bool <class 'shark.param_converters.BooleanParam'> False

    Flip the icon vertically
    inverse bool <class 'shark.param_converters.BooleanParam'> False

    Use an alternate icon color. Useful when stacking icons.
    stacked_on NoneType <class 'shark.objects.font_awesome.IconParam'> None

    Stack the icon on top of this icon. See example.
    stacked_on_top bool <class 'shark.param_converters.BooleanParam'> False

    Stack the larger icon on top of the smaller. Useful for icons like ban

    shark.objects.glyph

    shark.objects.ui_elements

    BreadCrumbs

    Displays Breadcrumbs navigation. The non-keyword arguments are the crumbs. Add Anchors or simple text strings.

    1. Home
    2. Docs
    3. BreadCrumbs 
    BreadCrumbs(Anchor('Home', '/'), Anchor('Docs', '/docs'), 'BreadCrumbs')

    <ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
        <meta itemprop="position" content="0" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/docs"><span itemprop="name">Docs</span></a>
        <meta itemprop="position" content="1" />
    </li>
    <li class="active">
        BreadCrumbs
    </li>
</ol>
    Name Class Type Default Description
    args bool <class 'shark.param_converters.BooleanParam'> True

    Include microdata properties in the renderer. This might render the breadcrumbs in Google search results.

    Image

    Displays an image.

    Niagara Falls 
    Image(staticfiles_storage.url('web/img/bart_bg.jpg'), 'Niagara Falls', shape=ImageShape.rounded)

    <img src="/static/web/img/bart_bg.jpg" alt="Niagara Falls" class="img-rounded img-responsive"/>
    Name Class Type Default Description
    src str <class 'shark.param_converters.UrlParam'>

    Src (Url) of the image
    alt str <class 'shark.base.StringParam'>

    Alt for image
    responsive bool <class 'shark.param_converters.BooleanParam'> True

    Responsive image
    shape int <class 'shark.objects.ui_elements.ImageShape'> 0

    indicates the shape of the image
    data_src str <class 'shark.param_converters.UrlParam'>

    data-src of the image

    Thumbnail

    Displays an image in a frame with a caption. Useful for lists of thumbnails.

    Bart
    Dylan
    Mark 
    multiple_div_row(
    Thumbnail(staticfiles_storage.url('web/img/bart.jpg'), width='100%', items='Bart'),
    Thumbnail(staticfiles_storage.url('web/img/dylan.jpg'), width='100%', items='Dylan'),
    Thumbnail(staticfiles_storage.url('web/img/mark.jpg'), width='100%', items='Mark')
)

    <div class="row">
    <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="/static/web/img/bart.jpg" alt="" style="width:100%;">
            <div class="caption">
                Bart
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="/static/web/img/dylan.jpg" alt="" style="width:100%;">
            <div class="caption">
                Dylan
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="/static/web/img/mark.jpg" alt="" style="width:100%;">
            <div class="caption">
                Mark
            </div>
        </div>
    </div>
</div>
    Name Class Type Default Description
    img_url str <class 'shark.param_converters.UrlParam'>

    Link to the image
    width NoneType <class 'shark.param_converters.CssAttributeParam'> None

    Image width
    height NoneType <class 'shark.param_converters.CssAttributeParam'> None

    Image height
    alt str <class 'shark.base.StringParam'>

    Alt text
    items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

    Items under the image

    Progress

    85% 
    Progress(85)

    <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
        85%
    </div>
</div>
    Name Class Type Default Description
    percentage int <class 'shark.param_converters.IntegerParam'> 0

    Percentage value

    Address

    Name Class Type Default Description
    items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

    Items in Address

    Carousel

    Creates a Bootstrap carousel.

    Carousel([
    Image(staticfiles_storage.url('web/img/bart_bg.jpg')),
    Image(staticfiles_storage.url('web/img/dylan_bg.jpg')),
    Image(staticfiles_storage.url('web/img/mark_bg.jpg'))
])

    <div id="Carousel_4" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="/static/web/img/bart_bg.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="item">
            <img src="/static/web/img/dylan_bg.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="item">
            <img src="/static/web/img/mark_bg.jpg" alt="" class="img-responsive"/>
        </div>
    </div>
    <a class="left carousel-control" href="#Carousel_4" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#Carousel_4" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

    $("#Carousel_4").carousel();
    Name Class Type Default Description
    slides list <class 'shark.param_converters.ListParam'> []

    List of slides.

    Tab

    Name Class Type Default Description
    name NoneType <class 'shark.param_converters.ObjectsParam'> None

    Name of the tab
    items NoneType <class 'shark.param_converters.ObjectsParam'> None

    Content of the tab
    active bool <class 'shark.param_converters.BooleanParam'> False

    Make this the active tab. Defaults to the first tab

    Tabs

    Home sweet home

    Away from home 

    Tabs([
    Tab('Home', Paragraph('Home sweet home')),
    Tab('Away', Paragraph('Away from home'))
])

    <ul id="Tabs_102" class="nav nav-tabs style_0" role="tablist">
    <li role="presentation" class="active"><a href="#Tab_192" aria-controls="Tab_192" role="tab" data-toggle="tab">
    Home
</a></li>
    <li role="presentation"><a href="#Tab_193" aria-controls="Tab_193" role="tab" data-toggle="tab">
    Away
</a></li>
</ul>
<div class="tab-content">
    <div id="Tab_192" role="tabpanel" class="tab-pane active">
        <p>
            Home sweet home
        </p>
    </div>
    <div id="Tab_193" role="tabpanel" class="tab-pane">
        <p>
            Away from home
        </p>
    </div>
</div>

    .style_0{margin-bottom: 15px;}

    $("#Tabs_102 a").click(function (e) {e.preventDefault(); $(this).tab("show")});
    Name Class Type Default Description
    tabs NoneType <class 'shark.param_converters.ObjectsParam'> None

    The list of Tab objects

    CloseIcon

    Hello world 
    panel = Panel('Hello world')
panel += CloseIcon(panel.jq.fadeOut().fadeIn())
return panel

    <div id="Panel_2" class="panel panel-default">
    <div class="panel-body">
        Hello world
        <button type="button" onclick="$('#Panel_2').fadeOut(400, function(){$('#Panel_2').fadeIn(400, function(){});});" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </div>
</div>
    Name Class Type Default Description
    js NoneType <class 'shark.param_converters.JavascriptParam'> None

    Action when the the close icon is clicked

    Caret

    Adds a caret. See the example.

    Video

    Embed a video with the HTML video tag Urls should point to the mp4 streams. You can also use Vimeo and YouTube links, but only if you only use a single url.

    Video(urls='https://www.youtube.com/watch?v=cK3NMZAUKGw')

    <div id="Video_2"><iframe src="https://www.youtube.com/embed/cK3NMZAUKGw" frameborder="0" allowfullscreen></iframe></div>

    $(window).resize(function(){$('#Video_2 iframe').width($('#Video_2').width());$('#Video_2 iframe').height($('#Video_2 iframe').width()*0.5625);}).resize();
    Name Class Type Default Description
    urls list <class 'shark.param_converters.ListParam'> []

    List of urls of different versions of the video
    auto_play bool <class 'shark.param_converters.BooleanParam'> False

    Start the video automatically on load?
    aspect_ratio float <class 'shark.param_converters.FloatParam'> 0.5625

    Aspect of video, used for iframed videos in fluid layouts

    IFrame

    Render an IFrame.

    IFrame('http://example.com/')

    <iframe width="100%" height="250px" frameborder="0" style="border:0" src="http://example.com/"></iframe>
    Name Class Type Default Description
    url str <class 'shark.param_converters.UrlParam'>

    Iframe source URL
    width str <class 'shark.param_converters.CssAttributeParam'> 100%

    Width of the frame in px or %
    height str <class 'shark.param_converters.CssAttributeParam'> 250px

    Height of the frame in px or %

    GoogleMaps

    Render a Google Maps map.

    Be sure to set the SHARK_GOOGLE_BROWSER_API_KEY setting in your settings.py. You can get this key in the Google Developers API Console

    GoogleMaps('Fukuoka, Japan')

    <iframe width="100%" height="250px" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAyArPNV4cy1GmYc6m4Fd3Om27g1_CMrZo&q=Fukuoka, Japan" allowfullscreen></iframe>
    Name Class Type Default Description
    location str <class 'shark.base.StringParam'>

    Location name or “long, lat”
    width str <class 'shark.param_converters.CssAttributeParam'> 100%

    Width of the map in px or %
    height str <class 'shark.param_converters.CssAttributeParam'> 250px

    Height of the map in px or %

    SearchBox

    Name Class Type Default Description
    name str <class 'shark.base.StringParam'> Search

    Placeholder text
    button_name Raw <class 'shark.param_converters.ObjectsParam'> <span class="glyphicon glyphicon-search"></span>

    Text on the search button
    url str <class 'shark.param_converters.UrlParam'> /search

    Search URL

    Parallax

    Name Class Type Default Description
    background_url str <class 'shark.param_converters.UrlParam'>

    URL to the background image
    items Objects <class 'shark.param_converters.ObjectsParam'> Objects([])

    The items in the section
    speed int <class 'shark.param_converters.FloatParam'> 3

    The speed of the parallax, higher numbers is slower. 1 is normal page speed, 2 is half speed, etc.

    Feature

    Name Class Type Default Description
    heading NoneType <class 'shark.param_converters.ObjectsParam'> None

    Heading for the feature
    explanation NoneType <class 'shark.param_converters.ObjectsParam'> None

    Explanation of the feature
    demonstration NoneType <class 'shark.param_converters.ObjectsParam'> None

    Something to demonstrate the feature, such as an image
    flipped bool <class 'shark.param_converters.BooleanParam'> False

    Flip the explanation and demonstation. It looks good to alternate between features.

    shark.objects.dashboard

    StatBox

    26
    New Comments
    View Comments
    12
    New Tasks
    View Tasks 
    multiple_div_row(
    StatBox('26', 'New Comments', Icon('comments', 5), 'View Comments', '#'),
    StatBox('12', 'New Tasks', Icon('tasks', 5), 'View Tasks', 'http://google.com')
)

    <div class="row">
    <div class="col-md-6 col-sm-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <span class="fa fa-comments fa-5x"></span>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div class="style_0">
                            26
                        </div>
                        <div>
                            New Comments
                        </div>
                    </div>
                </div>
            </div>
            <a href="%23">
                <div class="panel-footer">
                    <span class="pull-left">
                        View Comments
                    </span>
                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div>
                </div>
            </a>
        </div>
    </div>
    <div class="col-md-6 col-sm-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <span class="fa fa-tasks fa-5x"></span>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div class="style_0">
                            12
                        </div>
                        <div>
                            New Tasks
                        </div>
                    </div>
                </div>
            </div>
            <a href="http://google.com">
                <div class="panel-footer">
                    <span class="pull-left">
                        View Tasks
                    </span>
                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div>
                </div>
            </a>
        </div>
    </div>
</div>

    .style_0{font-size: 40px;}
    Name Class Type Default Description
    stat NoneType <class 'shark.param_converters.ObjectsParam'> None

    The number or fact you want to show large
    name NoneType <class 'shark.param_converters.ObjectsParam'> None

    Name of the number or fact, such as “Users” or “Pageviews”
    icon NoneType <class 'shark.param_converters.ObjectsParam'> None

    Large icon. Use any icon from Font Awesome at size 5
    view_more_name NoneType <class 'shark.param_converters.ObjectsParam'> None

    The text of the link under the stat to get more info. If you don’t enter this it will not show.
    view_more_action NoneType <class 'shark.param_converters.UrlParam'> None

    Action to perform when the view more area is clicked

    shark.objects.morris

    Graph

    Easy rendering of graphs using the Morris library. Currently only supports line graphs, more to be added.

    data = [
    {'year': 2011, 'wheat': 10.4, 'corn': 14.2},
    {'year': 2012, 'wheat': 8.2, 'corn': 12.4},
    {'year': 2013, 'wheat': 9.8, 'corn': 7.2},
    {'year': 2014, 'wheat': 14.2, 'corn': 8.4},
    {'year': 2015, 'wheat': 14.0, 'corn': 12.3}
]
return Graph(data, 'year', ['wheat', 'corn'])

    <div id="Graph_6" style="height:250px;width:100%;"></div>

    Morris.Line({
                    element: 'Graph_6',
                    data: [{x:"2011",a:"10.4",b:"14.2"},{x:"2012",a:"8.2",b:"12.4"},{x:"2013",a:"9.8",b:"7.2"},{x:"2014",a:"14.2",b:"8.4"},{x:"2015",a:"14.0",b:"12.3"}],
                    xkey: 'x',
                    ykeys: ['a', 'b'],
                    labels: ['a', 'b'],
                    pointSize: 0,
                    smooth: true,
                    hideHover: true,
                    xLabelAngle: 45,
                    axes: true,
                    grid: true
                    });
    • //cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css
    • //cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js
    • //cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js
    Name Class Type Default Description
    data NoneType <class 'shark.param_converters.DataTableParam'> None

    The dataset
    x_column str <class 'shark.base.StringParam'>

    Name of the x column in the data
    y_columns list <class 'shark.param_converters.ListParam'> []

    Name of the y columns in the data
    width str <class 'shark.param_converters.CssAttributeParam'> 100%

    Graph width
    height str <class 'shark.param_converters.CssAttributeParam'> 250px

    Graph height

    shark.objects.pygments

    HighlightCode

    Highlight source code using the Python pygments library.

    <a href='http://google.com'>Google.com</a>

    HighlightCode("<a href='http://google.com'>Google.com</a>")

    <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><span></span>&lt;<span style="color: #008000; font-weight: bold">a</span> <span style="color: #7D9029">href</span><span style="color: #666666">=</span><span style="color: #BA2121">&#39;http://google.com&#39;</span>&gt;Google.com&lt;/<span style="color: #008000; font-weight: bold">a</span>&gt;
</pre></div>
    Name Class Type Default Description
    code str <class 'shark.param_converters.RawParam'>

    The code
    language str <class 'shark.base.StringParam'> html

    Language to use for highlighting

    Source Code

    Pages on getshark.org have the source code for the page handler at the bottom of the page. If there's no code, it's a static page. Here's the code needed to render the current page: 

    class DocsHandler(PageHandler):
    route = '^docs$'

    def render_page(self, request):
        self.doc_html = Objects()

        def render_docs_for_module(module_name):
            module = import_module('shark.' + module_name)
            objects = ObjectInspector().load(module)
            self.doc_html += Row(Heading(module.__name__, 2))
            for name, _class, param_info, code, line_nr in objects:
                example_source = 'No source available.'
                example = NotImplemented
                if _class:
                    try:
                        example_function = _class.example
                        example = example_function()
                    except Exception as e:
                        example = NotImplemented
                    else:
                        example_source = ''.join([line[8:] for line in inspect.getsourcelines(example_function)[0][2:]])
                        if example_source.startswith('return '):
                            example_source = example_source[7:]
                tabs = Tabs()
                self.doc_html += Row([
                    Heading(name, 3),
                    Paragraph(Markdown(trim_docstring(_class.__doc__))),
                    Panel(example) if example is not NotImplemented else None,
                    tabs
                ])

                if example is not NotImplemented:
                    tabs.tabs += Tab('Code', HighlightCode(example_source, 'python'))
                    renderer = Renderer()
                    renderer.render_all(example)
                    if renderer.html:
                        tabs.tabs.append(Tab('HTML Output', HighlightCode(renderer.html, 'html')))
                    if renderer.css:
                        tabs.tabs.append(Tab('CSS Output', HighlightCode(renderer.css, 'css')))
                    if renderer.js:
                        tabs.tabs.append(Tab('JS Output', HighlightCode(renderer.js, 'javascript')))
                    if len(renderer.css_files)>1 or renderer.js_files:
                        tabs.tabs.append(Tab('Extra Files Required', UnorderedList([
                            [ListItem(filename) for filename in renderer.css_files],
                            [ListItem(filename) for filename in renderer.js_files]
                        ])))

                if param_info:
                    tabs.tabs += Tab('Parameters',
                        create_table(param_info, ['Name', 'Class', 'Type', 'Default', 'Description'], {
                         'Description': lambda row: Markdown(row['description'])
                        }),
                    )

        for m in ['base', 'objects.layout', 'objects.lists', 'objects.tables', 'objects.navigation', 'objects.modals', 'objects.font_awesome',
                  'objects.glyph', 'objects.ui_elements', 'objects.dashboard', 'objects.morris', 'objects.pygments']:
            render_docs_for_module(m)

        self += Div(self.doc_html, classes='col-md-9')