Início / coding / Perguntas / 79291512
Accepted
gernophil
Asked: 2024-12-18 22:48:15 +0800 CST

Use CSS para Shiny para Python com ui.tags.style

  • 772

Quero estilizar CSS meu Shiny para campos de entrada Python, mas de alguma forma não funciona. No entanto, posso estilizar os cabeçalhos do cartão. Alguém sabe o que estou fazendo errado? Ou os elementos ui.input* não podem ser estilizados diretamente?

from shiny import App, render, ui, reactive
from pathlib import Path


app_ui = ui.page_fillable(
    ui.panel_title(
        ui.row(
        ui.column(12, ui.h1("title1")),
        )
    ),
    ui.layout_sidebar(
        ui.sidebar(
            ui.input_text("input_text1", "input_text1", value=""),
            ui.input_selectize("input_selectize1", "input_selectize1", choices=["1", "2"]),
            ui.input_numeric("input_numeric1", "input_numeric1", value=4),
            ui.input_switch("input_switch1", "input_switch1", value=False),
            ui.input_action_button("input_action_button1", "input_action_button1"),
            width="350px"
        ),
        ui.layout_columns(
            ui.card(
                ui.card_header("card_header1"),
                ui.output_data_frame("card1"),
                full_screen=True
            ),
            col_widths=12
        )
    ),
    ui.tags.style(
    ".card-header { color:white; background:#2A2A2A !important; }",
    ".input-text { color:red; height:0px; }",
    ".input-numeric { color:red; height:0px; }")
)


def server(input, output, session):

    @reactive.event(input.input_action_button1)
    def reactive_function1():
        pass

    @output
    @render.data_frame
    def card1():
        return reactive_function1()

src_dir = Path(__file__).parent / "src"
app = App(app_ui, server, static_assets=src_dir)
python

1 respostas

  1. Best Answer

    Você pode direcionar um inputpor seu tipo, por exemplo, input[type = 'text']para o ui.input_text()(veja também <input>: O elemento HTML Input dentro do MDN Docs). O ui.input_selectize(), no entanto, funciona um pouco diferente, aqui você pode usar .selectize-input.

    Um exemplo seria este:

    from shiny import App, render, ui, reactive
from pathlib import Path

app_ui = ui.page_fillable(
    ui.panel_title(
        ui.row(
        ui.column(12, ui.h1("title1")),
        )
    ),
    ui.layout_sidebar(
        ui.sidebar(
            ui.input_text("input_text1", "input_text1", value=""),
            ui.input_selectize("input_selectize1", "input_selectize1", choices=["1", "2"]),
            ui.input_numeric("input_numeric1", "input_numeric1", value=4),
            ui.input_switch("input_switch1", "input_switch1", value=False),
            ui.input_action_button("input_action_button1", "input_action_button1"),
            width="350px"
        ),
        ui.layout_columns(
            ui.card(
                ui.card_header("card_header1"),
                ui.output_data_frame("card1"),
                full_screen=True
            ),
            col_widths=12
        )
    ),
    ui.tags.style(
    ".card-header { color:white; background:#2A2A2A !important; }",
    "input[type = 'text'] { background-color:red; height:0px; }",
    "input[type = 'number'] { background-color:green; }",
    ".selectize-input { background-color:yellow !important; height:0px; }")
)


def server(input, output, session):

    @reactive.event(input.input_action_button1)
    def reactive_function1():
        pass

    @output
    @render.data_frame
    def card1():
        return reactive_function1()

src_dir = Path(__file__).parent / "src"
app = App(app_ui, server, static_assets=src_dir)

    insira a descrição da imagem aqui

    • 0

relate perguntas