{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Title\n",
"\n",
"\n",
"Title [component](00_components.ipynb) creation in Epyk will be using the function title from the ui property.\n",
"\n",
"the ui entry point will give you access to all the registered components.\n",
"Different flavour of buttons are available in the framework.\n",
"\n",
"## Basic Title"
]
},
{
"cell_type": "code",
"execution_count": 17,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 17,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"\n",
"rptObj.ui.title(\"Title\")\n",
"rptObj.ui.title(\"Title\", level=1)\n",
"rptObj.ui.title(\"Title\", level=2)\n",
"rptObj.ui.title(\"Title\", level=3)\n",
"rptObj.ui.title(\"Title\", level=4)\n",
"\n",
"rptObj.outs.jupyter()\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Predefined Titles"
]
},
{
"cell_type": "code",
"execution_count": 18,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"Test
\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 18,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"rptObj.ui.titles.head(\"Test\")\n",
"rptObj.outs.jupyter()"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"Test
\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 7,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"\n",
"rptObj.ui.titles.headline(\"Test\")\n",
"\n",
"rptObj.outs.jupyter()"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"Test
\n",
"Test
\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 8,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"rptObj.ui.titles.rubric(\"Test\")\n",
"rptObj.ui.text(\"Test\")\n",
"\n",
"rptObj.outs.jupyter()"
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"Test
\n",
"Test
\n",
"Test
\n",
"Test
\n",
"Test
\n",
"Test
\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 9,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"rptObj.ui.titles.head(\"Test\")\n",
"rptObj.ui.titles.headline(\"Test\")\n",
"rptObj.ui.titles.rubric(\"Test\")\n",
"rptObj.ui.titles.underline(\"Test\")\n",
"rptObj.ui.titles.caption(\"Test\")\n",
"rptObj.ui.text(\"Test\")\n",
"\n",
"rptObj.outs.jupyter()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Bespoke Titles\n",
"\n",
"In the same way than all the other components, it is possible to change the style or add events on titles.\n",
"The **CSS styles** can be changed using the style.css property."
]
},
{
"cell_type": "code",
"execution_count": 22,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 22,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"\n",
"title = rptObj.ui.title(\"Title\")\n",
"title.style.css.color = 'green'\n",
"\n",
"title.click([\n",
" rptObj.js.alert(\"This is a click\")\n",
"])\n",
"\n",
"rptObj.outs.jupyter()\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Content Table\n",
"\n",
"By using the title and the various level, this will be automatically added to a fixed content table on the top left side of your dashboard."
]
},
{
"cell_type": "code",
"execution_count": 26,
"metadata": {
"scrolled": true
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
" \n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 26,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"\n",
"rptObj = Report()\n",
"\n",
"contents = rptObj.ui.contents()\n",
"contents.style.css.top = \"100px\"\n",
"\n",
"rptObj.ui.title(\"Title\", level=1)\n",
"rptObj.ui.title(\"Sub itle 1\", level=2)\n",
"rptObj.ui.title(\"Sub itle 2\", level=2)\n",
"\n",
"rptObj.outs.jupyter()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Go back to the tutorials page\n",
"
\n",
"Do not forget that this is a collaborative framework so do not hesitate to give feedbacks and like the different repository to get more visbility.\n",
"\n",
"Also any help is more than welcome !"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.8.2"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
![](\"../../static/images/epyklogo_whole_small.png\")
\n",
" \n",
"