配置主题

对于没有进行过任何特殊配置的组件，其主题默认配置为"default"。

代码

not_themed_example.py

import dash
import dash_json_grid as djg


app = dash.Dash("demo")
app.layout = djg.DashJsonGrid(
    data=[
        {"key1": 1, "key2": "str"},
        {"key1": True, "key2": None},
        {"key1": 3.0},
        {"key1": False, "key2": None, "key3": 4.0},
        {"key5": "?"},
    ]
)

if __name__ == "__main__":
    app.run()

结果

Dash应用应当呈现出以下结果：

	key1	key2	key3	key5
1	1	str	undefined	undefined
2	true	null	undefined	undefined
3	3	undefined	undefined	undefined
4	false	null	4	undefined
5	undefined	undefined	undefined	?

配置主题名称

可以透过主题名称(str)来配置主题。对于上例，只需添加参数theme="moonLight"即可改为另一主题。

代码

...
app.layout = djg.DashJsonGrid(
    data=[
        {"key1": 1, "key2": "str"},
        {"key1": True, "key2": None},
        {"key1": 3.0},
        {"key1": False, "key2": None, "key3": 4.0},
        {"key5": "?"},
    ],
    theme="moonLight",
)
...

结果

Dash应用应当呈现出以下结果：

	key1	key2	key3	key5
1	1	str	undefined	undefined
2	true	null	undefined	undefined
3	3	undefined	undefined	undefined
4	false	null	4	undefined
5	undefined	undefined	undefined	?

可用的主题名称包括：

[
    "default", "dracula", "monokai", "oceanicPark", "panda",
    "gruvboxMaterial", "tokyoNight", "remedy", "atlanticNight",
    "defaultLight", "defaultLight2", "slime", "spacegray",
    "blueberryDark", "nord", "nightOwl", "oneMonokai", "cobaltNext",
    "shadesOfPurple", "codeBlue", "softEra", "atomMaterial",
    "evaDark", "moonLight", "unset", "inherit"
]

以下展示的范例，可以作为帮助用户预览各种主题，并选择合适主题的工具：

主题： defaultdraculamonokaioceanicParkpandagruvboxMaterialtokyoNightremedyatlanticNightdefaultLightdefaultLight2slimespacegrayblueberryDarknordnightOwloneMonokaicobaltNextshadesOfPurplecodeBluesoftEraatomMaterialevaDarkmoonLightinheritunset

	key1	key2	key3	key5
1	1	str	undefined	undefined
2	true	null	undefined	undefined
3	3	undefined	undefined	undefined
4	false	null	4	undefined
5	undefined	undefined	undefined	?

配置主题字典

要针对主题的某一部分样式进行配置，可以使用一个含有类型标记的字典：

代码

...
app.layout = djg.DashJsonGrid(
    data=[
        {"key1": 1, "key2": "str"},
        {"key1": True, "key2": None},
        {"key1": 3.0},
        {"key1": False, "key2": None, "key3": 4.0},
        {"key5": "?"},
    ],
    theme=djg.ThemeConfigs(
        bgColor="#f5f5f5",
        booleanColor="#007acc",
        borderColor="#d3d3d3",
        cellBorderColor="#c0c0c0",
        indexColor="#666666",
        keyColor="#333333",
        numberColor="#007acc",
        objectColor="#333333",
        searchHighlightBgColor="#cccccc",
        selectHighlightBgColor="#e0e0e0",
        stringColor="#2ca22c",
        tableHeaderBgColor="#dddddd",
        tableIconColor="#333333",
    ),
)
...

代码中高亮的djg.ThemeConfigs(...)属于TypedDict类型。

结果

Dash应用应当呈现出以下结果：

	key1	key2	key3	key5
1	1	str	undefined	undefined
2	true	null	undefined	undefined
3	3	undefined	undefined	undefined
4	false	null	4	undefined
5	undefined	undefined	undefined	?

将参数配置为theme=inherit并使用全局样式表

若用户更青睐于利用全局CSS/SCSS样式表来配置主题，可以采取将组件参数设置为theme=inherit，并于样式表中增加如下配置

body .special-djg-style {
  --jg-bg-color: #fff;
  --jg-border-color: #a5a5a5;
  --jg-cell-border-color: #ddd;
  --jg-key-color: #32373b;
  --jg-index-color: #00f;
  --jg-number-color: #007acc;
  --jg-boolean-color: #00f;
  --jg-string-color: #a31515;
  --jg-object-color: #00009f;
  --jg-table-header-bg-color: #ddd;
  --jg-table-icon-color: #333;
  --jg-select-highlight-bg-color: #c1def133;
  --jg-search-highlight-bg-color: #8885;
}

样式配置完成后，组件定义如下：

代码

from dash import html
...
app.layout = html.Div(
    className="special-djg-style",
    children=djg.DashJsonGrid(
        data=[
            {"key1": 1, "key2": "str"},
            {"key1": True, "key2": None},
            {"key1": 3.0},
            {"key1": False, "key2": None, "key3": 4.0},
            {"key5": "?"},
        ],
        theme="inherit",
    )
)
...

结果

Dash应用应当呈现出以下结果：

	key1	key2	key3	key5
1	1	str	undefined	undefined
2	true	null	undefined	undefined
3	3	undefined	undefined	undefined
4	false	null	4	undefined
5	undefined	undefined	undefined	?

信息

使用"inherit" | "unset"配置主题，是dash-json-grid自v0.3.2后提供的新特性。原项目(react-json-grid)提供的组件并不支持这种配置。