Rounded Corners in Dashboard 2.0 Groups

README.md

This flow shows a demonstration of how to render rounded corners on a Dashboard 2.0 Group:

flow.json

[
    {
        "id": "009dbde0f6a7e3a0",
        "type": "tab",
        "label": "Rounded Corners Example",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "027ae44031380a15",
        "type": "ui-markdown",
        "z": "009dbde0f6a7e3a0",
        "group": "39bf532634d939ce",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "content": "# Rounded Corners Example\n\n1. Add a `ui-template` node\n2. Choose the \"CSS (Single Page)\" or \"CSS (All Pages)\" option, whichever is appropriate for your use case.\n3. In the \"Template\" text input write:\n\n```css\n.nrdb-ui-group .v-card {\n    border-radius: 24px;\n}\n```\n\n4. Deploy",
        "className": "",
        "x": 150,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "94c3f04762aa91b9",
        "type": "ui-template",
        "z": "009dbde0f6a7e3a0",
        "group": "6a1709cc60dbf88d",
        "dashboard": "c2e1aa56f50f03bd",
        "page": "7028098c1453a838",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": ".nrdb-ui-group .v-card {\n    border-radius: 24px;\n}",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "page:style",
        "className": "",
        "x": 150,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "39bf532634d939ce",
        "type": "ui-group",
        "name": "Rounded Corners Example",
        "page": "7028098c1453a838",
        "width": "6",
        "height": "1",
        "order": -1,
        "disp": false,
        "className": ""
    },
    {
        "id": "6a1709cc60dbf88d",
        "type": "ui-group",
        "name": "Array/Object Data",
        "page": "830014393540ffda",
        "width": "9",
        "height": "1",
        "order": -1,
        "disp": true
    },
    {
        "id": "7028098c1453a838",
        "type": "ui-page",
        "name": "Reddit Support",
        "ui": "c2e1aa56f50f03bd",
        "path": "/reddit",
        "layout": "grid",
        "theme": "129e99574def90a3",
        "order": -1,
        "className": ""
    },
    {
        "id": "830014393540ffda",
        "type": "ui-page",
        "name": "Data Visualisation Examples",
        "ui": "c2e1aa56f50f03bd",
        "path": "/graphs",
        "layout": "grid",
        "theme": "129e99574def90a3",
        "order": -1,
        "className": "test"
    },
    {
        "id": "129e99574def90a3",
        "type": "ui-theme",
        "name": "Another Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        }
    }
]