SliderPanel
Panel that is able to get collapsed and expanded. It overlays the other content in expand mode.
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
Compatibility
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.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)