How to make a component that can contain children like st.container?

nanpuhaha · July 8, 2023, 2:49am

I want to create a custom container component that takes style as an argument. Then, I can add various custom containers on one page, each with different colors and borders.

hansthen · December 19, 2023, 6:32am

Have a look at the streamlit-extras package, specifically the styled_container.

schnumbl · June 3, 2024, 2:06pm

Here is the link to the stylable container, showing usage of DeltaGenerator for a case without custom frontend code:

github.com

arnaudmiribel/streamlit-extras/blob/main/src/streamlit_extras/stylable_container/init.py

from __future__ import annotations

from typing import TYPE_CHECKING, List

import streamlit as st

from .. import extra

if TYPE_CHECKING:
    from streamlit.delta_generator import DeltaGenerator


@extra
def stylable_container(key: str, css_styles: str | List[str]) -> "DeltaGenerator":
    """
    Insert a container into your app which you can style using CSS.
    This is useful to style specific elements in your app.

    Args:
        key (str): The key associated with this container. This needs to be unique since all styles will be

This file has been truncated. show original

github.com

streamlit/streamlit/blob/develop/lib/streamlit/delta_generator.py

# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

"""Allows us to create and absorb changes (aka Deltas) to elements."""

from __future__ import annotations

import sys
from contextvars import ContextVar

This file has been truncated. show original

How can I access children in the frontend code of a custom component?

system · November 30, 2024, 2:06pm

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Custom component like st.expander Custom Components	1	1272	September 28, 2022
How to make a custom container like a button Using Streamlit debugging	4	373	November 30, 2024
Adding my own class on components Custom Components	5	2432	May 1, 2024
Streamlit fixed / sticky container Show the Community! css , components , container	1	1183	September 28, 2024
Insert streamlit button to custom streamlit component Custom Components	4	949	January 12, 2022

How to make a component that can contain children like st.container?

Related topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies