Just plain text.
Text('Hello world!')
Hello world!
Name | Class | Type | Default | Description |
---|---|---|---|---|
text | str | <class 'shark.base.StringParam'> |
The text |
Select a bootstrap Theme
Name | Class | Type | Default | Description |
---|---|---|---|---|
theme | str | <class 'shark.objects.layout.BootswatchTheme'> | cerulean |
The theme |
Creates the <br/> html tag.
['First line', Br(), 'Second line']
First line
<br/>
Second line
A Bootstrap Row.
Name | Class | Type | Default | Description |
---|---|---|---|---|
items | NoneType | <class 'shark.param_converters.ObjectsParam'> | None |
Items in the row |
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 |
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 |
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> |
A Basic 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 |
A flexible <div> element.
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>
Name | Class | Type | Default | Description |
---|---|---|---|---|
text | str | <class 'shark.param_converters.ObjectsParam'> |
The text |
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 |
Adds a <main> section.
Name | Class | Type | Default | Description |
---|---|---|---|---|
items | Objects | <class 'shark.param_converters.ObjectsParam'> | Objects([]) |
Items in the <main> |
Create a Bootstrap Jumbotron.
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 |
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 |
Name | Class | Type | Default | Description |
---|---|---|---|---|
items | Objects | <class 'shark.param_converters.ObjectsParam'> | Objects([]) |
List items in list |
Name | Class | Type | Default | Description |
---|---|---|---|---|
items | Objects | <class 'shark.param_converters.ObjectsParam'> | Objects([]) |
List items in |
Name | Class | Type | Default | Description |
---|---|---|---|---|
items | Objects | <class 'shark.param_converters.ObjectsParam'> | Objects([]) |
Content of <dt> |
Name | Class | Type | Default | Description |
---|---|---|---|---|
items | Objects | <class 'shark.param_converters.ObjectsParam'> | Objects([]) |
Content of <dd> |
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 |
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 |
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 |
Name | Class | Type | Default | Description |
---|---|---|---|---|
columns | Objects | <class 'shark.param_converters.ObjectsParam'> | Objects([]) |
Columns in the table |
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 |
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 |
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 |
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_32_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_32_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 |
Name | Class | Type | Default | Description |
---|---|---|---|---|
items | NoneType | <class 'shark.param_converters.ObjectsParam'> | None |
Items on the left side of the navbar |
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 |
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 |
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 |
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 |
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 |
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 |
Icon from Font Awesome See the Font Awesome documentation on ideas of how and where to use the various options.
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 classes="text-danger" class="fa fa-stack-2x fa-ban"></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 |
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 |
Displays Breadcrumbs navigation. The non-keyword arguments are the crumbs. Add Anchors or simple text strings.
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. |
Displays an image.
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 |
Displays an image in a frame with a caption. Useful for lists of thumbnails.
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)
<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 |
Name | Class | Type | Default | Description |
---|---|---|---|---|
items | Objects | <class 'shark.param_converters.ObjectsParam'> | Objects([]) |
Items in Address |
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. |
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 |
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 |
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">×</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 |
Adds a caret. See the example.
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 |
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 % |
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 % |
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 |
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. |
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. |
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 |
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: ['b', 'a'],
labels: ['b', 'a'],
pointSize: 0,
smooth: true,
hideHover: true,
xLabelAngle: 45,
axes: true,
grid: true
});
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 |
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><<span style="color: #008000; font-weight: bold">a</span> <span style="color: #7D9029">href</span><span style="color: #666666">=</span><span style="color: #BA2121">'http://google.com'</span>>Google.com</<span style="color: #008000; font-weight: bold">a</span>>
</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 |
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')