Class WBootstrap5Theme
This theme implements support for building a JWt web application that uses Bootstrap 5 as a theme for its (layout and) styling.
Using this theme, various widgets provided by the library are rendered using markup that is compatible with Bootstrap 5. The bootstrap theme is also extended with a proper (compatible) styling of widgets for which bootstrap does not provide styling (table views, tree views, sliders, etc...).
By default, the theme will use CSS and JavaScript resources that are shipped together with the
JWt distribution, but you can replace the CSS with custom-built CSS by reimplementing getStyleSheets()
.
Although this theme styles individual widgets correctly, for your web application's
layout you are recommended to use WTemplate
in conjunction with Bootstrap's CSS
classes. For this we refer to Bootstrap's documentation at https://getbootstrap.com.
Custom Sass files can be used to make your own derived theme.
If JWt is installed into PREFIX
(and the CMake option INSTALL_THEMES
is set to ON
), then you can find the source files in
PREFIX/share/Wt/themes/bootstrap/5
.
Apart from the variables that Bootstrap defines, JWt also provides variables, defined in
wt/_variables.scss
. All of JWt's variables start with a wt-
prefix.
Refer to the example in examples/custom-bs-theme
for more information.
- See Also:
-
Nested Class Summary
Nested classes/interfaces inherited from class eu.webtoolkit.jwt.WObject
WObject.FormData
-
Constructor Summary
Constructors -
Method Summary
Modifier and TypeMethodDescriptionvoid
apply
(WWidget widget, DomElement element, int elementRole) Applies the theme to a DOM element that renders a widget.void
Applies the theme to a child of a composite widget.void
applyValidationStyle
(WWidget widget, WValidator.Result validation, EnumSet<ValidationStyleFlag> styles) Applies a style that indicates the result of validation.boolean
canBorderBoxElement
(DomElement element) Returns a generic CSS class name for an active element.Returns a generic CSS class name for a disabled element.getName()
Returns a theme name.Returns which side theWPanel
collapse icon should be added on.Returns the URL where theme-related resources are stored.Returns a vector with stylesheets for the theme.void
init
(WApplication app) Called when the theme is assigned to aWApplication
.boolean
Returns whether the theme allows for an anchor to be styled as a button.utilityCssClass
(int utilityCssClassRole) Returns a generic CSS class name for the chosen role.Methods inherited from class eu.webtoolkit.jwt.WTheme
applyValidationStyle, serveCss
Methods inherited from class eu.webtoolkit.jwt.WObject
getId, getObjectName, remove, setFormData, setObjectName, tr
-
Constructor Details
-
WBootstrap5Theme
public WBootstrap5Theme()Constructor.
-
-
Method Details
-
init
Description copied from class:WTheme
Called when the theme is assigned to aWApplication
.This allows the theme to do things like load resource bundles when it is added to an application using
WApplication#setTheme()
.The default implementation does nothing.
-
getName
Description copied from class:WTheme
Returns a theme name.Returns a unique name for the theme. This name is used by the default implementation of
getResourcesUrl()
to compute a location for the theme's resources. -
getResourcesUrl
Description copied from class:WTheme
Returns the URL where theme-related resources are stored.The default implementation considers a folder within JWt's resource directory, based on the theme
getName()
.- Overrides:
getResourcesUrl
in classWTheme
-
getStyleSheets
Description copied from class:WTheme
Returns a vector with stylesheets for the theme.This should return a vector with stylesheets that implement the theme. This list may be tailored to the current user agent, which is read from the application environment.
- Specified by:
getStyleSheets
in classWTheme
-
apply
Description copied from class:WTheme
Applies the theme to a child of a composite widget.The
widgetRole
indicates the role thatchild
has within the implementation of thewidget
. -
apply
Description copied from class:WTheme
Applies the theme to a DOM element that renders a widget.The
element
is a rendered representation of thewidget
, and may be further customized to reflect the theme. -
getDisabledClass
Description copied from class:WTheme
Returns a generic CSS class name for a disabled element.- Specified by:
getDisabledClass
in classWTheme
-
getActiveClass
Description copied from class:WTheme
Returns a generic CSS class name for an active element.- Specified by:
getActiveClass
in classWTheme
-
utilityCssClass
Description copied from class:WTheme
Returns a generic CSS class name for the chosen role.- Specified by:
utilityCssClass
in classWTheme
-
isCanStyleAnchorAsButton
public boolean isCanStyleAnchorAsButton()Description copied from class:WTheme
Returns whether the theme allows for an anchor to be styled as a button.- Specified by:
isCanStyleAnchorAsButton
in classWTheme
-
applyValidationStyle
public void applyValidationStyle(WWidget widget, WValidator.Result validation, EnumSet<ValidationStyleFlag> styles) Description copied from class:WTheme
Applies a style that indicates the result of validation.- Specified by:
applyValidationStyle
in classWTheme
-
canBorderBoxElement
- Specified by:
canBorderBoxElement
in classWTheme
-
getPanelCollapseIconSide
Description copied from class:WTheme
Returns which side theWPanel
collapse icon should be added on.Side is assumed to be
Side.Left
orSide.Right
, other sides are not supported.- Overrides:
getPanelCollapseIconSide
in classWTheme
-