Vuetify stepper labels

General
1

Hello,

I’ve just started out with JSONForms and I’m trying to create a stepper for a mobile friendly site using the Vuetify render set. The issue that I’m having is with label rendering. I want the stepper labels to disappear when I add the mobile flag to my UI schema.

"uischema":
    {
        "type": "Categorization",
        "elements":
        [
            {
                "type": "Category",
                "label": "Age",
                "elements":
                [
                    {
                        "type": "Control",
                        "scope": "#/properties/age"
                    }
                ]
            },
...
"options":
        {
            "variant": "stepper",
            "showNavButtons": true,
            "vertical": false,
            "vuetify": {
            	"v-stepper": {
            		"mobile": true
            	}
            }
        }
}

Unfortunately when I use the ‘label’ key the text gets rendered as a text node inside the v-stepper-item__content element and doesn’t get hidden by the css rules when the v-stepper--mobile class is added to the stepper container div. Ideally I’d like to populate the VStepperItem component slots for title and subtitle but I’m not clear on how to do this from the uischema?
Any help appreciated!

2

Hello @kfleming ,

You are right, currently the text is rendered in the stepper item’s default slot (see code below) and, thus, is not hidden when the mobile flag is set to true. I think we could change the code to render the label in the title slot instead allowing it to be hidden by the mobile flag. If you’d like, you can open a PR for that.

Unfortunately, you cannot currently set the title or subtitle directly via the UI Schema: The UI Schema only allows settings component props but not slots.

Kind regards,

Lucas