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

  • fix to topSlider (thx @gero1992)
Released
2019-04-12
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
Safari
Google Chrome
Internet Explorer

SliderPanel - Vaadin Add-on Directory

Panel that is able to get collapsed and expanded. It overlays the other content in expand mode. SliderPanel - Vaadin Add-on Directory
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: ```java 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](https://github.com/melistik/vaadin-sliderpanel/raw/master/assets/sliderpanel-layouting.png) 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](https://github.com/melistik/vaadin-sliderpanel/raw/master/assets/sliderpanel-wrong-sample.png) The Layouting of the SliderPanel is not made absolute because of the possibility to use it also within the layout: ![layout-variant](https://github.com/melistik/vaadin-sliderpanel/raw/master/assets/sliderpanel-layouting-variant.png)
Author Homepage
Source Code
Issue Tracker
Online Demo

SliderPanel version 1.0.0
first version, tested only ie11 please give feedback for lower versions of ie and opera

SliderPanel version 1.0.1
fixed maven group id

SliderPanel version 1.0.2
fixed widgetset compilation problem - now autodetection works

SliderPanel version 1.0.3
fixed maven problems

SliderPanel version 1.0.4
fixed problem if no stateChanges were sent before layout

SliderPanel version 1.0.5
- fixed problem with interaction within the slider-content (e.g. buttons were not clickable) - added buttons to the demo to show support - downgraded to java 1.6 in order to support older projects - downgraded to vaadin 7.2 now without HTML in caption (introduced in 7.4)

SliderPanel version 1.0.6
added schedule feature that is executed on client-side for expanding/collapsing the slider

SliderPanel version 1.0.7
solved click issue within the area around the sliderpanel-tab

SliderPanel version 1.1.0
- fixed animation of left slider - introduced some predesigned colors - allow to add custom styleNames

SliderPanel version 1.2.0
* allow content overflow by parameter (flowInContent) within configuration * introduced SliderPanelBuilder for fluent configuration * allow to overwrite conent height/width calculation via config param (fixedContentSize)

SliderPanel version 1.2.1
* allow content overflow by parameter (flowInContent) within configuration * introduced SliderPanelBuilder for fluent configuration * allow to overwrite conent height/width calculation via config param (fixedContentSize) * fixed wrong icon mapping

SliderPanel version 1.2.2
- added autoCollapse feature (when user click's outsite the slider it will collapse) - you need to enable it via the new SliderPanelBuilder(....).autoCollapseSlider(true) - fix some issues

SliderPanel version 1.3.0
- added autoCollapse feature (when user click's outsite the slider it will collapse) - you need to enable it via the new SliderPanelBuilder(….).autoCollapseSlider(true) - fix some issues and now works also with inner popovers like ComboBoxes

SliderPanel version 1.4.0
- mixins for custom styles - allow to configure z-index (for multipe SliderPanels) - improved api and minor css fixes - improved demo a lot and added documentation for custom styles

SliderPanel version 1.4.1
- mixins for custom styles - allow to configure z-index (for multipe SliderPanels) - improved api and minor css fixes - improved demo a lot and added documentation for custom styles

SliderPanel version 1.4.2
- working with grid now - thx to Matti Tahvonen

SliderPanel version 2.0.0
first vaadin 8 version

SliderPanel version 1.5.0
- added setEnabled feature - added setEnabledToggle to only disable slider expand/collape (content is still enabled!)

SliderPanel version 2.1.0
- added setEnabled support

SliderPanel version 2.2.0
- added setEnabledToggle to only disable slider expand/collape (content is still enabled!)

SliderPanel version 1.5.1
- fix to topSlider (thx @gero1992)

SliderPanel version 2.2.1
- fix to topSlider (thx @gero1992)

Online