If you want to focus on a component, you can use me.focus_component which focuses the component with the specified key if it is focusable.
import mesop as me
+
+
+@me.page(path="/focus_component")
+def page():
+ with me.box(style=me.Style(margin=me.Margin.all(15))):
+ me.select(
+ options=[
+ me.SelectOption(label="Autocomplete", value="autocomplete"),
+ me.SelectOption(label="Checkbox", value="checkbox"),
+ me.SelectOption(label="Input", value="input"),
+ me.SelectOption(label="Link", value="link"),
+ me.SelectOption(label="Radio", value="radio"),
+ me.SelectOption(label="Select", value="select"),
+ me.SelectOption(label="Slider", value="slider"),
+ me.SelectOption(label="Slide Toggle", value="slide_toggle"),
+ me.SelectOption(label="Textarea", value="textarea"),
+ me.SelectOption(label="Uploader", value="uploader"),
+ ],
+ on_selection_change=on_selection_change,
+ )
+
+ me.divider()
+
+ with me.box(
+ style=me.Style(
+ display="grid",
+ gap=5,
+ grid_template_columns="1fr 1fr",
+ margin=me.Margin.all(15),
+ )
+ ):
+ with me.box():
+ me.autocomplete(
+ key="autocomplete",
+ label="Autocomplete",
+ options=[
+ me.AutocompleteOption(label="Test", value="Test"),
+ me.AutocompleteOption(label="Test2", value="Tes2t"),
+ ],
+ )
+
+ with me.box():
+ me.checkbox("Checkbox", key="checkbox")
+
+ with me.box():
+ me.input(key="input", label="Input")
+
+ with me.box():
+ me.link(key="link", text="Test", url="https://google.com")
+
+ with me.box():
+ me.radio(
+ key="radio",
+ options=[
+ me.RadioOption(label="Option 1", value="1"),
+ me.RadioOption(label="Option 2", value="2"),
+ ],
+ )
+
+ with me.box():
+ me.select(
+ key="select",
+ label="Select",
+ options=[
+ me.SelectOption(label="label 1", value="value1"),
+ me.SelectOption(label="label 2", value="value2"),
+ me.SelectOption(label="label 3", value="value3"),
+ ],
+ )
+
+ with me.box():
+ me.slider(key="slider")
+
+ with me.box():
+ me.slide_toggle(key="slide_toggle", label="Slide toggle")
+
+ with me.box():
+ me.textarea(key="textarea", label="Textarea")
+
+ with me.box():
+ me.uploader(
+ key="uploader",
+ label="Upload Image",
+ accepted_file_types=["image/jpeg", "image/png"],
+ type="flat",
+ color="primary",
+ style=me.Style(font_weight="bold"),
+ )
+
+
+def on_selection_change(e: me.SelectSelectionChangeEvent):
+ me.focus_component(key=e.value)
+focus_component
+
+¶Focus the component specified by the key
+ + +| PARAMETER | +DESCRIPTION | +
|---|---|
key |
+
+
+
+ The unique identifier of the component to focus on. + This key should be globally unique to prevent unexpected behavior. + If multiple components share the same key, the first component + instance found in the component tree will be focused on. +
+
+ TYPE:
+ |
+
To navigate to another page, you can use me.navigate. This is particularly useful for navigating across a multi-page app.
import mesop as me
+
+
+def navigate(event: me.ClickEvent):
+ me.navigate("/about")
+
+
+@me.page(path="/")
+def home():
+ me.text("This is the home page")
+ me.button("navigate to about page", on_click=navigate)
+
+
+@me.page(path="/about")
+def about():
+ me.text("This is the about page")
+navigate
+
+¶Navigates to the given URL.
+ + +| PARAMETER | +DESCRIPTION | +
|---|---|
url |
+
+
+
+ The URL to navigate to. +
+
+ TYPE:
+ |
+
query_params |
+
+
+
+ A dictionary of query parameters to include in the URL, or
+
+ TYPE:
+ |
+
If you want to scroll a component into the viewport, you can use me.scroll_into_view which scrolls the component with the specified key into the viewport.
import time
+
+import mesop as me
+
+
+@me.stateclass
+class State:
+ more_lines: int = 0
+
+
+@me.page(path="/scroll_into_view")
+def app():
+ me.button("Scroll to middle line", on_click=scroll_to_middle)
+ me.button("Scroll to bottom line", on_click=scroll_to_bottom)
+ me.button(
+ "Scroll to bottom line & generate lines",
+ on_click=scroll_to_bottom_and_generate_lines,
+ )
+ for _ in range(100):
+ me.text("Filler line")
+ me.text("middle_line", key="middle_line")
+ for _ in range(100):
+ me.text("Filler line")
+ me.text("bottom_line", key="bottom_line")
+ for _ in range(me.state(State).more_lines):
+ me.text("More lines")
+
+
+def scroll_to_middle(e: me.ClickEvent):
+ me.scroll_into_view(key="middle_line")
+
+
+def scroll_to_bottom(e: me.ClickEvent):
+ me.scroll_into_view(key="bottom_line")
+
+
+def scroll_to_bottom_and_generate_lines(e: me.ClickEvent):
+ state = me.state(State)
+ me.scroll_into_view(key="bottom_line")
+ yield
+ state.more_lines += 5
+ time.sleep(1)
+ yield
+ state.more_lines += 5
+ time.sleep(1)
+ yield
+ state.more_lines += 5
+ time.sleep(1)
+ yield
+ state.more_lines += 5
+ time.sleep(1)
+ yield
+scroll_into_view
+
+¶Scrolls so the component specified by the key is in the viewport.
+ + +| PARAMETER | +DESCRIPTION | +
|---|---|
key |
+
+
+
+ The unique identifier of the component to scroll to. + This key should be globally unique to prevent unexpected behavior. + If multiple components share the same key, the first component + instance found in the component tree will be scrolled to. +
+
+ TYPE:
+ |
+
If you want to set the page title, you can use me.set_page_title which will
+set the page title displayed on the browser tab.
This change does not persist if you navigate to a new page. The title will be
+reset to the title configured in me.page.
import mesop as me
+
+
+def on_blur(e: me.InputBlurEvent):
+ me.set_page_title(e.value)
+
+
+def load(e: me.LoadEvent):
+ me.set_theme_mode("system")
+
+
+@me.page(
+ on_load=load,
+ security_policy=me.SecurityPolicy(
+ allowed_iframe_parents=["https://google.github.io"]
+ ),
+ path="/set_page_title",
+)
+def app():
+ with me.box(style=me.Style(margin=me.Margin.all(15))):
+ me.input(label="Page title", on_blur=on_blur)
+set_page_title
+
+¶Sets the page title.
+ + +| PARAMETER | +DESCRIPTION | +
|---|---|
title |
+
+
+
+ The new page title +
+
+ TYPE:
+ |
+
Mesop is configured at the application level using environment variables.
+++NOTE: By default, this feature is not enabled, but in an upcoming release, the +default will be
+static.
Allows access to static files from the Mesop server.
+It is important to know that the specified folder path is relative to the current +working directory where the Mesop command is run. Absolute paths are not allowed.
+Example:
+In this case, the current working directory is /srv, which means Mesop will make
+/srv/static the static folder.
Here are some examples of valid paths. Let's assume the current working directory is
+/srv/
static becomes /srv/staticstatic/ becomes /srv/staticstatic/assets becomes /srv/static/assets./static becomes /srv/static./static/ becomes /srv/static./static/assets becomes /srv/static/assetsInvalid paths will raise MesopDeveloperException. Here are some examples:
/absolute/path)../..../This is the base URL path from which files for your specified static folder will be +made viewable.
+The static URL path is only recognized if MESOP_STATIC_FOLDER is set.
For example, given MESOP_STATIC_FOLDER=static and MESOP_STATIC_URL_PATH=/assets, the
+file static/js/script.js can be viewable from the URL path /assets/js/script.js.
Default: /static
Sets the backend to use for caching state data server-side. This makes it so state does +not have to be sent to the server on every request, reducing bandwidth, especially if +you have large state objects.
+The backend options available at the moment are memory, file, sql, and firestore.
Users should be careful when using the memory backend. Each Mesop process has their
+own RAM, which means cache misses will be common if each server has multiple processes
+and there is no session affinity. In addition, the amount of RAM must be carefully
+specified per instance in accordance with the expected user traffic and state size.
The safest option for using the memory backend is to use a single process with a
+good amount of RAM. Python is not the most memory efficient, especially when saving data
+structures such as dicts.
The drawback of being limited to a single process is that requests will take longer to +process since only one request can be handled at a time. This is especially problematic +if your application contains long running API calls.
+If session affinity is available, you can scale up multiple instances, each running +single processes.
+Users should be careful when using the file backend. Each Mesop instance has their
+own disk, which can be shared among multiple processes. This means cache misses will be
+common if there are multiple instances and no session affinity.
If session affinity is available, you can scale up multiple instances, each running +multiple Mesop processes. If no session affinity is available, then you can only +vertically scale a single instance.
+The bottleneck with this backend is the disk read/write performance. The amount of disk +space must also be carefully specified per instance in accordance with the expected user +traffic and state size.
+You will also need to specify a directory to write the state data using
+MESOP_STATE_SESSION_BACKEND_FILE_BASE_DIR.
++NOTE: Setting up and configuring databases is out of scope of this document.
+
This option uses SqlAlchemy to store Mesop state sessions +in supported SQL databases, such as SQLite3 and PostgreSQL. You can also connect to +hosted options, such as GCP CloudSQL.
+If you use SQLite3, you cannot use an in-memory database. It has to be a file. This
+option has similar pros/cons as the file backend. Mesop uses the default configuration
+for SQLite3, so the performance will not be optimized for Mesop's usage patterns.
+SQLite3 is OK for development purposes.
Using a database like PostgreSQL will allow for better scalability, both vertically and +horizontally, since the database is decoupled from the Mesop server.
+The drawback here is that this requires knowledge of the database you're using. At +minimum, you will need to create a database and a database user with the right +privileges. You will also need to create the database table, which you can create +with this script. You will need to update the CONNECTION_URI and TABLE_NAME to match +your database and settings. Also the database user for this script will need privileges +to create tables on the target database.
+from sqlalchemy import (
+ Column,
+ DateTime,
+ LargeBinary,
+ MetaData,
+ String,
+ Table,
+ create_engine,
+)
+
+CONNECTION_URI = "your-database-connection-uri"
+# Update to "your-table-name" if you've overridden `MESOP_STATE_SESSION_BACKEND_SQL_TABLE`.
+TABLE_NAME = "mesop_state_session"
+
+db = create_engine(CONNECTION_URI)
+metadata = MetaData()
+table = Table(
+ TABLE_NAME,
+ metadata,
+ Column("token", String(23), primary_key=True),
+ Column("states", LargeBinary, nullable=False),
+ Column("created_at", DateTime, nullable=False, index=True),
+)
+
+metadata.create_all(db)
+The Mesop server will raise a sqlalchemy.exc.ProgrammingError if there is a
+database configuration issue.
By default, Mesop will use the table name mesop_state_session, but this can be
+overridden using MESOP_STATE_SESSION_BACKEND_SQL_TABLE.
This options uses GCP Firestore to store
+Mesop state sessions. The (default) database has a free tier that can be used for
+for small demo applications with low traffic and moderate amounts of state data.
Since Firestore is decoupled from your Mesop server, it allows you to scale vertically
+and horizontally without the considerations you'd need to make for the memory and
+file backends.
In order to use Firestore, you will need a Google Cloud account with Firestore enabled. +Follow the instructions for creating a Firestore in Native mode database.
+Mesop is configured to use the (default) Firestore only. The GCP project is determined
+using the Application Default Credentials (ADC) which is automatically configured for
+you on GCP services, such as Cloud Run.
For local development, you can run this command:
+ +If you have multiple GCP projects, you may need to update the project associated +with the ADC:
+GCP_PROJECT=gcp-project
+gcloud config set project $GCP_PROJECT
+gcloud auth application-default set-quota-project $GCP_PROJECT
+Mesop leverages Firestore's TTL policies +to delete stale state sessions. This needs to be set up using the following command, +otherwise old data will accumulate unnecessarily.
+COLLECTION_NAME=collection_name
+gcloud firestore fields ttls update expiresAt \
+ --collection-group=$COLLECTION_NAME
+By default, Mesop will use the collection name mesop_state_sessions, but this can be
+overridden using MESOP_STATE_SESSION_BACKEND_FIRESTORE_COLLECTION.
Default: none
This is only used when the MESOP_STATE_SESSION_BACKEND is set to file. This
+parameter specifies where Mesop will read/write the session state. This means the
+directory must be readable and writeable by the Mesop server processes.
This is only used when the MESOP_STATE_SESSION_BACKEND is set to firestore. This
+parameter specifies which Firestore collection that Mesop will write state sessions to.
Default: mesop_state_sessions
This is only used when the MESOP_STATE_SESSION_BACKEND is set to sql. This
+parameter specifies the database connection string. See the SqlAlchemy docs for more details.
Default: mesop_state_session
This is only used when the MESOP_STATE_SESSION_BACKEND is set to sql. This
+parameter specifies which SQL database table that Mesop will write state sessions to.
Default: mesop_state_session
These configuration values are experimental and are subject to breaking change, including removal in future releases.
+Experimental feature
+This is an experimental feature and is subject to breaking change. There are many bugs and edge cases to this feature.
+Allows concurrent updates to state in the same session. If this is not updated, then updates are queued and processed sequentially.
+By default, this is not enabled. You can enable this by setting it to true.
Experimental feature
+This is an experimental feature and is subject to breaking change. Please follow https://github.com/google/mesop/issues/1028 for updates.
+This uses WebSockets instead of HTTP Server-Sent Events (SSE) as the transport protocol for UI updates. If you set this environment variable to true, then MESOP_CONCURRENT_UPDATES_ENABLED will automatically be enabled as well.
You can specify the environment variables before the mesop command.
+ +Mesop also supports .env files. This is nice since you don't have to keep setting
+the environment variables. In addition, the variables are only set when the application
+is run.
MESOP_STATE_SESSION_BACKEND=file
+MESOP_STATE_SESSION_BACKEND_FILE_BASE_DIR=/tmp/mesop-sessions
+When you run your Mesop app, the .env file will then be read.
+ + + + + + + + + + + + + + +Pages allow you to build multi-page applications by decorating Python functions with me.page. To learn more, read the see multi-pages guide.
To create a simple Mesop app, you can use me.page() like this:
++NOTE: If you do not provide a
+pathargument, then it defaults to the root path"/".
This is the same as the above example which explicitly sets the route to "/".
page
+
+¶Defines a page in a Mesop application.
+This function is used as a decorator to register a function as a page in a Mesop app.
+ + +| PARAMETER | +DESCRIPTION | +
|---|---|
path |
+
+
+
+ The URL path for the page. Defaults to "/". +
+
+ TYPE:
+ |
+
title |
+
+
+
+ The title of the page. If None, a default title is generated. +
+
+ TYPE:
+ |
+
stylesheets |
+
+
+
+ List of stylesheet URLs to load. +
+
+ TYPE:
+ |
+
security_policy |
+
+
+
+ The security policy for the page. If None, a default strict security policy is used. +
+
+ TYPE:
+ |
+
on_load |
+
+
+
+ An optional event handler to be called when the page is loaded. +
+
+ TYPE:
+ |
+
| RETURNS | +DESCRIPTION | +
|---|---|
+
+ Callable[[Callable[[], None]], Callable[[], None]]
+
+ |
+
+
+
+ A decorator that registers the decorated function as a page. + |
+
SecurityPolicy
+
+
+ dataclass
+
+
+¶A class to represent the security policy.
+ + +| ATTRIBUTE | +DESCRIPTION | +
|---|---|
allowed_iframe_parents |
+
+
+
+ A list of allowed iframe parents. +
+
+ TYPE:
+ |
+
allowed_connect_srcs |
+
+
+
+ A list of sites you can connect to, see MDN. +
+
+ TYPE:
+ |
+
allowed_script_srcs |
+
+
+
+ A list of sites you can load scripts from, see MDN. +
+
+ TYPE:
+ |
+
allowed_worker_srcs. |
+
+
+
+ //developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src). +
+
+ TYPE:
+ |
+
allowed_trusted_types |
+
+
+
+ A list of trusted type policy names, see MDN. +
+
+ TYPE:
+ |
+
dangerously_disable_trusted_types |
+
+
+
+ A flag to disable trusted types. +Highly recommended to not disable trusted types because +it's an important web security feature! +
+
+ TYPE:
+ |
+
LoadEvent
+
+
+ dataclass
+
+
+¶Represents a page load event.
+ + +| ATTRIBUTE | +DESCRIPTION | +
|---|---|
path |
+
+
+
+ The path loaded +
+
+ TYPE:
+ |
+
on_load¶You may want to do some sort of data-processing when a page is first loaded in a session.
+An on_load handler is similar to a regular event handler where you can mutate state.
import time
+
+import mesop as me
+
+
+def fake_api():
+ yield 1
+ time.sleep(1)
+ yield 2
+ time.sleep(2)
+ yield 3
+
+
+def on_load(e: me.LoadEvent):
+ for val in fake_api():
+ me.state(State).default_values.append(val)
+ yield
+
+
+@me.page(path="/docs/on_load", on_load=on_load)
+def app():
+ me.text("onload")
+ me.text(str(me.state(State).default_values))
+
+
+@me.stateclass
+class State:
+ default_values: list[int]
+The on_load handler can also be a generator function. This is useful if you need to call a slow or streaming API and want to return intermediate results before all the data has been received.
import time
+
+import mesop as me
+
+
+def on_load(e: me.LoadEvent):
+ state = me.state(State)
+ state.default_values.append("a")
+ yield
+ time.sleep(1)
+ state.default_values.append("b")
+ yield
+
+
+@me.page(path="/docs/on_load_generator", on_load=on_load)
+def app():
+ me.text("onload")
+ me.text(str(me.state(State).default_values))
+
+
+@me.stateclass
+class State:
+ default_values: list[str]
+Query params, also sometimes called query string, provide a way to manage state in the URLs. They are useful for providing deep-links into your Mesop app.
+Here's a simple working example that shows how you can read and write query params.
+@me.page(path="/examples/query_params/page_2")
+def page_2():
+ me.text(f"query_params={me.query_params}")
+ me.button("Add query param", on_click=add_query_param)
+ me.button("Navigate", on_click=navigate)
+
+def add_query_param(e: me.ClickEvent):
+ me.query_params["key"] = "value"
+
+def navigate(e: me.ClickEvent):
+ me.navigate("/examples/query_params", query_params=me.query_params)
+You can use query parameters from me.query_params, which has a dictionary-like interface, where the key is the parameter name and value is the parameter value.
in to check whether a key exists in me.query_params:
+
+If a query param key is repeated, then you will get the first value. If you want all the values use get_all.
To get all the values for a particular query parameter key, you can use me.query_params.get_all, which returns a sequence of parameter values (currently implemented as a tuple).
Here's an example of how to navigate to a new page with query parameters:
+def click_navigate_button(e: me.ClickEvent):
+ me.query_params['q'] = "value"
+ me.navigate('/search', query_params=me.query_params)
+You can also navigate by passing in a dictionary to query_params parameter for me.navigate if you do not want to keep the existing query parameters.
Mesop provides a Python API that wraps the browser's native CSS style API.
+Style
+
+
+ dataclass
+
+
+¶Represents the style configuration for a UI component.
+ + +| ATTRIBUTE | +DESCRIPTION | +
|---|---|
align_content |
+
+
+
+ Aligns the flexible container's items on the cross-axis. See MDN doc. +
+
+ TYPE:
+ |
+
align_items |
+
+
+
+ Specifies the default alignment for items inside a flexible container. See MDN doc. +
+
+ TYPE:
+ |
+
align_self |
+
+
+
+ Overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. See MDN doc. +
+
+ TYPE:
+ |
+
aspect_ratio |
+
+
+
+ Specifies the desired width-to-height ratio of a component. See MDN doc. +
+
+ TYPE:
+ |
+
backdrop_filter |
+
+
+
+ Applies a CSS filter to the backdrop of the component. See MDN doc. +
+
+ TYPE:
+ |
+
background |
+
+
+
+ Sets the background color or image of the component. See MDN doc. +
+
+ TYPE:
+ |
+
border |
+
+
+
+ Defines the border properties for each side of the component. See MDN doc. +
+
+ TYPE:
+ |
+
border_radius |
+
+
+
+ Defines the border radius. See MDN doc. +
+
+ TYPE:
+ |
+
bottom |
+
+
+
+ Helps set vertical position of a positioned element. See MDN doc. +
+
+ TYPE:
+ |
+
box_shadow |
+
+
+
+ Defines the box shadow. See MDN doc. +
+
+ TYPE:
+ |
+
box_sizing |
+
+
+
+ Defines the box sizing. See MDN doc. +
+
+ TYPE:
+ |
+
color |
+
+
+
+ Sets the color of the text inside the component. See MDN doc. +
+
+ TYPE:
+ |
+
column_gap |
+
+
+
+ Sets the gap between columns. See MDN doc. +
+
+ TYPE:
+ |
+
columns |
+
+
+
+ Specifies the number of columns in a multi-column element. See MDN doc. +
+
+ TYPE:
+ |
+
cursor |
+
+
+
+ Sets the mouse cursor. See MDN doc. +
+
+ TYPE:
+ |
+
display |
+
+
+
+ Defines the display type of the component. See MDN doc. +
+
+ TYPE:
+ |
+
flex |
+
+
+
+ Defines the flexbox layout using a shorthand property. See MDN doc. +
+
+ TYPE:
+ |
+
flex_basis |
+
+
+
+ Specifies the initial length of a flexible item. See MDN doc. +
+
+ TYPE:
+ |
+
flex_direction |
+
+
+
+ Establishes the main-axis, thus defining the direction flex items are placed in the flex container. See MDN doc. +
+
+ TYPE:
+ |
+
flex_grow |
+
+
+
+ Defines the ability for a flex item to grow if necessary. See MDN doc. +
+
+ TYPE:
+ |
+
flex_shrink |
+
+
+
+ Defines the ability for a flex item to shrink if necessary. See MDN doc. +
+
+ TYPE:
+ |
+
flex_wrap |
+
+
+
+ Allows flex items to wrap onto multiple lines. See MDN doc. +
+
+ TYPE:
+ |
+
font_family |
+
+
+
+ Specifies the font family. See MDN doc. +
+
+ TYPE:
+ |
+
font_size |
+
+
+
+ Sets the size of the font. See MDN doc. +
+
+ TYPE:
+ |
+
font_style |
+
+
+
+ Specifies the font style for text. See MDN doc. +
+
+ TYPE:
+ |
+
font_weight |
+
+
+
+ Sets the weight (or boldness) of the font. See MDN doc. +
+
+ TYPE:
+ |
+
gap |
+
+
+
+ Sets the gap. See MDN doc. +
+
+ TYPE:
+ |
+
grid_area |
+
+
+
+ Sets the grid area. See MDN doc. +
+
+ TYPE:
+ |
+
grid_auto_columns |
+
+
+
+ CSS property specifies the size of an implicitly-created grid column track or pattern of tracks. See MDN doc. +
+
+ TYPE:
+ |
+
grid_auto_flow |
+
+
+
+ CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. See MDN doc. +
+
+ TYPE:
+ |
+
grid_auto_rows |
+
+
+
+ CSS property specifies the size of an implicitly-created grid row track or pattern of tracks. See MDN doc. +
+
+ TYPE:
+ |
+
grid_column |
+
+
+
+ CSS shorthand property specifies a grid item's size and location within a grid column. See MDN doc. +
+
+ TYPE:
+ |
+
grid_column_start |
+
+
+
+ Sets the grid column start. See MDN doc. +
+
+ TYPE:
+ |
+
grid_column_end |
+
+
+
+ Sets the grid column end. See MDN doc. +
+
+ TYPE:
+ |
+
grid_row |
+
+
+
+ CSS shorthand property specifies a grid item's size and location within a grid row. See MDN doc. +
+
+ TYPE:
+ |
+
grid_row_start |
+
+
+
+ Sets the grid row start. See MDN doc. +
+
+ TYPE:
+ |
+
grid_row_end |
+
+
+
+ Sets the grid row end. See MDN doc. +
+
+ TYPE:
+ |
+
grid_template_areas |
+
+
+
+ Sets the grid template areas; each element is a row. See MDN doc. +
+
+ TYPE:
+ |
+
grid_template_columns |
+
+
+
+ Sets the grid template columns. See MDN doc. +
+
+ TYPE:
+ |
+
grid_template_rows |
+
+
+
+ Sets the grid template rows. See MDN doc. +
+
+ TYPE:
+ |
+
height |
+
+
+
+ Sets the height of the component. See MDN doc. +
+
+ TYPE:
+ |
+
justify_content |
+
+
+
+ Aligns the flexible container's items on the main-axis. See MDN doc. +
+
+ TYPE:
+ |
+
justify_items |
+
+
+
+ Defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. See MDN doc. +
+
+ TYPE:
+ |
+
justify_self |
+
+
+
+ Sets the way a box is justified inside its alignment container along the appropriate axis. See MDN doc. +
+
+ TYPE:
+ |
+
left |
+
+
+
+ Helps set horizontal position of a positioned element. See MDN doc. +
+
+ TYPE:
+ |
+
letter_spacing |
+
+
+
+ Increases or decreases the space between characters in text. See MDN doc. +
+
+ TYPE:
+ |
+
line |
+
+
+
+ Set the line height (relative to the font size). See MDN doc. +
+
+ TYPE:
+ |
+
margin |
+
+
+
+ Sets the margin space required on each side of an element. See MDN doc. +
+
+ TYPE:
+ |
+
max_height |
+
+
+
+ Sets the maximum height of an element. See MDN doc. +
+
+ TYPE:
+ |
+
max_width |
+
+
+
+ Sets the maximum width of an element. See MDN doc. +
+
+ TYPE:
+ |
+
min_height |
+
+
+
+ Sets the minimum height of an element. See MDN doc. +
+
+ TYPE:
+ |
+
min_width |
+
+
+
+ Sets the minimum width of an element. See MDN doc. +
+
+ TYPE:
+ |
+
object_fit |
+
+
+
+ Specifies how an image or video should be resized to fit its container. See MDN doc. +
+
+ TYPE:
+ |
+
opacity |
+
+
+
+ Sets the opacity property. See MDN doc. +
+
+ TYPE:
+ |
+
outline |
+
+
+
+ Sets the outline property. Note:
+
+ TYPE:
+ |
+
overflow_wrap |
+
+
+
+ Specifies how long text can be broken up by new lines to prevent overflowing. See MDN doc. +
+
+ TYPE:
+ |
+
overflow |
+
+
+
+ Specifies the handling of overflow in the horizontal and vertical direction. See MDN doc. +
+
+ TYPE:
+ |
+
overflow_x |
+
+
+
+ Specifies the handling of overflow in the horizontal direction. See MDN doc. +
+
+ TYPE:
+ |
+
overflow_y |
+
+
+
+ Specifies the handling of overflow in the vertical direction. See MDN doc. +
+
+ TYPE:
+ |
+
padding |
+
+
+
+ Sets the padding space required on each side of an element. See MDN doc. +
+
+ TYPE:
+ |
+
place_items |
+
+
+
+ The CSS place-items shorthand property allows you to align items along both the block and inline directions at once. See MDN doc. +
+
+ TYPE:
+ |
+
pointer_events |
+
+
+
+ Sets under what circumstances (if any) a particular graphic element can become the target of pointer events. See MDN doc. +
+
+ TYPE:
+ |
+
position |
+
+
+
+ Specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). See MDN doc. +
+
+ TYPE:
+ |
+
right |
+
+
+
+ Helps set horizontal position of a positioned element. See MDN doc. +
+
+ TYPE:
+ |
+
rotate |
+
+
+
+ Allows you to specify rotation transforms individually and independently of the transform property. See MDN doc. +
+
+ TYPE:
+ |
+
row_gap |
+
+
+
+ Sets the gap between rows. See MDN doc. +
+
+ TYPE:
+ |
+
text_align |
+
+
+
+ Specifies the horizontal alignment of text in an element. See MDN doc. +
+
+ TYPE:
+ |
+
text_decoration |
+
+
+
+ Specifies the decoration added to text. See MDN doc. +
+
+ TYPE:
+ |
+
text_overflow |
+
+
+
+ Specifies how overflowed content that is not displayed should be signaled to the user. See MDN doc. +
+
+ TYPE:
+ |
+
text_shadow |
+
+
+
+ Specifies the shadow effect applied to text. See MDN doc. +
+
+ TYPE:
+ |
+
text_transform |
+
+
+
+ Specifies the transformation applied to text. See MDN doc. +
+
+ TYPE:
+ |
+
top |
+
+
+
+ Helps set vertical position of a positioned element. See MDN doc. +
+
+ TYPE:
+ |
+
transform |
+
+
+
+ Lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. See MDN doc. +
+
+ TYPE:
+ |
+
transition |
+
+
+
+ Specifies the transition effect. See MDN doc. +
+
+ TYPE:
+ |
+
vertical_align |
+
+
+
+ Specifies the vertical alignment of an element. See MDN doc. +
+
+ TYPE:
+ |
+
visibility |
+
+
+
+ Sets the visibility property. See MDN doc. +
+
+ TYPE:
+ |
+
white_space |
+
+
+
+ Specifies how white space inside an element is handled. See MDN doc. +
+
+ TYPE:
+ |
+
width |
+
+
+
+ Sets the width of the component. See MDN doc. +
+
+ TYPE:
+ |
+
word_wrap |
+
+
+
+ Specifies how long text can be broken up by new lines to prevent overflowing. See MDN doc. +
+
+ TYPE:
+ |
+
z-index |
+
+
+
+ Sets the z-index of the component. See MDN doc. +
+
+ TYPE:
+ |
+
Border
+
+
+ dataclass
+
+
+¶Defines the border styles for each side of a UI component.
+ + +| ATTRIBUTE | +DESCRIPTION | +
|---|---|
top |
+
+
+
+ Style for the top border. +
+
+ TYPE:
+ |
+
right |
+
+
+
+ Style for the right border. +
+
+ TYPE:
+ |
+
bottom |
+
+
+
+ Style for the bottom border. +
+
+ TYPE:
+ |
+
left |
+
+
+
+ Style for the left border. +
+
+ TYPE:
+ |
+
all
+
+
+ staticmethod
+
+
+¶Creates a Border instance with all sides having the same style.
+ + +| PARAMETER | +DESCRIPTION | +
|---|---|
value |
+
+
+
+ The style to apply to all sides of the border. +
+
+ TYPE:
+ |
+
| RETURNS | +DESCRIPTION | +
|---|---|
+ Border
+ |
+
+
+
+ A new Border instance with the specified style applied to all sides. +
+
+ TYPE:
+ |
+
symmetric
+
+
+ staticmethod
+
+
+¶Creates a Border instance with symmetric styles for vertical and horizontal sides.
+ + +| PARAMETER | +DESCRIPTION | +
|---|---|
vertical |
+
+
+
+ The style to apply to the top and bottom sides of the border. +
+
+ TYPE:
+ |
+
horizontal |
+
+
+
+ The style to apply to the right and left sides of the border. +
+
+ TYPE:
+ |
+
| RETURNS | +DESCRIPTION | +
|---|---|
+ Border
+ |
+
+
+
+ A new Border instance with the specified styles applied symmetrically. +
+
+ TYPE:
+ |
+
BorderSide
+
+
+ dataclass
+
+
+¶Represents the style of a single side of a border in a UI component.
+ + +| ATTRIBUTE | +DESCRIPTION | +
|---|---|
width |
+
+
+
+ The width of the border. Can be specified as an integer value representing pixels, + a string with a unit (e.g., '2em'), or None for no width. +
+
+ TYPE:
+ |
+
color |
+
+
+
+ The color of the border, represented as a string. This can be any valid CSS color value, + or None for no color. +
+
+ TYPE:
+ |
+
style |
+
+
+
+ The style of the border. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-style +
+
+ TYPE:
+ |
+
Margin
+
+
+ dataclass
+
+
+¶
+ Bases: _EdgeInsets
Defines the margin space around a UI component.
+ + +| ATTRIBUTE | +DESCRIPTION | +
|---|---|
top |
+
+
+
+ Top margin (note:
+
+ TYPE:
+ |
+
right |
+
+
+
+ Right margin +
+
+ TYPE:
+ |
+
bottom |
+
+
+
+ Bottom margin +
+
+ TYPE:
+ |
+
left |
+
+
+
+ Left margin +
+
+ TYPE:
+ |
+
all
+
+
+ staticmethod
+
+
+¶Creates a Margin instance with the same value for all sides.
+ + +| PARAMETER | +DESCRIPTION | +
|---|---|
value |
+
+
+
+ The value to apply to all sides of the margin. Can be an integer (pixel value) or a string. +
+
+ TYPE:
+ |
+
| RETURNS | +DESCRIPTION | +
|---|---|
+ Margin
+ |
+
+
+
+ A new Margin instance with the specified value applied to all sides. +
+
+ TYPE:
+ |
+
symmetric
+
+
+ staticmethod
+
+
+¶Creates a Margin instance with symmetric values for vertical and horizontal sides.
+ + +| PARAMETER | +DESCRIPTION | +
|---|---|
vertical |
+
+
+
+ The value to apply to the top and bottom sides of the margin. Can be an integer (pixel value) or a string. +
+
+ TYPE:
+ |
+
horizontal |
+
+
+
+ The value to apply to the right and left sides of the margin. Can be an integer (pixel value) or a string. +
+
+ TYPE:
+ |
+
| RETURNS | +DESCRIPTION | +
|---|---|
+ Margin
+ |
+
+
+
+ A new Margin instance with the specified values applied to the vertical and horizontal sides. +
+
+ TYPE:
+ |
+
Padding
+
+
+ dataclass
+
+
+¶
+ Bases: _EdgeInsets
Defines the padding space around a UI component.
+ + +| ATTRIBUTE | +DESCRIPTION | +
|---|---|
top |
+
+
+
+ Top padding (note:
+
+ TYPE:
+ |
+
right |
+
+
+
+ Right padding +
+
+ TYPE:
+ |
+
bottom |
+
+
+
+ Bottom padding +
+
+ TYPE:
+ |
+
left |
+
+
+
+ Left padding +
+
+ TYPE:
+ |
+
all
+
+
+ staticmethod
+
+
+¶Creates a Padding instance with the same value for all sides.
+ + +| PARAMETER | +DESCRIPTION | +
|---|---|
value |
+
+
+
+ The value to apply to all sides of the padding. Can be an integer (pixel value) or a string. +
+
+ TYPE:
+ |
+
| RETURNS | +DESCRIPTION | +
|---|---|
+ Padding
+ |
+
+
+
+ A new Padding instance with the specified value applied to all sides. +
+
+ TYPE:
+ |
+
symmetric
+
+
+ staticmethod
+
+
+¶Creates a Padding instance with symmetric values for vertical and horizontal sides.
+ + +| PARAMETER | +DESCRIPTION | +
|---|---|
vertical |
+
+
+
+ The value to apply to the top and bottom sides of the padding. Can be an integer (pixel value) or a string. +
+
+ TYPE:
+ |
+
horizontal |
+
+
+
+ The value to apply to the right and left sides of the padding. Can be an integer (pixel value) or a string. +
+
+ TYPE:
+ |
+
| RETURNS | +DESCRIPTION | +
|---|---|
+ Padding
+ |
+
+
+
+ A new Padding instance with the specified values applied to the vertical and horizontal sides. +
+
+ TYPE:
+ |
+
The viewport size API allows you to access the current viewport size. This can be useful for creating responsive and adaptive designs that are suitable for the user's screen size.
+Responsive design is having a single fluid layout that adapts to all screen sizes.
+You can use the viewport size to dynamically set the property of a style. This can be useful if you want to fit two boxes in a row for larger screens (e.g. desktop) and a single box for smaller screens (e.g. mobile) as shown in the example below:
+import mesop as me
+
+@me.page()
+def page():
+ if me.viewport_size().width > 640:
+ width = me.viewport_size().width / 2
+ else:
+ width = me.viewport_size().width
+ for i in range(8):
+ me.box(style=me.Style(width=width))
+++Tip: Responsive design tends to take less work and is usually a good starting point.
+
Adaptive design is having multiple fixed layouts for specific device categories at specific breakpoints, typically viewport width.
+For example, oftentimes you will hide the nav component on a mobile device and instead show a hamburger menu, while for a larger device you will always show the nav component on the left side.
+import mesop as me
+
+@me.page()
+def page():
+ if me.viewport_size().width > 480:
+ nav_component()
+ body()
+ else:
+ body(show_menu_button=True)
+++Tip: Adaptive design tends to take more work and is best for optimizing complex mobile and desktop experiences.
+
viewport_size
+
+¶Returns the current viewport size.
+ + +| RETURNS | +DESCRIPTION | +
|---|---|
+ Size
+ |
+
+
+
+ The current viewport size. +
+
+ TYPE:
+ |
+
Size
+
+
+ dataclass
+
+
+¶| ATTRIBUTE | +DESCRIPTION | +
|---|---|
width |
+
+
+
+ The width of the viewport in pixels. +
+
+ TYPE:
+ |
+
height |
+
+
+
+ The height of the viewport in pixels. +
+
+ TYPE:
+ |
+