主页 / coding / 问题 / 79291512
Accepted
gernophil
Asked: 2024-12-18 22:48:15 +0800 CST

使用 CSS 为 Shiny for Python 提供 ui.tags.style

  • 772

我想用 CSS 为我的 Shiny 的 Python 输入字段设置样式，但不知何故它不起作用。不过我可以设置卡片标题的样式。有人知道我做错了什么吗？或者 ui.input* 元素不能直接设置样式吗？

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 个回答

  1. Best Answer

    input您可以根据其类型定位，input[type = 'text']例如ui.input_text()（另请参阅： MDN 文档中的<input>HTML 输入元素ui.input_selectize()）。但是， 的工作方式略有不同，在这里您可以使用.selectize-input。

    例如：

    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)

    在此处输入图片描述

    • 0

相关问题