dmc 卡响应性 - 情节破折号

Question

我在破折号应用程序布局中有多个

dmc.card

项目。我已将它们设置为特定的高度和宽度。我还灌输了

base, sm, md, lg

值来考虑屏幕设置中的响应变化。

我正在尝试实现与传统

dbc.Card

相同的响应。也就是说，当屏幕尺寸减小时，卡片保持相同的布局，但宽度减小。

我不希望卡片分成单独的行。

有没有办法让

dmc.card

以同样的方式操作？

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd
import dash_mantine_components as dmc

external_stylesheets = [dbc.themes.COSMO, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets = external_stylesheets)

carddbc = dbc.Card(
    [
        dbc.CardBody(
            [
                html.P('', className = 'card-text'),
            ]
        ),
    ], 
    style = {'height':'100%'}
)

card1 = dmc.Card(
    html.Div(children = [
        dcc.Checklist(['','','','',''], 
                     ),
    ],
    ),
    w={"base": 100, "sm": 180,"md": 300, "lg": 300},
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    withBorder=True,
    shadow='sm',
    radius='md',
    h=275,
)

card2 = dmc.Card(
    html.Div(children = [
        dcc.Checklist(['','','','',''], 
                     ),
    ],
    ),
    w={"base": 100, "sm": 180,"md": 300, "lg": 300},
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    withBorder=True,
    shadow='sm',
    radius='md',
    h=275,
)

card3 = dmc.Card(
    html.Div(children = [
        dcc.Checklist(['','','','',''], 
                     ),
    ],
    ),
    w={"base": 100, "sm": 180,"md": 300, "lg": 300},
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    withBorder=True,
    shadow='sm',
    radius='md',
    h=275,
)

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
        ], xs = 2, sm = 2, md = 2, lg = 2
        ),
        dbc.Col([
            dbc.Row([
                dbc.Col(carddbc, width = {'size':3}),
                dbc.Col(carddbc, width = {'size':3}),
                dbc.Col(carddbc, width = {'size':3}),
            ], justify = 'center'),
            dbc.Row([
                dbc.Col([
                ], xs = 4, sm = 4, md = 4, lg = 4),
                dbc.Col([
                    dbc.Card([
                    dbc.CardBody([
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph()
                            ], 
                            ),
                            dbc.Row([
                            dbc.Col(html.Div(card1), className = ''),    
                            dbc.Col(html.Div(card2), className = ''),
                            dbc.Col(html.Div(card3), className = ''),
                            ]
                            )
                        ]),
                    ], 
                    )
                    ])
                ], xs = 8, sm = 8, md = 8, lg = 8),
            ])
        ], xs = 10, sm = 10, md = 10, lg = 10)
    ])
], fluid = True)


if __name__ == '__main__':
    app.run_server(debug = True)

Answer 1

您可以使用 Flexbox，而不是使用网格组件，这样所有的卡片都位于同一行

这会起作用

import dash
from dash import dcc, html
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc

external_stylesheets = [dbc.themes.COSMO, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


card_template = lambda: dmc.Card(
    html.Div(children=[dcc.Checklist(["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"])],),
    w={"base": 100, "sm": 180, "md": 300, "lg": 300},
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    withBorder=True,
    shadow='sm',
    radius='md',
    h=275,
)

card1 = card_template()
card2 = card_template()
card3 = card_template()

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col([], xs=2, sm=2, md=2, lg=2),  
                dbc.Col(
                    dbc.Row(
                        [
                            dbc.Col(card1, style={"flex": "1"}), 
                            dbc.Col(card2, style={"flex": "1"}),
                            dbc.Col(card3, style={"flex": "1"}),
                        ],
                        style={"display": "flex", "flex-wrap": "nowrap", "justify-content": "center"},  
                    ),
                    xs=10, sm=10, md=10, lg=10,  
                ),
            ],
            justify="center", 
        ),
    ],
    fluid=True, 
)

if __name__ == '__main__':
    app.run_server(debug=True)