Directory

← Back

SliderPanel

Panel that is able to get collapsed and expanded. It overlays the other content in expand mode.

Author

Rating

Popularity

<100

A Panel that slides in or out. All the time it's caption/tab is visible. Mainly it's a good way to display for example extra filter options when needed. A relayout of the content is not needed because in expand mode it lays over the rest of the content.

Main Features:

  • pur css design
  • nice collapse/expand animation
  • Listener for collapsed/expanded
  • schedule future collapse/expand on client side
  • customizable:
    • 4 different display modes
    • 3 different tab position
    • easy to change color and style by css
    • 5 pre designed colors (by SliderPanelStyles)
    • SliderNavigation element can flow within underlaying content or not
    • configure custom TabSize (need to change css as well!)
    • optional autoCollapse - when user clicks somewhere else

Version 1.1.x introduced some extra colors that you can use by adding styeNames to SliderPanel. The class SliderPanelStyles holds the style options. Further more you can place your custom StyleName in the same way...

Version 1.2.x introduced a fluent builder to configure SliderPanel:

SliderPanel sliderPanel = new SliderPanelBuilder(dummyContent("White Slider", 3))
  .caption("White Slider")
  .mode(SliderMode.TOP)
  .tabPosition(SliderTabPosition.MIDDLE)
  .style(SliderPanelStyles.COLOR_WHITE)
  .build();

Version 1.4.x rearranged the sass styling in order to use mixins and allow to overwrite defaults. The Sample contains an example how you can configure your custom styling.

Please take a look at github for samples and further explanations!

Layouting

layouting

It's important that you take care for the main layout. Use a combination of VerticalLayout and HorizontalLayout. The SliderPosition is only a hint for the component in which direction the slider should get expand. When you place for example as first component a SliderPanel with SliderMode.RIGHT to a HorizontalLayout and afterwards the middleContent with ExpandRatio(1) it will expand outside the visible browserarea.

wrong-sample

The Layouting of the SliderPanel is not made absolute because of the possibility to use it also within the layout:

layout-variant

Sample code

package org.vaadin.sliderpanel;

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.*;
import org.vaadin.sliderpanel.client.SliderMode;
import org.vaadin.sliderpanel.client.SliderPanelListener;
import org.vaadin.sliderpanel.client.SliderTabPosition;

@Theme("valo")
@Widgetset("org.vaadin.slidersample.Widgetset")
public class SliderPanelSampleUI extends UI {


       @Override
        protected void init(final VaadinRequest vaadinRequest) {
            final VerticalLayout mainLayout = new VerticalLayout();
            mainLayout.setSizeFull();
            mainLayout.setMargin(false);
            mainLayout.setSpacing(false);

            SliderPanel topSlider = new SliderPanelBuilder(genFilter())
                                            .expanded(false)
                                            .mode(SliderMode.TOP)
                                            .caption("Top Slider")
                                            .tabPosition(SliderTabPosition.END)
                                            .build();
            mainLayout.addComponent(topSlider);

            mainLayout.addComponent(genGrid());
                setContent(mainLayout);
        }

}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

first vaadin 8 version

Released
2017-02-24
Maturity
STABLE
License
MIT License

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.0+ in 1.0.0
Vaadin 7.3+ in 1.0.4
Vaadin 7.2+ in 1.0.5
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Internet Explorer
Microsoft Edge

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online