Skip to content

Is there are a way to handle custom "types" of theme variants? #6411

@tsyganov-vd

Description

@tsyganov-vd

Package

v4.x

Description

Hey there!
Thanks for a module, its really nice and useful.

But I have one problem.
For example - lets take a look on <UModal> component (or <UCard>).
Theme has just few variants: transition, fullscreen, overlay, scrollable. Thats all.
Imagine I need to add custom sizes for modals (or cards), lets say sm, md (defaul), lg.
For now, to achieve it - Im creating new custom wrapper component, like MyModal.vue, add my "size" prop, and pass all slots and props to child <UModal />.
So in this example - the only reason why <MyModal> exists - handle customization for sizes.

So my question is - is there are any way to add new "type of variants" for ui components?
I understand I can easily add new custom variants for existing one - lets say, I can add new "color" for UButton, or new variant "variant" (solid, soft etc). But if component have no variant "color" - I cant do anything with it at the moment.

And from that question I have a second one - how to handle my own "variants" the same way as I do for ui theme?
I have folder "theme" in app directory with configs for all components, and its imported and passed into app.config.
Can I handle my own props same way as variants, so my theming is centralized?
For example, when I add MyModal with prop "size" - can I handle it with theme config, and create new "my-modal" with variant "size"?

Or whats the best way to handle such behaviour?
Right now I dont really like the fact my theming is scattered across the project.
UI components - in theme config, custom components - in props or classes of the component itself.
And for modal in this example I need to look into both modal ui config and MyModal component classes. I wish to put it in one place.

Thanks in advance!

Metadata

Metadata

Assignees

No one assigned

    Labels

    questionFurther information is requestedv4#4488

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions