SliderPanel

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

View larger

Close

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

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.

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

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);
        }

}

Links

• Author Homepage
• Source Code
• Issue Tracker
• Online Demo

Compatibility