Блог

Главная - Вопросы по программированию - Сюжетно : Динамически создаваемый макет начальной загрузки Dash

Сюжетно : Динамически создаваемый макет начальной загрузки Dash

#python #plotly #plotly-dash

Вопрос:

Я пытаюсь динамически создать макет в стиле сетки, используя макет компонента начальной загрузки dash:

 from dash import dash_table, html, dcc
import dash_bootstrap_components as dbc

def create_cards(date):

    return dbc.Card(

         dbc.CardBody(
            [
                html.H4(date.strftime('%Y-%m-%d'), id=f"{date}-title"),
                html.H2(id=f"{date}-rent"),
            ]
         )
    )



dbc.Col(

                html.Div([

                    dbc.Row([
                        dbc.Col([create_cards(i) for i in range(5)]), width=4)
                    ], align='center', no_gutters=True),

                    dbc.Row([
                        dbc.Col([create_cards(i) for i in range(5)], width=4)
                    ], align='center', no_gutters=True),

                    dbc.Row([
                        dbc.Col([create_cards(i) for i in range(5)], width=4)
                    ], align='center', no_gutters=True),

                    dbc.Row([
                        dbc.Col([create_cards(i) for i in range(5)], width=4)
                    ], align='center', no_gutters=True)

                ]),

            width={"size": 7, "order": "last"}),

Результат этого не совсем в сеточном стиле. Вместо этого я получаю вертикально сложенные карты.

сложенные карты

Я хотел бы создать что-то вроде:

введите описание изображения здесь

Для справки,

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/card/

Комментарии:

1. Вы определили столбец, содержащий 4 строки. Чем это отличается от результата?

2. @павел В каждой строке я бы хотел сетку размером 4. Именно это я и пытаюсь сделать. Расположение сетки против вертикально сложенных карт. В моем коде есть проблемы, с которыми мне нужна помощь.

3. @павел добавил изображение в качестве примера.

4. Поэтому вам нужно добавить строку и 4 столбца внутри строки. Прямо сейчас вы делаете это наоборот. Проверьте самый первый пример в ссылке на макет, которую вы прикрепили.

5. Я предполагаю, что это должно быть что-то вроде dbc.Row([dbc.Col(create_cards(i)) for i in range(5)]) , потому что в настоящее время это написано так: вы создаете столбец и передаете ему список из 4 карточек.

Ответ №1:

Спасибо, @pavel

 dbc.Col(

                    html.Div([

                        dbc.Row([
                            dbc.Col([create_cards(i)], width=4) for i in range(5)
                        ], align='center', no_gutters=True),

                        dbc.Row([
                            dbc.Col([create_cards(i)], width=4) for i in range(5)
                        ], align='center', no_gutters=True),

                        dbc.Row([
                            dbc.Col([create_cards(i)], width=4) for i in range(5)
                        ], align='center', no_gutters=True),

                        dbc.Row([
                            dbc.Col([create_cards(i)], width=4) for i in range(5)
                        ], align='center', no_gutters=True)

                    ]),

                width={"size": 7, "order": "last"}),
Метки: