public class Responsive extends AbstractExtension
NOTE! You should always specify a relative (%) size for the extended component, doing otherwise will prevent the Responsive extension from working, as the component will not dynamically resize.
All configuration of the visual breakpoints (ranges) for the component are done with CSS. Pixels (px) are the only supported unit. Fractional pixels are not supported.
Dynamic style injections (e.g. through
Page.getCurrent().getStyles().add(...)) or any other style
updates after the initial page load are not supported at the moment.
Example: Java
CssLayout layout = new CssLayout();
layout.setStyleName("responsive");
layout.setSizeFull();
Responsive.makeResponsive(layout);
SCSS
.v-csslayout.responsive {
&[width-range~="0-300px"] {
// Styles for the layout when its width is between 0 and 300 pixels
}
&[width-range~="301-500px"] {
// Styles for the layout when its width is between 301 and 500 pixels
}
&[width-range~="501px-"] {
// Styles for the layout when its width is over 500 pixels
}
&[height-range~="0-300px"] {
// Styles for the layout when its height is between 0 and 300 pixels
}
&[height-range~="301-500px"] {
// Styles for the layout when its height is between 301 and 500 pixels
}
&[height-range~="501-"] {
// Styles for the layout when its height is over 500 pixels
}
}
CSS
.v-csslayout.responsive[width-range~="0-300px"] {
// Styles for the layout when its width is between 0 and 300 pixels
}
.v-csslayout.responsive[width-range~="301-500px"] {
// Styles for the layout when its width is between 301 and 500 pixels
}
.v-csslayout.responsive[width-range~="501-"] {
// Styles for the layout when its width is over 500 pixels
}
.v-csslayout.responsive[height-range~="0-300px"] {
// Styles for the layout when its height is between 0 and 300 pixels
}
.v-csslayout.responsive[height-range~="301-500px"] {
// Styles for the layout when its height is between 301 and 500 pixels
}
.v-csslayout.responsive[height-range~="501px-"] {
// Styles for the layout when its height is over 500 pixels
}
Note: The defined ranges are applied on a global context, so even if you would write your CSS to target only a given context, the ranges would be applied to all other instances with the same style name.
E.g. this would affect all CssLayout instances in the application, even though the CSS implies it would only affect CssLayout instances inside a parent with a style name "foobar":
.foobar .v-csslayout[width-range~="0px-100px"] {
// These properties will affect all responsive CssLayout instances
}
To scope the ranges, use an additional style name for the target component, and add that to your CSS selector:
.v-csslayout.mystyle[width-range="0px-100px"] {
// These properties will only affect responsive CssLayout instances with an additional style name of 'mystyle'
}
ClientConnector.AttachEvent, ClientConnector.AttachListener, ClientConnector.ConnectorErrorEvent, ClientConnector.DetachEvent, ClientConnector.DetachListener| Modifier | Constructor and Description |
|---|---|
protected |
Responsive()
Creates a new instance, which can be used to extend a component.
|
| Modifier and Type | Method and Description |
|---|---|
protected ResponsiveState |
getState()
Returns the shared state for this connector.
|
protected ResponsiveState |
getState(boolean markAsDirty)
Returns the shared state for this connector.
|
static void |
makeResponsive(Component... components)
Enable responsive width and height range styling for the target component
or UI instance.
|
extend, getParent, getSupportedParentType, remove, setParentaddAttachListener, addDetachListener, addExtension, addListener, addListener, addListener, addMethodInvocationToQueue, attach, beforeClientResponse, createState, detach, encodeState, equals, fireEvent, getAllChildrenIterable, getConnectorId, getErrorHandler, getExtensions, getListeners, getResource, getRpcManager, getRpcProxy, getSession, getStateType, getUI, handleConnectorRequest, hashCode, hasListeners, isAttached, isConnectorEnabled, isThis, markAsDirty, markAsDirtyRecursive, registerRpc, registerRpc, removeAttachListener, removeDetachListener, removeExtension, removeListener, removeListener, removeListener, removeListener, requestRepaint, requestRepaintAll, retrievePendingRpcCalls, setErrorHandler, setResource, updateDiffstateclone, finalize, getClass, notify, notifyAll, toString, wait, wait, waitaddAttachListener, addDetachListener, attach, beforeClientResponse, detach, encodeState, getErrorHandler, getExtensions, getRpcManager, getStateType, getUI, handleConnectorRequest, isAttached, isConnectorEnabled, markAsDirty, markAsDirtyRecursive, removeAttachListener, removeDetachListener, removeExtension, requestRepaint, requestRepaintAll, retrievePendingRpcCalls, setErrorHandlergetConnectorIdprotected Responsive()
public static void makeResponsive(Component... components)
components - The components which should be able to respond to width and/or
height changes.protected ResponsiveState getState()
AbstractClientConnector
As a side effect, marks the connector dirty so any changes done to the
state will be sent to the client. Use getState(false) to avoid
marking the connector as dirty.
getState in class AbstractClientConnectorprotected ResponsiveState getState(boolean markAsDirty)
AbstractClientConnectorgetState in class AbstractClientConnectormarkAsDirty - true if the connector should automatically be marked dirty,
false otherwiseAbstractClientConnector.getState()Copyright © 2018 Vaadin Ltd. All rights reserved.