Сетка приборной панели с приборной панелью - PullRequest
Новая
       20

Сетка приборной панели с приборной панелью

1 голос
/ 19 февраля 2020

Я пытаюсь построить приборную панель с Da sh из Plotly, состоящую из серии плиток (текст), как на картинке ниже.

Я пытаюсь собрать компонент для повторного использования, чтобы построить макет ниже. Каждое поле будет содержать заголовок, значение и описание, как показано ниже.

Есть ли доступный компонент? Может ли кто-нибудь помочь мне с любой базовой c идеей / кодом?

Заранее спасибо!

enter image description here

1 Ответ

1 голос
/ 19 февраля 2020

Я бы рекомендовал проверить Да sh Bootstrap Компоненты (дБ c).

Вы можете использовать dbc.Col (столбцы) компоненты, вложенные в dbc.Row (строки) компоненты для создания вашего макета. Вы можете проверить их здесь .

Затем для настоящих «карт», как я их назову, вы можете использовать компонент dbc.Card. Вот ссылка .

Вот пример кода, копирующего ваш макет: 

import dash_bootstrap_components as dbc
import dash_html_components as html

card = dbc.Card(
    dbc.CardBody(
        [
            html.H4("Title", id="card-title"),
            html.H2("100", id="card-value"),
            html.P("Description", id="card-description")
        ]
    )
)

layout = html.Div([
    dbc.Row([
        dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card])
    ]),
    dbc.Row([
        dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card])
    ]),
    dbc.Row([
        dbc.Col([card]), dbc.Col([card])
    ])
])

Лучше всего было бы иметь функцию, которая создает карты с параметрами для идентификаторов. , названия и описания, чтобы избавить вас от необходимости создавать различные карты: 

def create_card(card_id, title, description):
    return dbc.Card(
        dbc.CardBody(
            [
                html.H4(title, id=f"{card_id}-title"),
                html.H2("100", id=f"{card_id}-value"),
                html.P(description, id=f"{card_id}-description")
            ]
        )
    )

Затем вы можете просто заменить каждый card на create_card('id', 'Title', 'Description'), как вам угодно.

Еще один быстрый совет: компонент col имеет параметр width. Вы можете присвоить каждому столбцу строки различное значение, чтобы настроить относительную ширину. Вы можете прочитать больше об этом в документах, которые я связал выше.

Надеюсь, это поможет,

Oll ie

...