How to apply custom style on this component with @CssImport I tried ``

Directory SlideTab
1

How to apply custom style on this component with @CssImport

I tried

@CssImport(value = "frontend://styles/slider-tab.css",themeFor = "slide-tab")

And content:

:host{
  background-color: white !important;
    background:white !important;
}

And it does not work. How to style #content or #tab div’s with id’s.

p.s. it works great (migrating from v8)

2

Hi Tadej,

Unfortunately, the component does not implement Vaadin’s ThemableMixin required for that approach to work, but it’s an improvement I could make.

However, you can control at least the background and text color with the following properties

--slide-tab-color
--slide-tab-background-color

See examples here

https://github.com/eriklumme/vaadin-slidetab/blob/master/src/main/resources/META-INF/resources/frontend/styles/demo-styles.css

3

Ah ok i see. I was pulling my hair out hehe. It should work, cause i have styled other components like this and it worked.

If you could do that, that could be major improvement and i am sure that other developers would be grateful for this.

The problem is we have custom theme for company application and it is too little to customize.

4

Hi Tadej!

I added the ThemableMixin now in version 2.0.1, try it out and tell me how it works for you. :)

There are two stylable parts, “tab” and “content”. Check out the usage [on GitHub]
(https://github.com/eriklumme/vaadin-slidetab/blob/master/src/main/resources/META-INF/resources/frontend/styles/demo-slide-tab-styles.css).

5

That was fast. Epyc stuff.

I will try it on monday morning.

Thanks !!!

6

How can i change this part:

 <div part="tab" id="tab" on-click="toggle">
            [[caption]
]
            <iron-icon id="expand" icon="vaadin:vaadin:plus-circle"></iron-icon>
            <iron-icon id="collapse" icon="vaadin:vaadin:minus-circle"></iron-icon>
        </div>

We want different icon instead of plus or minus.

7

Just released version 2.1.1 with the methods setExpandComponent and setCollapseComponent, hopefully that works out for you!

Have a look here
https://github.com/eriklumme/vaadin-slidetab/blob/master/src/test/java/org/vaadin/erik/DemoView.java#L165