.. _page:
####
Page
####
The page component is a the top-level component that represents a web page.
It is a container that holds all the other components that will be rendered on the page.
The default page component includes the elements for the following HTML structure:
.. code-block:: html
:caption: Default page structure
<!-- The page title property -->
Usage
#####
The page component can be used to create a new page by passing the following properties:
- ``title``: The page's title
- ``html_props``: The props to insert inside the ``html`` tag
- ``head_props``: The props to insert inside the ``head`` tag
- ``body_props``: The props to insert inside the ``body`` tag
.. code-block:: python
:caption: Creating a new page
from pydom import Div, P
from pydom.page import Page
def my_awesome_page():
return Page(title="My awesome page")(
Div(classes="container mt-5")(
Div(classes="text-center p-4 rounded")(
Div(classes="h-1")(
"Awesome page"
),
P(classes="lead")(
"Welcome to PyDOM"
)
)
)
)
Custom Pages
############
You can create custom pages by extending the page component and overriding the default ``head`` and ``body`` methods.
.. code-block:: python
:caption: Creating a custom page component
from pydom import Div, Link
from pydom.page import Page
class MyPage(Page):
def head(self):
return (
*super().head(), # Include the default head components
Link(
rel="stylesheet",
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
)
)
def body(self):
return (
Div(id="root")( # Wrap all the page children in a div with id root
*self.children
)
)
def my_awesome_page():
return MyPage(title="My awesome page")(
Div(classes="container mt-5")(
Div(classes="text-center p-4 rounded")(
Div(classes="h-1")(
"Awesome page"
),
P(classes="lead")(
"Welcome to PyDOM"
)
)
)
)
.. note::
Both ``head`` and ``body`` methods should return an iterable of components, elements or primitives that will
be rendered inside the ```` and ```` tags respectively.
API Reference
#############
+------------+--------+---------------------------------------------+----------------------+
| Name | Type | Description | Default value |
+============+========+=============================================+======================+
| title | string | The page's title | ``None`` |
+------------+--------+---------------------------------------------+----------------------+
| html_props | dict | The props to insert inside the ``html`` tag | ``{ "lang": "en" }`` |
+------------+--------+---------------------------------------------+----------------------+
| head_props | dict | The props to insert inside the ``head`` tag | ``{}`` |
+------------+--------+---------------------------------------------+----------------------+
| body_props | dict | The props to insert inside the ``body`` tag | ``{ "dir": "ltr" }`` |
+------------+--------+---------------------------------------------+----------------------+