{ "app": { "version": "example/v1", "metadata": { "name": "style_trait", "description": "style trait demo" }, "spec": { "components": [ { "id": "root", "type": "chakra_ui/v1/root", "properties": {}, "traits": [] }, { "id": "tabs", "type": "chakra_ui/v1/tabs", "properties": { "tabNames": ["Tab One", "Tab Two"], "initialSelectedTabIndex": 1 }, "traits": [ { "type": "core/v1/slot", "properties": { "container": { "id": "root", "slot": "root" } } }, { "type": "core/v1/style", "properties": { "styleSlot": "tabItem", "style": "color: red" } }, { "type": "core/v1/style", "properties": { "styleSlot": "tabContent", "style": "color: green" } } ] }, { "id": "text1", "type": "core/v1/text", "properties": { "value": { "raw": "hover me", "format": "plain" } }, "traits": [ { "type": "core/v1/slot", "properties": { "container": { "id": "tabs", "slot": "content" } } } ] }, { "id": "text2", "type": "core/v1/text", "properties": { "value": { "raw": "hover me2", "format": "plain" } }, "traits": [ { "type": "core/v1/slot", "properties": { "container": { "id": "tabs", "slot": "content" } } } ] } ] } } }