Component Reference

Page

A page is the top level component of a website. It contains the navbar, the main content, and the footer.

Input

Name	Type	Default Value	Description
title	Optional String		The SEO title of the page
description	Optional String		The SEO description of the page
image	Optional String		The SEO image of the page
additional_head	Optional String		Additional HTML to be added to the head of the page
navbar	Navbar	Navbar(title='PyVibe App')	Navbar for the page
footer	Footer	Footer(title='Made with PyVibe', logo='https://cdn.pycob.com/pyvibe.png', link='https://www.pyvibe.com')	Footer for the page
sidebar	Sidebar	None	Sidebar for the page
components	Components		The components to be rendered on the page. You don't normally need to specify this since you can use page.add_ methods

Example

Basic HTML

HTML (.add_html)

Renders raw HTML. This is meant to be an escape hatch for when you need to render something that isn't supported by PyVibe.

Use With

page.add_html

card.add_html

container.add_html

Input

Name	Type	Default Value	Description
value	String		Raw HTML code to be rendered

Example

>>> card.add_html(value = '<b>heres some html</b>')

heres some html

Text (.add_text)

Renders a paragraph of text

Use With

Input

Name	Type	Default Value	Description
value	String		Text to be rendered

Example

>>> card.add_text(value = 'Heres some text')

Heres some text

Link (.add_link)

Renders a link

Use With

Input

Name	Type	Description
text	String	Text to be rendered
url	String	URL to link to
classes	Optional String	Classes to be applied to the link

Example

>>> card.add_link(text = 'Heres a link', url = 'https://www.pycob.com')

Heres a link

Unstyled Link (.add_plainlink)

Renders a link without any styling

Use With

page.add_plainlink

navbar.add_plainlink

card.add_plainlink

container.add_plainlink

Input

Name	Type	Description
text	String	Text to be rendered
url	String	URL to link to
classes	Optional String	Classes to be applied to the link

Example

>>> card.add_plainlink(text = 'Heres a link', url = 'https://www.pyvibe.com')

Heres a link

List (.add_list)

Renders a list of items

Use With

Input

Name	Type	Default Value	Description
show_dots	Optional Boolean	True	Whether or not to show dots
classes	Optional String		Classes to be applied to the list
components	Components		Items to be rendered

List Item (.add_listitem)

Renders an item in a list

Use With

list.add_listitem

Input

Name	Type	Default Value	Description
value	String		Text to be rendered
classes	Optional String		Classes to be applied to the list item
svg	Optional String		SVG to render inside the list
is_checked	Optional Boolean	None	Whether or not the item is checked

Example

>>> list.add_listitem(value = 'Item 1')

Image (.add_image)

Renders an image

Use With

page.add_image

card.add_image

form.add_image

container.add_image

Input

Name	Type	Default Value	Description
url	String		URL of the image
alt	String	'Image'	Alt text for the image
classes	Optional String		Classes to be applied to the image

Example

>>> card.add_image(url = 'https://cdn.pycob.com/pyvibe.png', alt = 'PyVibe logo', classes = 'w-12')

Header (.add_header)

Renders a header

Use With

page.add_header

card.add_header

container.add_header

Input

Name	Type	Default Value	Description
text	String		Text to be rendered
size	Optional Integer	5	Size of the header. Choose 1-9
classes	Optional String		Classes to be applied to the header

Example

>>> card.add_header(text = 'Heres a regular header')

Heres a regular header

>>> card.add_header(text = 'Heres a small header', size = 1)

Heres a small header

>>> card.add_header(text = 'Heres a big header', size = 8)

Heres a big header

Code (.add_code)

Renders a block of code

Use With

Input

Name	Type	Default Value	Description
value	String		Code to be rendered
header	Optional String		Header to be rendered above the code block
prefix	Optional String	>>>	Prefix to be rendered before the code block

Example

>>> card.add_code(value = 'Heres some code')

>>> Heres some code

>>> card.add_code(value = 'Heres some code with a header', header = 'With Header')

With Header

>>> Heres some code with a header

Divider (.add_divider)

Renders a divider

Use With

page.add_divider

card.add_divider

Input

No Inputs

Example

>>> card.add_divider()

Layout

Card (.add_card)

Renders a card

Use With

page.add_card

card.add_card

container.add_card

Input

Name	Type	Default Value	Description
center_content	Optional Boolean	False	Whether the card contents should be centered
classes	Optional String		Classes to be applied to the card
components	Components		Components to be rendered inside the card

Container (.add_container)

Renders a container to help with layout

Use With

page.add_container

card.add_container

container.add_container

form.add_container

Input

Name	Type	Default Value	Description
grid_columns	Optional Integer	None	Number of columns (if any) to use. 1-12
classes	Optional String		Classes to be applied to the container
components	Components		Components to be rendered inside the container

Alert (.add_alert)

Renders an alert

Use With

page.add_alert

card.add_alert

container.add_alert

Input

Name	Type	Default Value	Description
text	String		Text to be rendered
badge	Optional String		Text to be rendered inside the badge
color	Optional String	indigo	Color of the. Choose 'indigo', 'orange', or 'red'

Example

>>> card.add_alert(text = 'Heres a success alert')

Heres a success alert

>>> card.add_alert(text = 'Heres a warning alert', badge = 'Warning', color = 'orange')

Warning Heres a warning alert

>>> card.add_alert(text = 'Heres an error alert', badge = 'Delete?', color = 'red')

Delete? Heres an error alert

Section (.add_section)

Creates an invisible element that can be used to link to in the sidebar

Use With

page.add_section

Input

Name	Type	Default Value	Description
id	String		ID for the section. This is what will appear in the link as /page#id
name	String		Name of the section. This is what will appear in the navigation bar
level	Optional Integer	1	Level of the section. This is the indentation that will appear in the navigation bar

Example

>>> page.add_section(id = 'section1', name = 'Sample Section 1')

>>> page.add_section(id = 'section2', name = 'Sample Section 2', level = 2)

Form

Form (.add_form)

Renders a form

Use With

page.add_form

card.add_form

container.add_form

Input

Name	Type	Default Value	Description
action	Optional String	?	Action for the form. This is the page that the form will submit to. Defaults to the current page
method	Optional String	GET	Method for the form (i.e. GET, POST)
components	Components		List of Component of the form

Form Text (.add_formtext)

Renders a form

Use With

form.add_formtext

card.add_formtext

container.add_formtext

Input

Name	Type	Description
label	String	Label for the form text
name	String	Name for the form text
placeholder	Optional String	Placeholder
value	Optional String	Value if you want to pre-populate

Example

>>> card.add_formtext(label = 'Name', name = 'name', placeholder = 'John Doe')

Name

>>> card.add_formtext(label = 'Email', name = 'email', placeholder = 'test@test.com')

Form Email (.add_formemail)

Renders a form email

Use With

form.add_formemail

card.add_formemail

container.add_formemail

Input

Name	Type	Default Value	Description
label	Optional String	Your E-mail	Label for the form email
name	Optional String	email	Name for the form email
placeholder	Optional String	user@example.com	Placeholder

Example

>>> card.add_formemail(label = 'Email', name = 'email', placeholder = 'test@pycob.com')

Form Password (.add_formpassword)

Renders a form password

Use With

form.add_formpassword

card.add_formpassword

container.add_formpassword

Input

Name	Type	Default Value	Description
label	Optional String	Password	Label for the form password
name	Optional String	password	Name for the form password
placeholder	Optional String	password	Placeholder

Example

>>> card.add_formpassword(label = 'Password', name = 'password', placeholder = '********')

Password

Form Select (.add_formselect)

Renders a form select

Use With

form.add_formselect

card.add_formselect

container.add_formselect

Input

Name	Type	Description
label	String	Label for the form select
name	String	Name for the form select
options	Untyped	Options for the form select
value	Optional String	Selected value

Example

>>>

card.add_formselect(label = 'Select', name = 'select', options = [{'value': 'US', 'label': 'United States'}, {'value': 'CA', 'label': 'Canada'}])

Select

Form Hidden Field (.add_formhidden)

Renders a hidden field on a form. This is useful for carrying state between pages without having to store data in the database.

Use With

form.add_formhidden

Input

Name	Type	Default Value	Description
name	String		Name for the form hidden
value	String		Value for the form hidden

Example

>>> form.add_formhidden(name = 'hidden', value = 'hidden')

Select Option (.add_selectoption)

Renders a select option

Use With

formselect.add_selectoption

Input

Name	Type	Description
label	String	Label for the select option
value	String	Value for the select option
selected	Optional String	Use 'selected' if this is selected

Example

>>> formselect.add_selectoption(label = 'United States', value = 'US')

Text Area (.add_formtextarea)

Renders a text area

Use With

form.add_formtextarea

card.add_formtextarea

container.add_formtextarea

Input

Name	Type	Default Value	Description
label	Optional String	Your Message	Label for the text area
name	Optional String	message	Name for the text area
placeholder	Optional String	Leave a comment...	Placeholder
value	Optional String		Value if you want to pre-populate

Example

>>> card.add_formtextarea(label = 'Message', name = 'message', placeholder = 'Your message')

Message

Form Submit (.add_formsubmit)

Renders a form submit button

Use With

form.add_formsubmit

card.add_formsubmit

container.add_formsubmit

Input

Name	Type	Default Value	Description
label	Optional String	Submit	Label for the form submit button

Example

>>> card.add_formsubmit(label = 'Submit')

>>> card.add_formsubmit(label = 'Save')

Table

Raw HTML Table (.add_rawtable)

Renders a table manually by constructing the table header, body, content, etc.. This is useful if you want to customize the table more than what the other table functions allow. Most of the time you'll use the other table functions instead of this one.

Use With

page.add_rawtable

card.add_rawtable

form.add_rawtable

Input

Name	Type	Default Value	Description
components	Components		Components to render in the table

Table Head (.add_tablehead)

Renders a table head

Use With

rawtable.add_tablehead

Input

Name	Type	Default Value	Description
components	Components		Components to render in the table head

Table Row (.add_tablerow)

Renders a table row

Use With

rawtable.add_tablerow

tablehead.add_tablerow

tablebody.add_tablerow

Input

Name	Type	Default Value	Description
components	Components		Components to render in the table row

Table Column (.add_tablecol)

Renders a table column

Use With

tablehead.add_tablecol

tablerow.add_tablecol

Input

Name	Type	Default Value	Description
components	Components		Components to render in the table column

Table Body (.add_tablebody)

Renders a table body

Use With

rawtable.add_tablebody

Input

Name	Type	Default Value	Description
components	Components		Components to render in the table body

Table Cell (.add_tablecell)

Renders a table cell

Use With

tablehead.add_tablecell

tablerow.add_tablecell

Input

Name	Type	Default Value	Description
value	String		String to render in the table cell

Table Cell Header (.add_tablecellheader)

Renders a table cell header

Use With

tablehead.add_tablecellheader

tablerow.add_tablecellheader

Input

Name	Type	Default Value	Description
value	String		String to render in the table cell header

Advanced

Pandas Table (.add_pandastable)

Renders a pandas table

Use With

page.add_pandastable

card.add_pandastable

container.add_pandastable

Input

Name	Type	Description
dataframe	Untyped	Dataframe to render
hide_fields	List	List of fields to hide
action_buttons	Components	Row actions to render

Example

>>> card.add_pandastable(dataframe = df)

calories	duration	large_numbers
420	50	9,000
380	40	9.0 million
390	45	9.0 billion

Data Grid (.add_datagrid)

Renders a data grid

Use With

page.add_datagrid

card.add_datagrid

Input

Name	Type	Default Value	Description
dataframe	Untyped		Dataframe to render
action_buttons	Components		Row actions to render

Github Embed (.add_emgithub)

Renders a block of code from a github URL

Use With

page.add_emgithub

card.add_emgithub

Input

Name	Type	Default Value	Description
url	String		URL of the GitHub file to be rendered

Advanced Layout

Navbar (navbar = Navbar(...))

Renders a navbar

Input

Name	Type	Default Value	Description
title	String		Title of the navbar
logo	Optional String	https://cdn.pycob.com/pyvibe.png	URL for the logo of the navbar
components	Components		List of links for the navbar

Navbar Link (.add_navbarlink)

Renders a link in the navbar

Use With

navbar.add_navbarlink

Input

Name	Type	Description
text	String	Text to be rendered
url	String	URL to link to
classes	Optional String	Classes to be applied to the link

Footer (footer = Footer(...))

Renders a footer

Input

Name	Type	Description
title	Optional String	Title of the footer
subtitle	Optional String	Subtitle of the footer
logo	Optional String	URL for the logo of the footer
link	Optional String	URL for the link of the footer
components	Components	List of category components for the footer

Footer Category (.add_footercategory)

Renders a category in the footer

Use With

footer.add_footercategory

Input

Name	Type	Default Value	Description
title	String		Title of the category
components	Components		List of Footer Link in the category

Footer Link (.add_footerlink)

Renders a link in the footer

Use With

footercategory.add_footerlink

Input

Name	Type	Default Value	Description
title	String		Title of the link
url	String		URL of the link

Sidebar (sidebar = Sidebar(...))

Renders a sidebar

Input

Name	Type	Default Value	Description
components	Components		List of Component of the sidebar

Sidebar Category (.add_sidebarcategory)

Renders a category in the sidebar

Use With

sidebar.add_sidebarcategory

Input

Name	Type	Default Value	Description
title	String		Title of the category
components	Components		List of Sidebar Link in the category

Sidebar Link (.add_sidebarlink)

Renders a link in the sidebar

Use With

sidebarcategory.add_sidebarlink

Input

Name	Type	Default Value	Description
title	String		Title of the link
url	String		URL of the link

Internal

Row Action (rowaction = Row Action(...))

Renders a row action

Input

Name	Type	Default Value	Description
label	String		Label for the button. Use {col_name} to use a column value. If you use just the column value, the button will replace that column. If you use a static string, a column will be added for the button.
url	String		URL to navigate to when the button is clicked. Use {col_name} to include the column value in the link
classes	Optional String		Classes to add to the button
open_in_new_window	Optional Boolean	True	Open the link in a new window

Code Editor (.add_codeeditor)

Renders a code editor

Use With

page.add_codeeditor

Input

Name	Type	Default Value	Description
value	String		Code to be rendered
language	Optional String	python	Language mode for syntax highlighting

Script Status (.add_scriptstatus)

Shows the status of a script execution and redirects to a new page when complete

Use With

page.add_scriptstatus

card.add_scriptstatus

container.add_scriptstatus

Input

Name	Type	Default Value	Description
job_id	String		Job id to check the status of
redirect_url	String		URL to redirect to when the script is complete