and use for multiple
* lines of code. Angle brackets will be escaped in the code for proper rendering.
*
@@ -45,174 +44,175 @@
* @author Michael Haitz
*/
public class CodeBehavior extends Behavior {
- private static final long serialVersionUID = 1L;
+
+ private static final long serialVersionUID = 1L;
+
+ /**
+ * enum that holds all possible languages
+ */
+ public enum Language implements ICssClassNameProvider {
+ DYNAMIC, // use this or don't set a lang for auto detection
+
+ // auto detected
+ BSH, C, CC, CPP, CS, CSH, CYC, CV, HTM, HTML,
+ JAVA, JS, M, MXML, PERL, PL, PM, PY, RB, SH,
+ XHTML, XML, XSL,
+
+ // plugins
+ APOLLO, BASIC, CLJ, CSS, DART, ERLANG, GO, HS, LISP,
+ LLVM, LUA, MATLAB, ML, MUMPS, N, PASCAL, PROTO, R, RD,
+ SCALA, SQL, TCL, TEX, VB, VHDL, WIKI, XQ, YAML;
+
+ @Override
+ public String cssClassName() {
+ if (!DYNAMIC.equals(this)) {
+ return "lang-" + name().toLowerCase();
+ }
+
+ return "";
+ }
+
+ }
+
+ private final IModel lineNumbers;
+ private final IModel cssClassNameModel;
+ private final IModel language;
+ private final IModel from;
+
+ private final CssClassNameAppender cssClassNameAppender;
+
+ /**
+ * Constructor.
+ */
+ public CodeBehavior() {
+ super();
+
+ lineNumbers = Model.of(false);
+ cssClassNameModel = Model.of("");
+ language = Model.of(Language.DYNAMIC);
+ from = Model.of(0);
+
+ cssClassNameAppender = new CssClassNameAppender(cssClassNameModel);
+ }
+
+ @Override
+ public void detach(Component component) {
+ super.detach(component);
+
+ lineNumbers.detach();
+ cssClassNameModel.detach();
+ language.detach();
+ from.detach();
+ }
+
+ @Override
+ public void renderHead(final Component component, final IHeaderResponse response) {
+ super.renderHead(component, response);
+
+ response.render(CssHeaderItem.forReference(PrettifyCssResourceReference.INSTANCE));
+
+ References.renderWithFilter(Bootstrap.getSettings(), response, JavaScriptHeaderItem.forReference(PrettifyJavaScriptReference.INSTANCE));
+
+ response.render(OnDomReadyHeaderItem.forScript(createInitializerScript(Strings2.getMarkupId(component))));
+ }
+
+ private CharSequence createInitializerScript(CharSequence markupId) {
+ return "$('#" + markupId + "').html(PR.prettyPrintOne($('#" + markupId + "').html(), '', $('#" + markupId + "').attr('class')));";
+ }
+
+ @Override
+ public void bind(final Component component) {
+ super.bind(component);
+
+ BootstrapBaseBehavior.addTo(component);
+ component.add(cssClassNameAppender);
+ }
+
+ @Override
+ public void unbind(final Component component) {
+ super.unbind(component);
+
+ BootstrapBaseBehavior.removeFrom(component);
+ component.remove(cssClassNameAppender);
+ }
+
+ /**
+ * {@inheritDoc}
+ */
+ @Override
+ public void onConfigure(final Component component) {
+ super.onConfigure(component);
+
+ cssClassNameModel.setObject(createCssClassNames());
+ }
+
+ /**
+ * @return a list of css class names
+ */
+ private String createCssClassNames() {
+ return CssClassNames.parse("prettyprint").add(
+ createLineNumbersCssClass(),
+ language.getObject().cssClassName()).asString();
+ }
+
+ /**
+ * @return the css class name for the line number class
+ */
+ private String createLineNumbersCssClass() {
+ if (hasLineNumbers()) {
+ return "linenums" + (from.getObject() > 0 ? ":" + from.getObject() : "");
+ }
+
+ return "";
+ }
+
+ /**
+ * @return true, if line numbers will be rendered
+ */
+ public final boolean hasLineNumbers() {
+ return lineNumbers.getObject();
+ }
+
+ /**
+ * adds line numbers on the left side of code block.
+ *
+ * @return this instance
+ */
+ public final CodeBehavior setShowLineNumbers(final boolean showLineNumbers) {
+ this.lineNumbers.setObject(showLineNumbers);
+
+ return this;
+ }
+
+ /**
+ * defines from which line number the counting will start.
+ *
+ * @param from which line the numbers will count
+ * @return this instance
+ */
+ public final CodeBehavior setStartFromLine(final int from) {
+ setShowLineNumbers(true);
+ this.from.setObject(from);
+
+ return this;
+ }
/**
- * enum that holds all possible languages
- */
- public enum Language implements ICssClassNameProvider {
- DYNAMIC, // use this or don't set a lang for auto detection
-
- // auto detected
- BSH, C, CC, CPP, CS, CSH, CYC, CV, HTM, HTML,
- JAVA, JS, M, MXML, PERL, PL, PM, PY, RB, SH,
- XHTML, XML, XSL,
-
- // plugins
- APOLLO, BASIC, CLJ, CSS, DART, ERLANG, GO, HS, LISP,
- LLVM, LUA, MATLAB, ML, MUMPS, N, PASCAL, PROTO, R, RD,
- SCALA, SQL, TCL, TEX, VB, VHDL, WIKI, XQ, YAML;
-
- @Override
- public String cssClassName() {
- if (!DYNAMIC.equals(this)) {
- return "lang-" + name().toLowerCase();
- }
-
- return "";
- }
-
- }
-
- private final IModel lineNumbers;
- private final IModel cssClassNameModel;
- private final IModel language;
- private final IModel from;
-
- private final CssClassNameAppender cssClassNameAppender;
-
- /**
- * Constructor.
- */
- public CodeBehavior() {
- super();
-
- lineNumbers = Model.of(false);
- cssClassNameModel = Model.of("");
- language = Model.of(Language.DYNAMIC);
- from = Model.of(0);
-
- cssClassNameAppender = new CssClassNameAppender(cssClassNameModel);
- }
-
- @Override
- public void detach(Component component) {
- super.detach(component);
-
- lineNumbers.detach();
- cssClassNameModel.detach();
- language.detach();
- from.detach();
- }
-
- @Override
- public void renderHead(final Component component, final IHeaderResponse response) {
- super.renderHead(component, response);
-
- response.render(CssHeaderItem.forReference(PrettifyCssResourceReference.INSTANCE));
-
- References.renderWithFilter(Bootstrap.getSettings(), response, JavaScriptHeaderItem.forReference(PrettifyJavaScriptReference.INSTANCE));
-
- response.render(OnDomReadyHeaderItem.forScript(createInitializerScript(Strings2.getMarkupId(component))));
- }
-
- private CharSequence createInitializerScript(CharSequence markupId) {
- return "$('#" + markupId + "').html(PR.prettyPrintOne($('#" + markupId + "').html().replace(/\\r\\n|\\r|\\n/g,'
'), '', $('#" + markupId + "').attr('class')));";
- }
-
- @Override
- public void bind(final Component component) {
- super.bind(component);
-
- BootstrapBaseBehavior.addTo(component);
- component.add(cssClassNameAppender);
- }
-
- @Override
- public void unbind(final Component component) {
- super.unbind(component);
-
- BootstrapBaseBehavior.removeFrom(component);
- component.remove(cssClassNameAppender);
- }
-
- /**
- * {@inheritDoc}
- */
- @Override
- public void onConfigure(final Component component) {
- super.onConfigure(component);
-
- cssClassNameModel.setObject(createCssClassNames());
- }
-
- /**
- * @return a list of css class names
- */
- private String createCssClassNames() {
- return CssClassNames.parse("prettyprint").add(
- createLineNumbersCssClass(),
- language.getObject().cssClassName()).asString();
- }
-
- /**
- * @return the css class name for the line number class
- */
- private String createLineNumbersCssClass() {
- if (hasLineNumbers()) {
- return "linenums" + (from.getObject() > 0 ? ":" + from.getObject() : "");
- }
-
- return "";
- }
-
- /**
- * @return true, if line numbers will be rendered
- */
- public final boolean hasLineNumbers() {
- return lineNumbers.getObject();
- }
-
- /**
- * adds line numbers on the left side of code block.
- *
- * @return this instance
- */
- public final CodeBehavior setShowLineNumbers(final boolean showLineNumbers) {
- this.lineNumbers.setObject(showLineNumbers);
-
- return this;
- }
-
- /**
- * defines from which line number the counting will start.
- *
- * @param from which line the numbers will count
- * @return this instance
- */
- public final CodeBehavior setStartFromLine(final int from) {
- setShowLineNumbers(true);
- this.from.setObject(from);
-
- return this;
- }
-
- /**
- * sets the language.
- *
- * @param language the language to use
- * @return this instance
- */
- public final CodeBehavior setLanguage(final Language language) {
- this.language.setObject(language);
-
- return this;
- }
-
- @Override
- public void onComponentTag(Component component, ComponentTag tag) {
- super.onComponentTag(component, tag);
-
- Components.assertTag(component, tag, "code", "pre","xmp");
- }
+ * sets the language.
+ *
+ * @param language the language to use
+ * @return this instance
+ */
+ public final CodeBehavior setLanguage(final Language language) {
+ this.language.setObject(language);
+
+ return this;
+ }
+
+ @Override
+ public void onComponentTag(Component component, ComponentTag tag) {
+ super.onComponentTag(component, tag);
+
+ Components.assertTag(component, tag, "code", "pre", "xmp");
+ }
}
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/block/Jumbotron.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/block/Jumbotron.java
index ff7ba2848..47da79717 100644
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/block/Jumbotron.java
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/block/Jumbotron.java
@@ -2,30 +2,32 @@
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.model.IModel;
+import de.agilecoders.wicket.core.markup.html.bootstrap.helpers.TextAndBackgroundColorBehavior.TextAndBackgroundColor;
/**
* #### Description
- *
+ *
* A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
- *
- * documentation: http://getbootstrap.com/components/#jumbotron
- *
+ *
+ * Jumbotron was removed with Bootstrap 5.0.0.
+ * documentation: https://getbootstrap.com/docs/5.3/migration/#jumbotron
+ *
* #### Usage
- *
+ *
* ```java
* component.add(new HeroBehavior());
* ```
- *
+ *
* ```html
- *
- * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
- * Someone famous
- *
+ *
+ * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
+ * Someone famous
+ *
* ```
- *
+ *
* To make the jumbotron full width, and without rounded corners, place it outside all `.containers` and instead add a
* `.container` within.
- *
+ *
* ```html
*
*
@@ -36,29 +38,41 @@
*
* @author Michael Haitz
*/
+@Deprecated // removed since BS 5.0.0
public class Jumbotron extends WebMarkupContainer {
- /**
- * Constructor.
- *
- * @param componentId The non-null id of a new component
- */
- public Jumbotron(final String componentId) {
- this(componentId, null);
- }
+ private final JumbotronBehavior jumbotronBehavior;
- /**
- * Constructor.
- *
- * @param componentId The non-null id of a new component
- * @param model the component's model
- */
- public Jumbotron(final String componentId, final IModel model) {
- super(componentId, model);
+ /**
+ * Constructor.
+ *
+ * @param componentId The non-null id of a new component
+ */
+ public Jumbotron(final String componentId) {
+ this(componentId, null);
+ }
- add(new JumbotronBehavior());
- }
+ /**
+ * Constructor.
+ *
+ * @param componentId The non-null id of a new component
+ * @param model the component's model
+ */
+ public Jumbotron(final String componentId, final IModel model) {
+ super(componentId, model);
+ add(jumbotronBehavior = new JumbotronBehavior());
+ }
+ /**
+ * Sets the TextAndBackground Color.
+ *
+ * @param textAndBackgroundColor the {@link TextAndBackgroundColor}
+ * @return this
+ */
+ public Jumbotron withBackgroundColor(final TextAndBackgroundColor textAndBackgroundColor) {
+ jumbotronBehavior.setTextAndBackgroundColor(textAndBackgroundColor);
+ return this;
+ }
}
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/block/JumbotronBehavior.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/block/JumbotronBehavior.java
index 3b16124ef..2fcd336e9 100644
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/block/JumbotronBehavior.java
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/block/JumbotronBehavior.java
@@ -1,35 +1,40 @@
package de.agilecoders.wicket.core.markup.html.bootstrap.block;
-import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.BootstrapBaseBehavior;
-import de.agilecoders.wicket.core.util.Attributes;
-import de.agilecoders.wicket.core.util.Components;
+import java.util.Objects;
import org.apache.wicket.Component;
import org.apache.wicket.behavior.Behavior;
import org.apache.wicket.markup.ComponentTag;
+import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.BootstrapBaseBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.helpers.TextAndBackgroundColorBehavior.TextAndBackgroundColor;
+import de.agilecoders.wicket.core.util.Attributes;
+import de.agilecoders.wicket.core.util.Components;
+import de.agilecoders.wicket.core.util.CssClassNames;
+import de.agilecoders.wicket.core.util.CssClassNames.Builder;
/**
* #### Description
- *
+ *
* A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
- *
- * documentation: http://getbootstrap.com/components/#jumbotron
- *
+ *
+ * Jumbotron was removed with Bootstrap 5.0.0.
+ * documentation: https://getbootstrap.com/docs/5.3/migration/#jumbotron
+ *
* #### Usage
- *
+ *
* ```java
* component.add(new HeroBehavior());
* ```
- *
+ *
* ```html
- *
- * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
- * Someone famous
- *
+ *
+ * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
+ * Someone famous
+ *
* ```
- *
+ *
* To make the jumbotron full width, and without rounded corners, place it outside all `.containers` and instead add a
* `.container` within.
- *
+ *
* ```html
*
*
@@ -40,28 +45,37 @@
*
* @author Michael Haitz
*/
+@Deprecated // removed since BS 5.0.0
public class JumbotronBehavior extends Behavior {
- @Override
- public void onComponentTag(Component component, ComponentTag tag) {
- super.onComponentTag(component, tag);
+ private TextAndBackgroundColor textAndBackgroundColor;
- Attributes.addClass(tag, "jumbotron");
- Components.assertTag(component, tag, "div");
- }
+ @Override
+ public void onComponentTag(Component component, ComponentTag tag) {
+ super.onComponentTag(component, tag);
- @Override
- public void bind(final Component component) {
- super.bind(component);
+ final Builder classNameBuilder = CssClassNames.newBuilder().add("p-5", "rounded-3");
+ if (Objects.nonNull(textAndBackgroundColor)) {
+ classNameBuilder.add(textAndBackgroundColor.cssClassName());
+ }
+ Attributes.addClass(tag, classNameBuilder.asString());
+ Components.assertTag(component, tag, "div");
+ }
- BootstrapBaseBehavior.addTo(component);
- }
+ public void setTextAndBackgroundColor(final TextAndBackgroundColor textAndBackgroundColor) {
+ this.textAndBackgroundColor = textAndBackgroundColor;
+ }
- @Override
- public void unbind(final Component component) {
- super.unbind(component);
+ @Override
+ public void bind(final Component component) {
+ super.bind(component);
+ BootstrapBaseBehavior.addTo(component);
+ }
- BootstrapBaseBehavior.removeFrom(component);
- }
+ @Override
+ public void unbind(final Component component) {
+ super.unbind(component);
+ BootstrapBaseBehavior.removeFrom(component);
+ }
}
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/ProgressBar.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/ProgressBar.java
index 5f8c80e7e..0e20b9ccd 100644
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/ProgressBar.java
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/ProgressBar.java
@@ -11,7 +11,7 @@
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.BackgroundColor;
import de.agilecoders.wicket.core.util.Attributes;
/**
@@ -35,7 +35,7 @@ public class ProgressBar extends GenericPanel {
* to add stacks to it
*
* @param id The component id
- * @see #ProgressBar(String, org.apache.wicket.model.IModel, de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.Color, boolean, boolean, boolean)
+ * @see ProgressBar(String, org.apache.wicket.model.IModel, BackgroundColor , boolean, boolean, boolean)
* @see #addStacks(Stack...)
*/
public ProgressBar(String id) {
@@ -52,7 +52,7 @@ public ProgressBar(String id) {
* @see #ProgressBar(String)
*/
public ProgressBar(String id, IModel model) {
- this(id, model, BackgroundColorBehavior.Color.Secondary, false, false, false);
+ this(id, model, BackgroundColor.Secondary, false, false, false);
}
/**
@@ -62,11 +62,11 @@ public ProgressBar(String id, IModel model) {
*
* @param id The component id
* @param model The model that will be used for the default stack.
- * @param color The color of the stack
+ * @param backgroundColor The color of the stack
* @see #ProgressBar(String)
*/
- public ProgressBar(String id, IModel model, BackgroundColorBehavior.Color color) {
- this(id, model, color, false, false, false);
+ public ProgressBar(String id, IModel model, BackgroundColor backgroundColor) {
+ this(id, model, backgroundColor, false, false, false);
}
/**
@@ -80,7 +80,7 @@ public ProgressBar(String id, IModel model, BackgroundColorBehavior.Col
* @see #ProgressBar(String)
*/
public ProgressBar(String id, IModel model, boolean labeled) {
- this(id, model, BackgroundColorBehavior.Color.Secondary, labeled, false, false);
+ this(id, model, BackgroundColor.Secondary, labeled, false, false);
}
/**
@@ -90,12 +90,12 @@ public ProgressBar(String id, IModel model, boolean labeled) {
*
* @param id The component id
* @param model The model that will be used for the default stack.
- * @param color The color of the stack
+ * @param backgroundColor The color of the stack
* @param labeled A flag whether the stack should be labeled or not
* @see #ProgressBar(String)
*/
- public ProgressBar(String id, IModel model, BackgroundColorBehavior.Color color, boolean labeled) {
- this(id, model, color, labeled, false, false);
+ public ProgressBar(String id, IModel model, BackgroundColor backgroundColor, boolean labeled) {
+ this(id, model, backgroundColor, labeled, false, false);
}
/**
@@ -106,23 +106,23 @@ public ProgressBar(String id, IModel model, BackgroundColorBehavior.Col
*
* @param id The component id
* @param model The model that will be used for the default stack.
- * @param color The color of the stack
+ * @param backgroundColor The color of the stack
* @param labeled A flag whether the stack should be labeled or not
* @param animated A flag indicating whether the stack is active/active.
* @param striped A flag indicating whether the stack is striped.
* @see #ProgressBar(String)
*/
- public ProgressBar(String id, IModel model, BackgroundColorBehavior.Color color, boolean labeled, boolean animated, boolean striped) {
+ public ProgressBar(String id, IModel model, BackgroundColor backgroundColor, boolean labeled, boolean animated, boolean striped) {
super(id, model);
- Args.notNull(color, "color");
+ Args.notNull(backgroundColor, "color");
stacks = new RepeatingView("stacks");
add(stacks);
if (model != null) {
Stack defaultStack = new Stack(getStackId(), () -> ProgressBar.this.getModelObject());
- defaultStack.color(color).labeled(labeled).active(animated).striped(striped);
+ defaultStack.color(backgroundColor).labeled(labeled).active(animated).striped(striped);
addStacks(defaultStack);
}
}
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/Stack.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/Stack.java
index b3de94faf..11be72656 100644
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/Stack.java
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/Stack.java
@@ -7,7 +7,7 @@
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.GenericPanel;
import org.apache.wicket.model.IModel;
-
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.BackgroundColor;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
import de.agilecoders.wicket.core.util.Attributes;
import de.agilecoders.wicket.core.util.CssClassNames.Helper;
@@ -16,6 +16,7 @@
* Represents a stack of the progress bar.
*/
public class Stack extends GenericPanel {
+
private static final long serialVersionUID = 1L;
/**
@@ -63,12 +64,12 @@ protected void onInitialize() {
add(visuallyHidden);
}
- public BackgroundColorBehavior.Color color() {
- return backgroundColorBehavior.getColor();
+ public BackgroundColor color() {
+ return backgroundColorBehavior.getBackgroundColor();
}
- public Stack color(BackgroundColorBehavior.Color color) {
- this.backgroundColorBehavior.color(color);
+ public Stack color(BackgroundColor backgroundColor) {
+ this.backgroundColorBehavior.withBackgroundColor(backgroundColor);
return this;
}
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/UpdatableProgressBar.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/UpdatableProgressBar.java
index 74aad4294..35f05d986 100644
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/UpdatableProgressBar.java
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/UpdatableProgressBar.java
@@ -1,13 +1,11 @@
package de.agilecoders.wicket.core.markup.html.bootstrap.components.progress;
import java.time.Duration;
-
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.AjaxSelfUpdatingTimerBehavior;
import org.apache.wicket.core.request.handler.IPartialPageRequestHandler;
import org.apache.wicket.model.IModel;
-
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.BackgroundColor;
/**
* A {@link de.agilecoders.wicket.core.markup.html.bootstrap.components.progress.ProgressBar} with
@@ -17,6 +15,7 @@
* @version 1.0
*/
public abstract class UpdatableProgressBar extends ProgressBar {
+
private static final long serialVersionUID = 1L;
Duration updateInterval = Duration.ofSeconds(5L);
private UpdateBehavior behavior;
@@ -26,11 +25,11 @@ public UpdatableProgressBar(String id) {
}
public UpdatableProgressBar(String id, IModel model) {
- this(id, model, BackgroundColorBehavior.Color.Secondary, false);
+ this(id, model, BackgroundColor.Secondary, false);
}
- public UpdatableProgressBar(String id, IModel model, BackgroundColorBehavior.Color color, boolean labeled) {
- super(id, model, color, labeled);
+ public UpdatableProgressBar(String id, IModel model, BackgroundColor backgroundColor, boolean labeled) {
+ super(id, model, backgroundColor, labeled);
setOutputMarkupId(true);
active(true);
@@ -92,6 +91,7 @@ protected void onComplete(IPartialPageRequestHandler target) {
* #setUpdateInterval() method
*/
private abstract static class UpdateBehavior extends AjaxSelfUpdatingTimerBehavior {
+
private static final long serialVersionUID = 1L;
/**
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/UploadProgressBar.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/UploadProgressBar.java
index 271214d12..0a2613752 100644
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/UploadProgressBar.java
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/UploadProgressBar.java
@@ -11,7 +11,7 @@
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.apache.wicket.request.resource.ResourceReference;
-
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.BackgroundColor;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
import de.agilecoders.wicket.core.util.Attributes;
@@ -20,6 +20,7 @@
* that uses Bootstrap markup and styles.
*/
public class UploadProgressBar extends org.apache.wicket.extensions.ajax.markup.html.form.upload.UploadProgressBar {
+
private static final long serialVersionUID = 1L;
/**
@@ -103,12 +104,12 @@ public UploadProgressBar active(boolean value) {
return this;
}
- public BackgroundColorBehavior.Color color() {
- return backgroundColorBehavior.getColor();
+ public BackgroundColor color() {
+ return backgroundColorBehavior.getBackgroundColor();
}
- public UploadProgressBar color(BackgroundColorBehavior.Color color) {
- this.backgroundColorBehavior.color(color);
+ public UploadProgressBar color(BackgroundColor backgroundColor) {
+ this.backgroundColorBehavior.withBackgroundColor(backgroundColor);
return this;
}
@@ -188,8 +189,6 @@ protected void onComponentTag(ComponentTag tag) {
ProgressBar.internalOnComponentTag(tag);
}
-
-
@Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/helpers/ColorAndBackgroundBehavior.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/helpers/ColorAndBackgroundBehavior.java
deleted file mode 100644
index 608333612..000000000
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/helpers/ColorAndBackgroundBehavior.java
+++ /dev/null
@@ -1,181 +0,0 @@
-package de.agilecoders.wicket.core.markup.html.bootstrap.helpers;
-
-import org.apache.wicket.Component;
-import org.apache.wicket.markup.ComponentTag;
-import org.apache.wicket.model.IModel;
-import org.apache.wicket.model.Model;
-
-import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.BootstrapBaseBehavior;
-import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.ICssClassNameProvider;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.Color;
-import de.agilecoders.wicket.core.util.Attributes;
-
-/**
- * Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class.
- */
-public class ColorAndBackgroundBehavior extends BootstrapBaseBehavior {
-
- /**
- * Enumeration of all possible background colors.
- */
- public enum Color implements ICssClassNameProvider {
- Primary("primary"),
- Secondary("secondary"),
- Success("success"),
- Danger("danger"),
- Warning("warning"),
- Info("info"),
- Light("light"),
- Dark("dark");
-
- private final String cssClassName;
-
- Color(String value) {
- this.cssClassName = "text-bg-" + value;
- }
-
- /**
- * Css class associated with this background color.
- * @return Css class associated with this background color.
- */
- public String cssClassName() {
- return cssClassName;
- }
- }
-
- /**
- * Color that should be added to component.
- */
- private IModel colorModel;
-
- /**
- * Constructs new instance for given color.
- * @param color the color that should be added to component.
- */
- public ColorAndBackgroundBehavior(Color color) {
- this(Model.of(color));
- }
-
- /**
- * @param colorModel
- */
- public ColorAndBackgroundBehavior(IModel colorModel)
- {
- this.colorModel = colorModel;
- }
-
- @Override
- public void onComponentTag(Component component, ComponentTag tag) {
- super.onComponentTag(component, tag);
-
- Attributes.addClass(tag, colorModel.getObject());
- }
-
- /**
- * Sets color.
- * @param color
- * @return this for chaining
- */
- public ColorAndBackgroundBehavior color(Color color) {
- colorModel.setObject(color);
- return this;
- }
-
- /**
- * Sets color model.
- * @param colorModel
- * @return this for chaining
- */
- public ColorAndBackgroundBehavior color(IModel colorModel) {
- this.colorModel = colorModel;
- return this;
- }
-
- /**
- * @return color
- */
- public Color getColor() {
- return colorModel.getObject();
- }
-
- /**
- * @return color model
- */
- public IModel getColorModel() {
- return colorModel;
- }
-
-
- /**
- * Constructs new behavior that adds {@link ColorAndBackgroundBehavior.Color#Primary} to component
- *
- * @return behavior that adds primary background color to component
- */
- public static ColorAndBackgroundBehavior primary() {
- return new ColorAndBackgroundBehavior(Color.Primary);
- }
-
- /**
- * Constructs new behavior that adds {@link ColorAndBackgroundBehavior.Color#Secondary} to component
- *
- * @return behavior that adds secondary background color to component
- */
- public static ColorAndBackgroundBehavior secondary() {
- return new ColorAndBackgroundBehavior(Color.Secondary);
- }
-
- /**
- * Constructs new behavior that adds {@link ColorAndBackgroundBehavior.Color#Success} to component
- *
- * @return behavior that adds success background color to component
- */
- public static ColorAndBackgroundBehavior success() {
- return new ColorAndBackgroundBehavior(Color.Success);
- }
-
- /**
- * Constructs new behavior that adds {@link ColorAndBackgroundBehavior.Color#Danger} to component
- *
- * @return behavior that adds danger background color to component
- */
- public static ColorAndBackgroundBehavior danger() {
- return new ColorAndBackgroundBehavior(Color.Danger);
- }
-
- /**
- * Constructs new behavior that adds {@link ColorAndBackgroundBehavior.Color#Warning} to component
- *
- * @return behavior that adds warning background color to component
- */
- public static ColorAndBackgroundBehavior warning() {
- return new ColorAndBackgroundBehavior(Color.Warning);
- }
-
- /**
- * Constructs new behavior that adds {@link ColorAndBackgroundBehavior.Color#Info} to component
- *
- * @return behavior that adds info background color to component
- */
- public static ColorAndBackgroundBehavior info() {
- return new ColorAndBackgroundBehavior(Color.Info);
- }
-
- /**
- * Constructs new behavior that adds {@link ColorAndBackgroundBehavior.Color#Light} to component
- *
- * @return behavior that adds light background color to component
- */
- public static ColorAndBackgroundBehavior light() {
- return new ColorAndBackgroundBehavior(Color.Light);
- }
-
- /**
- * Constructs new behavior that adds {@link ColorAndBackgroundBehavior.Color#Dark} to component
- *
- * @return behavior that adds dark background color to component
- */
- public static ColorAndBackgroundBehavior dark() {
- return new ColorAndBackgroundBehavior(Color.Dark);
- }
-}
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/helpers/TextAndBackgroundColorBehavior.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/helpers/TextAndBackgroundColorBehavior.java
new file mode 100644
index 000000000..1a2a1e026
--- /dev/null
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/helpers/TextAndBackgroundColorBehavior.java
@@ -0,0 +1,126 @@
+package de.agilecoders.wicket.core.markup.html.bootstrap.helpers;
+
+import java.util.Optional;
+import org.apache.wicket.Component;
+import org.apache.wicket.markup.ComponentTag;
+import org.apache.wicket.model.IModel;
+import org.apache.wicket.model.Model;
+import org.apache.wicket.util.lang.Args;
+import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.BootstrapBaseBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.ICssClassNameProvider;
+import de.agilecoders.wicket.core.util.Attributes;
+
+/**
+ * Adds Text and Background color utility classes to components.
+ * Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class.
+ *
+ *
+ * @author Matthias Drummer
+ */
+public class TextAndBackgroundColorBehavior extends BootstrapBaseBehavior {
+
+ /**
+ * Enumeration that contains all text and background color combinations provided by bootstrap.
+ *
+ *
+ * Set a background-color with contrasting foreground color with our .text-bg-{color} helpers. Previously it was required to manually pair your choice
+ * of .text-{color} and .bg-{color} utilities for styling, which you still may use if you prefer.
+ *
+ *
+ * @author Matthias Drummer
+ */
+ public enum TextAndBackgroundColor implements ICssClassNameProvider {
+
+ Primary("primary"),
+ Secondary("secondary"),
+ Success("success"),
+ Info("info"),
+ Warning("warning"),
+ Danger("danger"),
+ Light("light"),
+ Dark("dark"),
+ ;
+
+ private final String cssClassName;
+
+ TextAndBackgroundColor(final String value) {
+ this.cssClassName = "text-bg-" + value;
+ }
+
+ @Override
+ public String cssClassName() {
+ return cssClassName;
+ }
+ }
+
+ private final IModel textAndBackgroundColorModel;
+
+ public TextAndBackgroundColorBehavior(final TextAndBackgroundColor textAndBackgroundColor) {
+ this(Model.of(textAndBackgroundColor));
+ }
+
+ public TextAndBackgroundColorBehavior(final IModel textAndBackgroundColorModel) {
+ // The Model must have a proper value set
+ Args.notNull(textAndBackgroundColorModel, "textAndBackgroundColorModel.getObject()");
+ this.textAndBackgroundColorModel = textAndBackgroundColorModel;
+ }
+
+ @Override
+ public void onComponentTag(final Component component, final ComponentTag tag) {
+ super.onComponentTag(component, tag);
+ Attributes.addClass(tag, textAndBackgroundColorModel.getObject());
+ }
+
+ /**
+ * Sets a {@link TextAndBackgroundColor} value.
+ *
+ * @param textAndBackgroundColor the text and background color value
+ * @return this for chaining
+ */
+ public TextAndBackgroundColorBehavior setTextAndBackgroundColor(final TextAndBackgroundColor textAndBackgroundColor) {
+ textAndBackgroundColorModel.setObject(textAndBackgroundColor);
+ return this;
+ }
+
+ public IModel getTextAndBackgroundColorModel() {
+ return textAndBackgroundColorModel;
+ }
+
+ public Optional getTextAndBackgroundColor() {
+ return Optional.ofNullable(textAndBackgroundColorModel.getObject());
+ }
+
+ public static TextAndBackgroundColorBehavior primary() {
+ return new TextAndBackgroundColorBehavior(TextAndBackgroundColor.Primary);
+ }
+
+ public static TextAndBackgroundColorBehavior secondary() {
+ return new TextAndBackgroundColorBehavior(TextAndBackgroundColor.Secondary);
+ }
+
+ public static TextAndBackgroundColorBehavior success() {
+ return new TextAndBackgroundColorBehavior(TextAndBackgroundColor.Success);
+ }
+
+ public static TextAndBackgroundColorBehavior info() {
+ return new TextAndBackgroundColorBehavior(TextAndBackgroundColor.Info);
+ }
+
+ public static TextAndBackgroundColorBehavior warning() {
+ return new TextAndBackgroundColorBehavior(TextAndBackgroundColor.Warning);
+ }
+
+ public static TextAndBackgroundColorBehavior danger() {
+ return new TextAndBackgroundColorBehavior(TextAndBackgroundColor.Danger);
+ }
+
+ public static TextAndBackgroundColorBehavior light() {
+ return new TextAndBackgroundColorBehavior(TextAndBackgroundColor.Light);
+ }
+
+ public static TextAndBackgroundColorBehavior dark() {
+ return new TextAndBackgroundColorBehavior(TextAndBackgroundColor.Dark);
+ }
+}
+
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/navbar/Navbar.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/navbar/Navbar.java
index 1a9ecf301..1ee35df37 100644
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/navbar/Navbar.java
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/navbar/Navbar.java
@@ -1,12 +1,10 @@
package de.agilecoders.wicket.core.markup.html.bootstrap.navbar;
import static de.agilecoders.wicket.jquery.util.Generics2.transform;
-
import java.util.ArrayList;
import java.util.List;
import java.util.function.Function;
import java.util.function.Predicate;
-
import org.apache.wicket.AttributeModifier;
import org.apache.wicket.Component;
import org.apache.wicket.Page;
@@ -27,13 +25,12 @@
import org.apache.wicket.util.io.IClusterable;
import org.apache.wicket.util.lang.Args;
import org.apache.wicket.util.string.Strings;
-
import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.BootstrapResourcesBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.CssClassNameAppender;
import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.ICssClassNameProvider;
import de.agilecoders.wicket.core.markup.html.bootstrap.button.Activatable;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.BackgroundColor;
import de.agilecoders.wicket.core.markup.html.bootstrap.common.Invertible;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
import de.agilecoders.wicket.core.util.Attributes;
import de.agilecoders.wicket.core.util.Behaviors;
import de.agilecoders.wicket.core.util.Models;
@@ -48,6 +45,7 @@
* @author miha
*/
public class Navbar extends Panel implements Invertible {
+
private static final long serialVersionUID = 1L;
private static final String COMPONENT_ID = "component";
@@ -132,7 +130,7 @@ public String cssClassName() {
private static final PositionFilter POSITION_FILTER_RIGHT = new PositionFilter(ComponentPosition.RIGHT);
private final IModel invertModel = Model.of("navbar-light");
- private final IModel backgroundColor = Model.of(BackgroundColorBehavior.Color.Light);
+ private final IModel backgroundColor = Model.of(BackgroundColor.Light);
private final CssClassNameAppender activeStateAppender = new CssClassNameAppender("active");
private final IModel collapseBreakpoint = Model.of(CollapseBreakpoint.Large);
@@ -155,7 +153,7 @@ public Navbar(final String componentId) {
* Construct.
*
* @param componentId The non-null id of this component
- * @param model The component's model
+ * @param model The component's model
*/
public Navbar(final String componentId, final IModel model) {
super(componentId, model);
@@ -191,8 +189,7 @@ protected void onInitialize() {
/**
* creates a new transparent inner container which is used to append some css classes.
*
- * @param componentId
- * The non-null id of a new navigation component
+ * @param componentId The non-null id of a new navigation component
* @return a new inner container of the navigation bar.
*/
protected TransparentWebMarkupContainer newContainer(final String componentId) {
@@ -242,10 +239,10 @@ protected void onComponentTag(ComponentTag tag) {
super.onComponentTag(tag);
Attributes.addClass(tag, "navbar",
- collapseBreakpoint.getObject().cssClassName(),
- invertModel.getObject(),
- position.getObject().cssClassName(),
- backgroundColor.getObject().cssClassName()
+ collapseBreakpoint.getObject().cssClassName(),
+ invertModel.getObject(),
+ position.getObject().cssClassName(),
+ backgroundColor.getObject().cssClassName()
);
Attributes.set(tag, "role", "navigation");
@@ -254,7 +251,7 @@ protected void onComponentTag(ComponentTag tag) {
/**
* creates a component model which holds only the components with a specific position.
*
- * @param components to filter
+ * @param components to filter
* @param withPosition position a component must have
* @return new model
*/
@@ -273,7 +270,7 @@ public List load() {
* creates a new navigation list
*
* @param componentId The non-null id of a new navigation component
- * @param listModel The component's model
+ * @param listModel The component's model
* @return a new navigation list view instance
*/
protected Component newNavigation(String componentId, IModel> listModel) {
@@ -293,7 +290,7 @@ protected void populateItem(ListItem components) {
Activatable activatable = (Activatable) component;
if (activatable.isActive(component)) {
- component.add(activeStateAppender);
+ component.add(activeStateAppender);
}
}
@@ -407,7 +404,7 @@ public Position getPosition() {
/**
* @return background color of navbar
*/
- public BackgroundColorBehavior.Color getBackgroundColor() {
+ public BackgroundColor getBackgroundColor() {
return backgroundColor.getObject();
}
@@ -469,7 +466,7 @@ protected Label newToggleNavigationLabel(final String componentId) {
* creates a new transparent container which is used to append the "data-bs-target" attribute to the collapse button.
*
* @param componentId The non-null id of collapse button
- * @param selector non-null jquery selector to collapse
+ * @param selector non-null jquery selector to collapse
* @return a button container.
*/
protected TransparentWebMarkupContainer newCollapseButton(String componentId, String selector) {
@@ -509,7 +506,7 @@ public Navbar setBrandName(final IModel brandName) {
* sets an image in the brand button
*
* @param imageResourceReference required
- * @param imageAltAttrModel optional, but should be provided
+ * @param imageAltAttrModel optional, but should be provided
* @return this instance for chaining
*/
public Navbar setBrandImage(final ResourceReference imageResourceReference, final IModel imageAltAttrModel) {
@@ -531,7 +528,7 @@ public Navbar setBrandImage(final ResourceReference imageResourceReference, fina
* @return the component's current instance
*/
@Override
- public Navbar setInverted(final boolean invert) {
+ public Navbar setInverted(final boolean invert) {
this.invertModel.setObject(invert ? "navbar-dark" : "navbar-light");
return this;
@@ -540,11 +537,11 @@ public Navbar setInverted(final boolean invert) {
/**
* Sets background color of navbar.
*
- * @param color the background color
+ * @param backgroundColor the background color
* @return the component's current instace
*/
- public Navbar setBackgroundColor(final BackgroundColorBehavior.Color color) {
- this.backgroundColor.setObject(color);
+ public Navbar setBackgroundColor(final BackgroundColor backgroundColor) {
+ this.backgroundColor.setObject(backgroundColor);
return this;
}
@@ -586,6 +583,7 @@ protected void detachModel() {
* match the given {@link ComponentPosition}.
*/
private static final class PositionFilter implements Predicate, IClusterable {
+
private static final long serialVersionUID = 1L;
private final ComponentPosition position;
@@ -611,6 +609,7 @@ public boolean test(final INavbarComponent navbarComponent) {
* A {@link Function} that maps a {@link INavbarComponent} to a {@link Component}
*/
private static final class NavbarComponentToComponentFunction implements Function, IClusterable {
+
private static final long serialVersionUID = 1L;
private final String markupId;
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/panel/BootstrapGenericPanel.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/panel/BootstrapGenericPanel.java
index f3874c1c7..ae95268f9 100644
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/panel/BootstrapGenericPanel.java
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/panel/BootstrapGenericPanel.java
@@ -14,7 +14,7 @@
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior.Radius;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior.Type;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.ColorBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.TextColorBehavior;
import de.agilecoders.wicket.core.util.Attributes;
import de.agilecoders.wicket.core.util.Components;
@@ -73,7 +73,7 @@ public BootstrapGenericPanel(String id, PanelType panelType){
public BootstrapGenericPanel(String id, IModel model, IModel panelTitleModel) {
this(id, model, panelTitleModel, null);
}
-
+
/**
* Construct.
*
@@ -84,11 +84,11 @@ public BootstrapGenericPanel(String id, IModel model, IModel panelTit
*/
public BootstrapGenericPanel(String id, IModel model, IModel panelTitleModel, PanelType panelType) {
super(id, model);
-
+
this.titleModel = panelTitleModel;
this.panelType = panelType;
}
-
+
/**
* @param panelType
* @return this for chaining
@@ -97,7 +97,7 @@ public BootstrapGenericPanel withPanelType(PanelType panelType) {
this.panelType = panelType;
return this;
}
-
+
@Override
protected void onInitialize()
{
@@ -125,20 +125,20 @@ protected void onInitialize()
Panel panelFooter = newFooterPanel(_PANEL_FOOTER_ID, getModel());
add(panelFooter);
Components.hideIfModelIsEmpty(panelFooter);
-
+
header.add(new BackgroundColorBehavior(() -> panelType.getBackgroundColor()) {
@Override
public boolean isEnabled(Component component) {
return isCustomPanelStyleSet();
}
});
- header.add(new ColorBehavior(() -> panelType.getTextColor()) {
+ header.add(new TextColorBehavior(() -> panelType.getTextColor()) {
@Override
public boolean isEnabled(Component component) {
return isCustomPanelStyleSet();
}
});
-
+
add(new BorderBehavior() {
public void onConfigure(Component component) {
color(panelType.getBorderColor());
@@ -149,11 +149,11 @@ public boolean isEnabled(Component component) {
}
}.type(Type.All).radius(Radius.All));
}
-
+
private boolean isCustomPanelStyleSet() {
return !PanelType.Default.equals(panelType) && panelType != null;
}
-
+
@Override
protected void onComponentTag(ComponentTag tag) {
super.onComponentTag(tag);
@@ -194,7 +194,7 @@ protected Panel newBodyPanel(String id, IModel model){
Panel emptyPanel = new EmptyPanel(id);
emptyPanel.setDefaultModel(new Model<>());
-
+
return emptyPanel;
}
@@ -209,7 +209,7 @@ protected Panel newFooterPanel(String id, IModel model){
Panel emptyPanel = new EmptyPanel(id);
emptyPanel.setDefaultModel(new Model<>());
-
+
return emptyPanel;
}
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/panel/PanelType.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/panel/PanelType.java
index 686b71733..6b53815e9 100644
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/panel/PanelType.java
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/panel/PanelType.java
@@ -16,46 +16,44 @@
*/
package de.agilecoders.wicket.core.markup.html.bootstrap.panel;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.BackgroundColor;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior.Color;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.ColorBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.TextColorBehavior;
/**
* Automatically sets panel's header background and border.
*/
-public enum PanelType
-{
+public enum PanelType {
Default(null, null, null),
- Primary(BackgroundColorBehavior.Color.Primary, ColorBehavior.Color.White, BorderBehavior.Color.Primary),
- Primary_subtle(BackgroundColorBehavior.Color.Primary_subtle, ColorBehavior.Color.Primary_emphasis, BorderBehavior.Color.Primary_subtle),
- Secondary(BackgroundColorBehavior.Color.Secondary, ColorBehavior.Color.White, BorderBehavior.Color.Secondary),
- Secondary_subtle(BackgroundColorBehavior.Color.Secondary_subtle, ColorBehavior.Color.Secondary_emphasis, BorderBehavior.Color.Secondary_subtle),
- Success(BackgroundColorBehavior.Color.Success, ColorBehavior.Color.White, BorderBehavior.Color.Success),
- Success_subtle(BackgroundColorBehavior.Color.Success_subtle, ColorBehavior.Color.Success_emphasis, BorderBehavior.Color.Success_subtle),
- Danger(BackgroundColorBehavior.Color.Danger, ColorBehavior.Color.White, BorderBehavior.Color.Danger),
- Danger_subtle(BackgroundColorBehavior.Color.Danger_subtle, ColorBehavior.Color.Danger_emphasis, BorderBehavior.Color.Danger_subtle),
- Warning(BackgroundColorBehavior.Color.Warning, ColorBehavior.Color.Black, BorderBehavior.Color.Warning),
- Warning_subtle(BackgroundColorBehavior.Color.Warning_subtle, ColorBehavior.Color.Warning_emphasis, BorderBehavior.Color.Warning_subtle),
- Info(BackgroundColorBehavior.Color.Info, ColorBehavior.Color.White, BorderBehavior.Color.Info),
- Info_subtle(BackgroundColorBehavior.Color.Info_subtle, ColorBehavior.Color.Info_emphasis, BorderBehavior.Color.Info_subtle),
- Light(BackgroundColorBehavior.Color.Light, ColorBehavior.Color.Black, BorderBehavior.Color.Light),
- Light_subtle(BackgroundColorBehavior.Color.Light_subtle, ColorBehavior.Color.Light_emphasis, BorderBehavior.Color.Light_subtle),
- Dark(BackgroundColorBehavior.Color.Dark, ColorBehavior.Color.White, BorderBehavior.Color.Dark),
- Dark_subtle(BackgroundColorBehavior.Color.Dark_subtle, ColorBehavior.Color.Dark_emphasis, BorderBehavior.Color.Dark_subtle),
- Body_secondary(BackgroundColorBehavior.Color.Body_secondary, null, BorderBehavior.Color.Primary),
- Body_tertiary(BackgroundColorBehavior.Color.Body_tertiary, null, BorderBehavior.Color.Primary),
- Body(BackgroundColorBehavior.Color.Body, ColorBehavior.Color.Body, BorderBehavior.Color.Primary),
- Black(BackgroundColorBehavior.Color.Black, ColorBehavior.Color.White, BorderBehavior.Color.Black),
- White(BackgroundColorBehavior.Color.White, ColorBehavior.Color.Black, BorderBehavior.Color.White),
- Transparent(BackgroundColorBehavior.Color.Transparent, ColorBehavior.Color.Body, null);
+ Primary(BackgroundColor.Primary, TextColorBehavior.TextColor.White, BorderBehavior.Color.Primary),
+ Primary_subtle(BackgroundColor.Primary_Subtle, TextColorBehavior.TextColor.Primary_Emphasis, BorderBehavior.Color.Primary_subtle),
+ Secondary(BackgroundColor.Secondary, TextColorBehavior.TextColor.White, BorderBehavior.Color.Secondary),
+ Secondary_subtle(BackgroundColor.Secondary_Subtle, TextColorBehavior.TextColor.Secondary_Emphasis, BorderBehavior.Color.Secondary_subtle),
+ Success(BackgroundColor.Success, TextColorBehavior.TextColor.White, BorderBehavior.Color.Success),
+ Success_subtle(BackgroundColor.Success_Subtle, TextColorBehavior.TextColor.Success_Emphasis, BorderBehavior.Color.Success_subtle),
+ Danger(BackgroundColor.Danger, TextColorBehavior.TextColor.White, BorderBehavior.Color.Danger),
+ Danger_subtle(BackgroundColor.Danger_Subtle, TextColorBehavior.TextColor.Danger_Emphasis, BorderBehavior.Color.Danger_subtle),
+ Warning(BackgroundColor.Warning, TextColorBehavior.TextColor.Black, BorderBehavior.Color.Warning),
+ Warning_subtle(BackgroundColor.Warning_Subtle, TextColorBehavior.TextColor.Warning_Emphasis, BorderBehavior.Color.Warning_subtle),
+ Info(BackgroundColor.Info, TextColorBehavior.TextColor.White, BorderBehavior.Color.Info),
+ Info_subtle(BackgroundColor.Info_Subtle, TextColorBehavior.TextColor.Info_Emphasis, BorderBehavior.Color.Info_subtle),
+ Light(BackgroundColor.Light, TextColorBehavior.TextColor.Black, BorderBehavior.Color.Light),
+ Light_subtle(BackgroundColor.Light_Subtle, TextColorBehavior.TextColor.Light_Emphasis, BorderBehavior.Color.Light_subtle),
+ Dark(BackgroundColor.Dark, TextColorBehavior.TextColor.White, BorderBehavior.Color.Dark),
+ Dark_subtle(BackgroundColor.Dark_Subtle, TextColorBehavior.TextColor.Dark_Emphasis, BorderBehavior.Color.Dark_subtle),
+ Body_secondary(BackgroundColor.Body_Secondary, null, BorderBehavior.Color.Primary),
+ Body_tertiary(BackgroundColor.Body_Tertiary, null, BorderBehavior.Color.Primary),
+ Body(BackgroundColor.Body, TextColorBehavior.TextColor.Body, BorderBehavior.Color.Primary),
+ Black(BackgroundColor.Black, TextColorBehavior.TextColor.White, BorderBehavior.Color.Black),
+ White(BackgroundColor.White, TextColorBehavior.TextColor.Black, BorderBehavior.Color.White),
+ Transparent(BackgroundColor.Transparent, TextColorBehavior.TextColor.Body, null);
-
- private final BackgroundColorBehavior.Color backgroundColor;
- private final ColorBehavior.Color textColor;
+ private final BackgroundColor backgroundColor;
+ private final TextColorBehavior.TextColor textColor;
private final BorderBehavior.Color borderColor;
-
- private PanelType(BackgroundColorBehavior.Color backgroundColor, ColorBehavior.Color textColor, Color borderColor) {
+
+ PanelType(final BackgroundColor backgroundColor, final TextColorBehavior.TextColor textColor, final Color borderColor) {
this.backgroundColor = backgroundColor;
this.textColor = textColor;
this.borderColor = borderColor;
@@ -64,14 +62,14 @@ private PanelType(BackgroundColorBehavior.Color backgroundColor, ColorBehavior.C
/**
* @return the backgroundColor
*/
- public BackgroundColorBehavior.Color getBackgroundColor() {
+ public BackgroundColor getBackgroundColor() {
return backgroundColor;
}
/**
* @return the textColor
*/
- public ColorBehavior.Color getTextColor() {
+ public TextColorBehavior.TextColor getTextColor() {
return textColor;
}
@@ -81,5 +79,5 @@ public ColorBehavior.Color getTextColor() {
public BorderBehavior.Color getBorderColor() {
return borderColor;
}
-
-}
\ No newline at end of file
+
+}
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/BackgroundColorBehavior.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/BackgroundColorBehavior.java
index 9adc78497..fe7a7bfad 100644
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/BackgroundColorBehavior.java
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/BackgroundColorBehavior.java
@@ -1,10 +1,11 @@
package de.agilecoders.wicket.core.markup.html.bootstrap.utilities;
+import java.util.Objects;
+import java.util.Optional;
import org.apache.wicket.Component;
import org.apache.wicket.markup.ComponentTag;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
-
import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.BootstrapBaseBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.ICssClassNameProvider;
import de.agilecoders.wicket.core.util.Attributes;
@@ -13,312 +14,363 @@
* Adds background color utility classes to components.
*
* @author Jan Ferko
+ * @author Matthias Drummer
*/
public class BackgroundColorBehavior extends BootstrapBaseBehavior {
- /**
- * Enumeration of all possible background colors.
- * https://getbootstrap.com/docs/5.3/utilities/background/
- */
- public enum Color implements ICssClassNameProvider {
- Primary("primary"),
- Primary_subtle("primary-subtle"),
- Secondary("secondary"),
- Secondary_subtle("secondary-subtle"),
- Success("success"),
- Success_subtle("success-subtle"),
- Danger("danger"),
- Danger_subtle("danger-subtle"),
- Warning("warning"),
- Warning_subtle("warning-subtle"),
- Info("info"),
- Info_subtle("info-subtle"),
- Light("light"),
- Light_subtle("light-subtle"),
- Dark("dark"),
- Dark_subtle("dark-subtle"),
- Body_secondary("body-secondary"),
- Body_tertiary("body-tertiary"),
- Body("body"),
- Black("black"),
- White("white"),
- Transparent("transparent");
-
- private final String cssClassName;
-
- Color(String value) {
- this.cssClassName = "bg-" + value;
- }
-
- /**
- * Css class associated with this background color.
- * @return Css class associated with this background color.
- */
- public String cssClassName() {
- return cssClassName;
- }
- }
-
- /**
- * Background color that should be added to component.
- */
- private IModel colorModel;
-
-
- /**
- * Constructs new instance for given color.
- * @param color the background color that should be added to component.
- */
- public BackgroundColorBehavior(Color color) {
- this(Model.of(color));
- }
-
-
- /**
- * @param colorModel
- */
- public BackgroundColorBehavior(IModel colorModel)
- {
- this.colorModel = colorModel;
+ /**
+ * Enumeration that contains all bootstrap background colors
+ *
+ */
+ public enum BackgroundColor implements ICssClassNameProvider {
+
+ Primary("primary"),
+ Primary_Subtle("primary-subtle"),
+ Secondary("secondary"),
+ Secondary_Subtle("secondary-subtle"),
+ Success("success"),
+ Success_Subtle("success-subtle"),
+ Info("info"),
+ Info_Subtle("info-subtle"),
+ Warning("warning"),
+ Warning_Subtle("warning-subtle"),
+ Danger("danger"),
+ Danger_Subtle("danger-subtle"),
+ Light("light"),
+ Light_Subtle("light-subtle"),
+ Dark("dark"),
+ Dark_Subtle("dark-subtle"),
+ Black("black"),
+ White("white"),
+ Body("body"),
+ Transparent("transparent"),
+ Body_Secondary("body-secondary"),
+ Body_Tertiary("body-tertiary"),
+ ;
+
+ private final String cssClassName;
+
+ BackgroundColor(final String value) {
+ this.cssClassName = "bg-" + value;
+ }
+
+ @Override
+ public String cssClassName() {
+ return cssClassName;
+ }
}
+ /**
+ * Background color that should be added to component.
+ */
+ private final IModel backgroundColorModel;
+ // The opacity model is per default empty
+ private final IModel backgroundOpacityModel = Model.of();
+ private final IModel gradientModel = Model.of(Boolean.FALSE);
+
+ /**
+ * Constructs new instance for given {@link BackgroundColor}.
+ *
+ * @param backgroundColor the background color that should be added to component.
+ */
+ public BackgroundColorBehavior(final BackgroundColor backgroundColor) {
+ this(Model.of(backgroundColor));
+ }
+
+ /**
+ * Construct new instacne for given backgroundColor model.
+ *
+ * @param backgroundColorModel the background color model containing the {@link BackgroundColor} that should be added to the component
+ */
+ public BackgroundColorBehavior(final IModel backgroundColorModel) {
+ this.backgroundColorModel = backgroundColorModel;
+ }
@Override
- public void onComponentTag(Component component, ComponentTag tag) {
- super.onComponentTag(component, tag);
+ public void onComponentTag(Component component, ComponentTag tag) {
+ super.onComponentTag(component, tag);
+ Attributes.addClass(tag, backgroundColorModel.getObject());
+ if (Objects.nonNull(backgroundOpacityModel)) {
+ Attributes.addClass(tag, backgroundOpacityModel.getObject());
+ }
+ if (gradientModel.getObject()) {
+ Attributes.addClass(tag, "bg-gradient");
+ }
+ }
- Attributes.addClass(tag, colorModel.getObject());
- }
+ /**
+ * Sets the backgroundColor.
+ *
+ * @param backgroundColor the {@link BackgroundColor}
+ * @return this for chaining
+ */
+ public BackgroundColorBehavior withBackgroundColor(BackgroundColor backgroundColor) {
+ backgroundColorModel.setObject(backgroundColor);
+ return this;
+ }
+
+ /**
+ * Sets the background opacity.
+ *
+ * @param backgroundOpacity the {@link BackgroundOpacity}
+ * @return this for chaining
+ */
+ public BackgroundColorBehavior withOpacity(final BackgroundOpacity backgroundOpacity) {
+ backgroundOpacityModel.setObject(backgroundOpacity);
+ return this;
+ }
/**
- * Sets color.
- * @param color
+ * Sets if the Background should show some gradient
+ *
+ * @param withGradient true if a gradient has to be shown
* @return this for chaining
*/
- public BackgroundColorBehavior color(Color color) {
- colorModel.setObject(color);
- return this;
- }
-
- /**
- * Sets color model.
- * @param colorModel
- * @return this for chaining
- */
- public BackgroundColorBehavior color(IModel colorModel) {
- this.colorModel = colorModel;
- return this;
- }
-
- /**
- * @return color
- */
- public Color getColor() {
- return colorModel.getObject();
- }
-
- /**
- * @return color model
- */
- public IModel getColorModel() {
- return colorModel;
- }
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Primary} to component
- *
- * @return behavior that adds primary background color to component
- */
- public static BackgroundColorBehavior primary() {
- return new BackgroundColorBehavior(Color.Primary);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Primary_subtle} to component
- *
- * @return behavior that adds primary subtle background color to component
- */
- public static BackgroundColorBehavior primarySubtle() {
- return new BackgroundColorBehavior(Color.Primary_subtle);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Secondary} to component
- *
- * @return behavior that adds secondary background color to component
- */
- public static BackgroundColorBehavior secondary() {
- return new BackgroundColorBehavior(Color.Secondary);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Secondary_subtle} to component
- *
- * @return behavior that adds secondary subtle background color to component
- */
- public static BackgroundColorBehavior secondarySubtle() {
- return new BackgroundColorBehavior(Color.Secondary_subtle);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Success} to component
- *
- * @return behavior that adds success background color to component
- */
- public static BackgroundColorBehavior success() {
- return new BackgroundColorBehavior(Color.Success);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Success_subtle} to component
- *
- * @return behavior that adds success subtle background color to component
- */
- public static BackgroundColorBehavior successSubtle() {
- return new BackgroundColorBehavior(Color.Success_subtle);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Danger} to component
- *
- * @return behavior that adds danger background color to component
- */
- public static BackgroundColorBehavior danger() {
- return new BackgroundColorBehavior(Color.Danger);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Danger_subtle} to component
- *
- * @return behavior that adds danger subtle background color to component
- */
- public static BackgroundColorBehavior dangerSubtle() {
- return new BackgroundColorBehavior(Color.Danger_subtle);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Warning} to component
- *
- * @return behavior that adds warning background color to component
- */
- public static BackgroundColorBehavior warning() {
- return new BackgroundColorBehavior(Color.Warning);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Warning_subtle} to component
- *
- * @return behavior that adds warning subtle background color to component
- */
- public static BackgroundColorBehavior warningSubtle() {
- return new BackgroundColorBehavior(Color.Warning_subtle);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Info} to component
- *
- * @return behavior that adds info background color to component
- */
- public static BackgroundColorBehavior info() {
- return new BackgroundColorBehavior(Color.Info);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Info_subtle} to component
- *
- * @return behavior that adds info subtle background color to component
- */
- public static BackgroundColorBehavior infoSubtle() {
- return new BackgroundColorBehavior(Color.Info_subtle);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Light} to component
- *
- * @return behavior that adds light background color to component
- */
- public static BackgroundColorBehavior light() {
- return new BackgroundColorBehavior(Color.Light);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Light_subtle} to component
- *
- * @return behavior that adds light subtle background color to component
- */
- public static BackgroundColorBehavior lightSubtle() {
- return new BackgroundColorBehavior(Color.Light_subtle);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Dark} to component
- *
- * @return behavior that adds dark background color to component
- */
- public static BackgroundColorBehavior dark() {
- return new BackgroundColorBehavior(Color.Dark);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Dark_subtle} to component
- *
- * @return behavior that adds dark subtle background color to component
- */
- public static BackgroundColorBehavior darkSubtle() {
- return new BackgroundColorBehavior(Color.Dark_subtle);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Body_secondary} to component
- *
- * @return behavior that adds body secondary background color to component
- */
- public static BackgroundColorBehavior bodySecondary() {
- return new BackgroundColorBehavior(Color.Body_secondary);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Body_tertiary} to component
- *
- * @return behavior that adds body tertiary background color to component
- */
- public static BackgroundColorBehavior bodyTertiary() {
- return new BackgroundColorBehavior(Color.Body_tertiary);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Body} to component
- *
- * @return behavior that adds body background color to component
- */
- public static BackgroundColorBehavior body() {
- return new BackgroundColorBehavior(Color.Body);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Black} to component
- *
- * @return behavior that adds black background color to component
- */
- public static BackgroundColorBehavior black() {
- return new BackgroundColorBehavior(Color.Black);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#White} to component
- *
- * @return behavior that adds white background color to component
- */
- public static BackgroundColorBehavior white() {
- return new BackgroundColorBehavior(Color.White);
- }
-
- /**
- * Constructs new behavior that adds {@link BackgroundColorBehavior.Color#Transparent} to component
- *
- * @return behavior that adds transparent background color to component
- */
- public static BackgroundColorBehavior transparent() {
- return new BackgroundColorBehavior(Color.Transparent);
- }
+ public BackgroundColorBehavior withGradient(final boolean withGradient) {
+ gradientModel.setObject(withGradient);
+ return this;
+ }
+
+ /**
+ * Returns the {@link BackgroundColor} which is currently set
+ *
+ * @return the backgroundColor
+ */
+ public BackgroundColor getBackgroundColor() {
+ return backgroundColorModel.getObject();
+ }
+
+ /**
+ * Returns the model of the {@link BackgroundColor}.
+ *
+ * @return the backgroundColor model
+ */
+ public IModel getBackgroundColorModel() {
+ return backgroundColorModel;
+ }
+
+ /**
+ * Returns the {@link BackgroundOpacity} which is currently set. Optional because it may not be set.
+ *
+ * @return the {@link BackgroundOpacity} as optional
+ */
+ public Optional getBackgroundOpacity() {
+ return Optional.ofNullable(backgroundOpacityModel.getObject());
+ }
+ /**
+ * Returns the {@link BackgroundOpacity} model
+ *
+ * @return the background opacity model
+ */
+ public IModel getBackgroundOpacityModel() {
+ return backgroundOpacityModel;
+ }
+
+ /**
+ * Returns if the background has some gradient
+ *
+ * @return the gradient model value
+ */
+ public boolean hasGradient() {
+ return gradientModel.getObject();
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Primary} to component
+ *
+ * @return behavior that adds primary background color to component
+ */
+ public static BackgroundColorBehavior primary() {
+ return new BackgroundColorBehavior(BackgroundColor.Primary);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Primary_Subtle} to component
+ *
+ * @return behavior that adds primary subtle background color to component
+ */
+ public static BackgroundColorBehavior primarySubtle() {
+ return new BackgroundColorBehavior(BackgroundColor.Primary_Subtle);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Secondary} to component
+ *
+ * @return behavior that adds secondary background color to component
+ */
+ public static BackgroundColorBehavior secondary() {
+ return new BackgroundColorBehavior(BackgroundColor.Secondary);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Secondary_Subtle} to component
+ *
+ * @return behavior that adds secondary subtle background color to component
+ */
+ public static BackgroundColorBehavior secondarySubtle() {
+ return new BackgroundColorBehavior(BackgroundColor.Secondary_Subtle);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Success} to component
+ *
+ * @return behavior that adds success background color to component
+ */
+ public static BackgroundColorBehavior success() {
+ return new BackgroundColorBehavior(BackgroundColor.Success);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Success_Subtle} to component
+ *
+ * @return behavior that adds success subtle background color to component
+ */
+ public static BackgroundColorBehavior successSubtle() {
+ return new BackgroundColorBehavior(BackgroundColor.Success_Subtle);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Danger} to component
+ *
+ * @return behavior that adds danger background color to component
+ */
+ public static BackgroundColorBehavior danger() {
+ return new BackgroundColorBehavior(BackgroundColor.Danger);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Danger_Subtle} to component
+ *
+ * @return behavior that adds danger subtle background color to component
+ */
+ public static BackgroundColorBehavior dangerSubtle() {
+ return new BackgroundColorBehavior(BackgroundColor.Danger_Subtle);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Warning} to component
+ *
+ * @return behavior that adds warning background color to component
+ */
+ public static BackgroundColorBehavior warning() {
+ return new BackgroundColorBehavior(BackgroundColor.Warning);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Warning_Subtle} to component
+ *
+ * @return behavior that adds warning subtle background color to component
+ */
+ public static BackgroundColorBehavior warningSubtle() {
+ return new BackgroundColorBehavior(BackgroundColor.Warning_Subtle);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Info} to component
+ *
+ * @return behavior that adds info background color to component
+ */
+ public static BackgroundColorBehavior info() {
+ return new BackgroundColorBehavior(BackgroundColor.Info);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Info_Subtle} to component
+ *
+ * @return behavior that adds info subtle background color to component
+ */
+ public static BackgroundColorBehavior infoSubtle() {
+ return new BackgroundColorBehavior(BackgroundColor.Info_Subtle);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Light} to component
+ *
+ * @return behavior that adds light background color to component
+ */
+ public static BackgroundColorBehavior light() {
+ return new BackgroundColorBehavior(BackgroundColor.Light);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Light_Subtle} to component
+ *
+ * @return behavior that adds light subtle background color to component
+ */
+ public static BackgroundColorBehavior lightSubtle() {
+ return new BackgroundColorBehavior(BackgroundColor.Light_Subtle);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Dark} to component
+ *
+ * @return behavior that adds dark background color to component
+ */
+ public static BackgroundColorBehavior dark() {
+ return new BackgroundColorBehavior(BackgroundColor.Dark);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Dark_Subtle} to component
+ *
+ * @return behavior that adds dark subtle background color to component
+ */
+ public static BackgroundColorBehavior darkSubtle() {
+ return new BackgroundColorBehavior(BackgroundColor.Dark_Subtle);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Body_Secondary} to component
+ *
+ * @return behavior that adds body secondary background color to component
+ */
+ public static BackgroundColorBehavior bodySecondary() {
+ return new BackgroundColorBehavior(BackgroundColor.Body_Secondary);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Body_Tertiary} to component
+ *
+ * @return behavior that adds body tertiary background color to component
+ */
+ public static BackgroundColorBehavior bodyTertiary() {
+ return new BackgroundColorBehavior(BackgroundColor.Body_Tertiary);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Body} to component
+ *
+ * @return behavior that adds body background color to component
+ */
+ public static BackgroundColorBehavior body() {
+ return new BackgroundColorBehavior(BackgroundColor.Body);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Black} to component
+ *
+ * @return behavior that adds black background color to component
+ */
+ public static BackgroundColorBehavior black() {
+ return new BackgroundColorBehavior(BackgroundColor.Black);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#White} to component
+ *
+ * @return behavior that adds white background color to component
+ */
+ public static BackgroundColorBehavior white() {
+ return new BackgroundColorBehavior(BackgroundColor.White);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link BackgroundColor#Transparent} to component
+ *
+ * @return behavior that adds transparent background color to component
+ */
+ public static BackgroundColorBehavior transparent() {
+ return new BackgroundColorBehavior(BackgroundColor.Transparent);
+ }
}
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/BackgroundOpacity.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/BackgroundOpacity.java
new file mode 100644
index 000000000..b0772aa0e
--- /dev/null
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/BackgroundOpacity.java
@@ -0,0 +1,30 @@
+package de.agilecoders.wicket.core.markup.html.bootstrap.utilities;
+
+import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.ICssClassNameProvider;
+
+/**
+ * Enumeration that provides opacity css classes for backgrounds
+ *
+ *
+ * @author Matthias Drummer
+ */
+public enum BackgroundOpacity implements ICssClassNameProvider {
+
+ Opacity_10("opacity-10"),
+ Opacity_25("opacity-25"),
+ Opacity_50("opacity-50"),
+ Opacity_75("opacity-75"),
+ Opacity_100("opacity-100"),
+ ;
+
+ private final String cssClassName;
+
+ BackgroundOpacity(final String value) {
+ this.cssClassName = "bg-" + value;
+ }
+
+ @Override
+ public String cssClassName() {
+ return cssClassName;
+ }
+}
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/ColorBehavior.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/ColorBehavior.java
deleted file mode 100644
index 63c536125..000000000
--- a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/ColorBehavior.java
+++ /dev/null
@@ -1,318 +0,0 @@
-package de.agilecoders.wicket.core.markup.html.bootstrap.utilities;
-
-import org.apache.wicket.Component;
-import org.apache.wicket.markup.ComponentTag;
-import org.apache.wicket.model.IModel;
-import org.apache.wicket.model.Model;
-
-import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.BootstrapBaseBehavior;
-import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.ICssClassNameProvider;
-import de.agilecoders.wicket.core.util.Attributes;
-
-/**
- * Adds color utility classes to components.
- * See: https://getbootstrap.com/docs/5.3/utilities/colors/
- *
- * TODO add more colors for BS 5
- * @author Jan Ferko
- */
-public class ColorBehavior extends BootstrapBaseBehavior {
-
- /**
- * Enum of available text colors.
- */
- public enum Color implements ICssClassNameProvider {
- Primary("primary"),
- Primary_emphasis("primary-emphasis"),
- Secondary("secondary"),
- Secondary_emphasis("secondary-emphasis"),
- Success("success"),
- Success_emphasis("success-emphasis"),
- Danger("danger"),
- Danger_emphasis("danger-emphasis"),
- Warning("warning"),
- Warning_emphasis("warning-emphasis"),
- Info("info"),
- Info_emphasis("info-emphasis"),
- Light("light"),
- Light_emphasis("light-emphasis"),
- Dark("dark"),
- Dark_emphasis("dark-emphasis"),
- Body("body"),
- Body_emphasis("body-emphasis"),
- Body_secondary("body-secondary"),
- Body_tertiary("body-tertiary"),
- White("white"),
- Black("black"),
- Black50("black-50"),
- White50("white-50");
-
- private final String cssClassName;
-
- Color(String value) {
- this.cssClassName = "text-" + value;
- }
-
- /**
- * Css class associated with this color.
- * @return Css class associated with this color.
- */
- public String cssClassName() {
- return cssClassName;
- }
- }
-
- /**
- * Color that should be added to component.
- */
- private IModel colorModel;
-
- /**
- * Constructs new instance for given color.
- * @param color the color that should be added to component.
- */
- public ColorBehavior(Color color) {
- this(Model.of(color));
- }
-
- /**
- * @param colorModel
- */
- public ColorBehavior(IModel colorModel)
- {
- this.colorModel = colorModel;
- }
-
-
- @Override
- public void onComponentTag(Component component, ComponentTag tag) {
- super.onComponentTag(component, tag);
-
- Attributes.addClass(tag, colorModel.getObject());
- }
- /**
- * Sets color.
- * @param color
- * @return this for chaining
- */
- public ColorBehavior color(Color color) {
- colorModel.setObject(color);
- return this;
- }
-
- /**
- * Sets color model.
- * @param colorModel
- * @return this for chaining
- */
- public ColorBehavior color(IModel colorModel) {
- this.colorModel = colorModel;
- return this;
- }
-
- /**
- * @return color
- */
- public Color getColor() {
- return colorModel.getObject();
- }
-
- /**
- * @return color model
- */
- public IModel getColorModel() {
- return colorModel;
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Primary} to component
- * @return behavior that adds primary color to component
- */
- public static ColorBehavior primary() {
- return new ColorBehavior(Color.Primary);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Primary_emphasis} to component
- * @return behavior that adds primary emphasis color to component
- */
- public static ColorBehavior primaryEmphasis() {
- return new ColorBehavior(Color.Primary_emphasis);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Secondary} to component
- * @return behavior that adds secondary color to component
- */
- public static ColorBehavior secondary() {
- return new ColorBehavior(Color.Secondary);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Secondary_emphasis} to component
- * @return behavior that adds secondary emphasis color to component
- */
- public static ColorBehavior secondaryEmphasis() {
- return new ColorBehavior(Color.Secondary_emphasis);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Success} to component
- * @return behavior that adds success color to component
- */
- public static ColorBehavior success() {
- return new ColorBehavior(Color.Success);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Success_emphasis} to component
- * @return behavior that adds success emphasis color to component
- */
- public static ColorBehavior successEmphasis() {
- return new ColorBehavior(Color.Success_emphasis);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Danger} to component
- * @return behavior that adds danger color to component
- */
- public static ColorBehavior danger() {
- return new ColorBehavior(Color.Danger);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Danger_emphasis} to component
- * @return behavior that adds danger emphasis color to component
- */
- public static ColorBehavior dangerEmphasis() {
- return new ColorBehavior(Color.Danger_emphasis);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Warning} to component
- * @return behavior that adds warning color to component
- */
- public static ColorBehavior warning() {
- return new ColorBehavior(Color.Warning);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Warning_emphasis} to component
- * @return behavior that adds warning emphasis color to component
- */
- public static ColorBehavior warningEmphasis() {
- return new ColorBehavior(Color.Warning_emphasis);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Info} to component
- * @return behavior that adds info color to component
- */
- public static ColorBehavior info() {
- return new ColorBehavior(Color.Info);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Info_emphasis} to component
- * @return behavior that adds info emphasis color to component
- */
- public static ColorBehavior infoEmphasis() {
- return new ColorBehavior(Color.Info_emphasis);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Light} to component
- * @return behavior that adds light color to component
- */
- public static ColorBehavior light() {
- return new ColorBehavior(Color.Light);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Light_emphasis} to component
- * @return behavior that adds light emphasis color to component
- */
- public static ColorBehavior lightEmphasis() {
- return new ColorBehavior(Color.Light_emphasis);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Dark} to component
- * @return behavior that adds dark color to component
- */
- public static ColorBehavior dark() {
- return new ColorBehavior(Color.Dark);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Dark_emphasis} to component
- * @return behavior that adds dark emphasis color to component
- */
- public static ColorBehavior darkEmphasis() {
- return new ColorBehavior(Color.Dark_emphasis);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Body} to component
- * @return behavior that adds body color to component
- */
- public static ColorBehavior body() {
- return new ColorBehavior(Color.Body);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Body_emphasis} to component
- * @return behavior that adds body emphasis color to component
- */
- public static ColorBehavior bodyEmphasis() {
- return new ColorBehavior(Color.Body_emphasis);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Body_secondary} to component
- * @return behavior that adds body secondary color to component
- */
- public static ColorBehavior bodySecondary() {
- return new ColorBehavior(Color.Body_secondary);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Body_tertiary} to component
- * @return behavior that adds body tertiary color to component
- */
- public static ColorBehavior bodyTertiary() {
- return new ColorBehavior(Color.Body_tertiary);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#White} to component
- * @return behavior that adds white color to component
- */
- public static ColorBehavior white() {
- return new ColorBehavior(Color.White);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Black} to component
- * @return behavior that adds black color to component
- */
- public static ColorBehavior black() {
- return new ColorBehavior(Color.Black);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#Black50} to component
- * @return behavior that adds black-50 color to component
- */
- public static ColorBehavior black50() {
- return new ColorBehavior(Color.Black50);
- }
-
- /**
- * Constructs new behavior that adds {@link Color#White50} to component
- * @return behavior that adds white-50 color to component
- */
- public static ColorBehavior white50() {
- return new ColorBehavior(Color.White50);
- }
-}
diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/TextColorBehavior.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/TextColorBehavior.java
new file mode 100644
index 000000000..a02ffa272
--- /dev/null
+++ b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/TextColorBehavior.java
@@ -0,0 +1,397 @@
+package de.agilecoders.wicket.core.markup.html.bootstrap.utilities;
+
+import java.util.Objects;
+import java.util.Optional;
+import org.apache.wicket.Component;
+import org.apache.wicket.markup.ComponentTag;
+import org.apache.wicket.model.IModel;
+import org.apache.wicket.model.Model;
+import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.BootstrapBaseBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.ICssClassNameProvider;
+import de.agilecoders.wicket.core.util.Attributes;
+
+/**
+ * Adds text color utility classes to components.
+ *
+ * See: https://getbootstrap.com/docs/5.3/utilities/colors/
+ *
+ * @author Jan Ferko
+ */
+public class TextColorBehavior extends BootstrapBaseBehavior {
+
+ /**
+ * Enumeration that contains all Bootstrap TextColors.
+ *
+ *
+ * @author Jan Ferko
+ */
+ public enum TextColor implements ICssClassNameProvider {
+
+ Primary("primary"),
+ Primary_Emphasis("primary-emphasis"),
+ Secondary("secondary"),
+ Secondary_Emphasis("secondary-emphasis"),
+ Success("success"),
+ Success_Emphasis("success-emphasis"),
+ Danger("danger"),
+ Danger_Emphasis("danger-emphasis"),
+ Warning("warning"),
+ Warning_Emphasis("warning-emphasis"),
+ Info("info"),
+ Info_Emphasis("info-emphasis"),
+ Light("light"),
+ Light_Emphasis("light-emphasis"),
+ Dark("dark"),
+ Dark_Emphasis("dark-emphasis"),
+ Body("body"),
+ Body_Emphasis("body-emphasis"),
+ Body_Secondary("body-secondary"),
+ Body_Tertiary("body-tertiary"),
+ White("white"),
+ Black("black"),
+ @Deprecated(forRemoval = true) // https://getbootstrap.com/docs/5.3/utilities/colors/ Documentation says it is deprecated and will be removed with BS-6.0.0
+ Black50("black-50"),
+ @Deprecated(forRemoval = true) // https://getbootstrap.com/docs/5.3/utilities/colors/ Documentation says it is deprecated and will be removed with BS-6.0.0
+ White50("white-50"),
+ ;
+
+ private final String cssClassName;
+
+ /**
+ * Css class associated with this color.
+ *
+ * @return Css class associated with this color.
+ */
+ TextColor(final String value) {
+ this.cssClassName = "text-" + value;
+ }
+
+ @Override
+ public String cssClassName() {
+ return cssClassName;
+ }
+ }
+
+ /**
+ * Enumeration of available text opacities.
+ *
+ *
+ * @author Matthias Drummer
+ */
+ public enum TextOpacity implements ICssClassNameProvider {
+
+ Opacity_25("opacity-25"),
+ Opacity_50("opacity-50"),
+ Opacity_75("opacity-75"),
+ Opacity_100("opacity-100"),
+ ;
+
+ private final String cssClassName;
+
+ TextOpacity(final String value) {
+ this.cssClassName = "text-" + value;
+ }
+
+ @Override
+ public String cssClassName() {
+ return cssClassName;
+ }
+ }
+
+ /**
+ * Color that should be added to component.
+ */
+ private final IModel textColorModel;
+
+ /**
+ * If any opacity should be added to the text.
+ */
+ private final IModel textOpacityModel = Model.of();
+
+ /**
+ * Constructs new instance for given color.
+ *
+ * @param color the color that should be added to component.
+ */
+ public TextColorBehavior(final TextColor color) {
+ this(Model.of(color));
+ }
+
+ /**
+ * @param colorModel
+ */
+ public TextColorBehavior(final IModel colorModel) {
+ this.textColorModel = colorModel;
+ }
+
+ @Override
+ public void onComponentTag(Component component, ComponentTag tag) {
+ super.onComponentTag(component, tag);
+
+ Attributes.addClass(tag, textColorModel.getObject());
+ if (Objects.nonNull(textOpacityModel.getObject())) {
+ Attributes.addClass(tag, textOpacityModel.getObject());
+ }
+ }
+
+ /**
+ * Sets color.
+ *
+ * @param color
+ * @return this for chaining
+ */
+ public TextColorBehavior withTextColor(final TextColor color) {
+ textColorModel.setObject(color);
+ return this;
+ }
+
+ /**
+ * @return color
+ */
+ public TextColor getTextColor() {
+ return textColorModel.getObject();
+ }
+
+ /**
+ * @return color model
+ */
+ public IModel getTextColorModel() {
+ return textColorModel;
+ }
+
+ /**
+ * Sets opacity to the text. Null will disable opacity.
+ *
+ * @param textOpacity the {@link TextOpacity}
+ * @return this for chaining
+ */
+ public TextColorBehavior withTextOpacity(final TextOpacity textOpacity) {
+ this.textOpacityModel.setObject(textOpacity);
+ return this;
+ }
+
+ /**
+ * Returns the {@link TextOpacity} which is set. Can be empty.
+ *
+ * @return the text opacity
+ */
+ public Optional getTextOpacity() {
+ return Optional.ofNullable(textOpacityModel.getObject());
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Primary} to component
+ *
+ * @return behavior that adds primary color to component
+ */
+ public static TextColorBehavior primary() {
+ return new TextColorBehavior(TextColor.Primary);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Primary_Emphasis} to component
+ *
+ * @return behavior that adds primary emphasis color to component
+ */
+ public static TextColorBehavior primaryEmphasis() {
+ return new TextColorBehavior(TextColor.Primary_Emphasis);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Secondary} to component
+ *
+ * @return behavior that adds secondary color to component
+ */
+ public static TextColorBehavior secondary() {
+ return new TextColorBehavior(TextColor.Secondary);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Secondary_Emphasis} to component
+ *
+ * @return behavior that adds secondary emphasis color to component
+ */
+ public static TextColorBehavior secondaryEmphasis() {
+ return new TextColorBehavior(TextColor.Secondary_Emphasis);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Success} to component
+ *
+ * @return behavior that adds success color to component
+ */
+ public static TextColorBehavior success() {
+ return new TextColorBehavior(TextColor.Success);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Success_Emphasis} to component
+ *
+ * @return behavior that adds success emphasis color to component
+ */
+ public static TextColorBehavior successEmphasis() {
+ return new TextColorBehavior(TextColor.Success_Emphasis);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Danger} to component
+ *
+ * @return behavior that adds danger color to component
+ */
+ public static TextColorBehavior danger() {
+ return new TextColorBehavior(TextColor.Danger);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Danger_Emphasis} to component
+ *
+ * @return behavior that adds danger emphasis color to component
+ */
+ public static TextColorBehavior dangerEmphasis() {
+ return new TextColorBehavior(TextColor.Danger_Emphasis);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Warning} to component
+ *
+ * @return behavior that adds warning color to component
+ */
+ public static TextColorBehavior warning() {
+ return new TextColorBehavior(TextColor.Warning);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Warning_Emphasis} to component
+ *
+ * @return behavior that adds warning emphasis color to component
+ */
+ public static TextColorBehavior warningEmphasis() {
+ return new TextColorBehavior(TextColor.Warning_Emphasis);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Info} to component
+ *
+ * @return behavior that adds info color to component
+ */
+ public static TextColorBehavior info() {
+ return new TextColorBehavior(TextColor.Info);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Info_Emphasis} to component
+ *
+ * @return behavior that adds info emphasis color to component
+ */
+ public static TextColorBehavior infoEmphasis() {
+ return new TextColorBehavior(TextColor.Info_Emphasis);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Light} to component
+ *
+ * @return behavior that adds light color to component
+ */
+ public static TextColorBehavior light() {
+ return new TextColorBehavior(TextColor.Light);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Light_Emphasis} to component
+ *
+ * @return behavior that adds light emphasis color to component
+ */
+ public static TextColorBehavior lightEmphasis() {
+ return new TextColorBehavior(TextColor.Light_Emphasis);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Dark} to component
+ *
+ * @return behavior that adds dark color to component
+ */
+ public static TextColorBehavior dark() {
+ return new TextColorBehavior(TextColor.Dark);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Dark_Emphasis} to component
+ *
+ * @return behavior that adds dark emphasis color to component
+ */
+ public static TextColorBehavior darkEmphasis() {
+ return new TextColorBehavior(TextColor.Dark_Emphasis);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Body} to component
+ *
+ * @return behavior that adds body color to component
+ */
+ public static TextColorBehavior body() {
+ return new TextColorBehavior(TextColor.Body);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Body_Emphasis} to component
+ *
+ * @return behavior that adds body emphasis color to component
+ */
+ public static TextColorBehavior bodyEmphasis() {
+ return new TextColorBehavior(TextColor.Body_Emphasis);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Body_Secondary} to component
+ *
+ * @return behavior that adds body secondary color to component
+ */
+ public static TextColorBehavior bodySecondary() {
+ return new TextColorBehavior(TextColor.Body_Secondary);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Body_Tertiary} to component
+ *
+ * @return behavior that adds body tertiary color to component
+ */
+ public static TextColorBehavior bodyTertiary() {
+ return new TextColorBehavior(TextColor.Body_Tertiary);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#White} to component
+ *
+ * @return behavior that adds white color to component
+ */
+ public static TextColorBehavior white() {
+ return new TextColorBehavior(TextColor.White);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Black} to component
+ *
+ * @return behavior that adds black color to component
+ */
+ public static TextColorBehavior black() {
+ return new TextColorBehavior(TextColor.Black);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#Black50} to component
+ *
+ * @return behavior that adds black-50 color to component
+ */
+ public static TextColorBehavior black50() {
+ return new TextColorBehavior(TextColor.Black50);
+ }
+
+ /**
+ * Constructs new behavior that adds {@link TextColor#White50} to component
+ *
+ * @return behavior that adds white-50 color to component
+ */
+ public static TextColorBehavior white50() {
+ return new TextColorBehavior(TextColor.White50);
+ }
+}
diff --git a/bootstrap-core/src/main/java/module-info.java b/bootstrap-core/src/main/java/module-info.java
index f2d649cc7..0da69254b 100644
--- a/bootstrap-core/src/main/java/module-info.java
+++ b/bootstrap-core/src/main/java/module-info.java
@@ -33,8 +33,9 @@
exports de.agilecoders.wicket.core.markup.html.themes.bootstrap;
exports de.agilecoders.wicket.core.settings;
exports de.agilecoders.wicket.core.util;
+ exports de.agilecoders.wicket.core.markup.html.bootstrap.helpers;
- requires org.apache.commons.lang3;
+ requires org.apache.commons.lang3;
requires org.apache.wicket.core;
requires org.apache.wicket.extensions;
diff --git a/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/ProgressBarTest.java b/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/ProgressBarTest.java
index 0e5f83638..ce8f76395 100644
--- a/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/ProgressBarTest.java
+++ b/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/ProgressBarTest.java
@@ -4,9 +4,8 @@
import org.apache.wicket.model.Model;
import org.apache.wicket.util.tester.TagTester;
import org.junit.jupiter.api.Test;
-
import de.agilecoders.wicket.core.WicketApplicationTest;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.BackgroundColor;
import de.agilecoders.wicket.core.util.CssClassNames.Helper;
/**
@@ -45,7 +44,7 @@ void progressBarWithDefaultStackMarkup() {
tester().getApplication().getMarkupSettings().setStripWicketTags(true);
String markupId = "progressBar";
int progress = 23;
- ProgressBar progressBar = new ProgressBar(id(), Model.of(progress), BackgroundColorBehavior.Color.Danger);
+ ProgressBar progressBar = new ProgressBar(id(), Model.of(progress), BackgroundColor.Danger);
progressBar.setMarkupId(markupId);
progressBar.active(true);
diff --git a/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/navbar/NavbarTest.java b/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/navbar/NavbarTest.java
index 9d91fc4a2..5f0f8888f 100644
--- a/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/navbar/NavbarTest.java
+++ b/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/navbar/NavbarTest.java
@@ -1,22 +1,20 @@
package de.agilecoders.wicket.core.markup.html.bootstrap.navbar;
-import de.agilecoders.wicket.core.WicketApplicationTest;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
-import de.agilecoders.wicket.core.markup.html.bootstrap.image.IconType;
+import static org.hamcrest.CoreMatchers.containsString;
+import static org.hamcrest.CoreMatchers.equalTo;
+import static org.hamcrest.CoreMatchers.is;
+import static org.hamcrest.MatcherAssert.assertThat;
+import java.util.ArrayList;
+import java.util.List;
import org.apache.wicket.Component;
import org.apache.wicket.Page;
import org.apache.wicket.model.Model;
import org.apache.wicket.util.tester.TagTester;
import org.apache.wicket.util.visit.IVisitor;
import org.junit.jupiter.api.Test;
-
-import java.util.ArrayList;
-import java.util.List;
-
-import static org.hamcrest.CoreMatchers.containsString;
-import static org.hamcrest.CoreMatchers.equalTo;
-import static org.hamcrest.CoreMatchers.is;
-import static org.hamcrest.MatcherAssert.assertThat;
+import de.agilecoders.wicket.core.WicketApplicationTest;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.BackgroundColor;
+import de.agilecoders.wicket.core.markup.html.bootstrap.image.IconType;
/**
* Tests the {@code Navbar de.agilecoders.wicket.core.markup.html.bootstrap.navbar.Navbar}.
@@ -157,12 +155,12 @@ void buttonWithIconIsAddedToLeftNavigation() {
@Override
public Component create(String markupId) {
return new NavbarButton(Page.class, Model.of("Link Name"))
- .setIconType(new IconType("test-icon") {
- @Override
- public String cssClassName() {
- return "test-icon";
- }
- });
+ .setIconType(new IconType("test-icon") {
+ @Override
+ public String cssClassName() {
+ return "test-icon";
+ }
+ });
}
@Override
@@ -183,8 +181,9 @@ void allComponents_areStateless() {
Navbar navbar = new Navbar("id");
navbar.visitChildren((IVisitor) (component, arg1) -> {
- if (!component.isStateless())
+ if (!component.isStateless()) {
statefulComponents.add(component.getId());
+ }
});
assertThat(statefulComponents.size(), is(equalTo(0)));
@@ -193,7 +192,7 @@ void allComponents_areStateless() {
@Test
void navbarBackgroundIsRendered() {
Navbar navbar = new Navbar("id")
- .setBackgroundColor(BackgroundColorBehavior.Color.Success);
+ .setBackgroundColor(BackgroundColor.Success);
tester().startComponentInPage(navbar);
@@ -206,7 +205,7 @@ void navbarBackgroundIsRendered() {
@Test
void navbarCollapseBreakpointIsRendered() {
Navbar navbar = new Navbar("id")
- .setCollapseBreakdown(Navbar.CollapseBreakpoint.Small);
+ .setCollapseBreakdown(Navbar.CollapseBreakpoint.Small);
tester().startComponentInPage(navbar);
diff --git a/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/BackgroundColorBehaviorTest.java b/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/BackgroundColorBehaviorTest.java
index 7357ee2e7..69161b756 100644
--- a/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/BackgroundColorBehaviorTest.java
+++ b/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/BackgroundColorBehaviorTest.java
@@ -1,32 +1,60 @@
package de.agilecoders.wicket.core.markup.html.bootstrap.utilities;
import org.apache.wicket.util.tester.TagTester;
-
-import de.agilecoders.wicket.core.WicketApplicationTest;
import org.junit.jupiter.api.Test;
+import de.agilecoders.wicket.core.WicketApplicationTest;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.BackgroundColor;
/**
* @author Jan Ferko
*/
class BackgroundColorBehaviorTest extends WicketApplicationTest {
- @Test
- void testRendersCorrectCssClass() {
- for (ColorBehavior.Color color : ColorBehavior.Color.values()) {
- String markup = "";
-
- TagTester tag = startBehaviorInPage(new ColorBehavior(color), markup);
- assertCssClass(tag, color.cssClassName());
- }
- }
-
- @Test
- void testPreserveOtherCssClasses() {
- String markup = "";
- ColorBehavior behavior = ColorBehavior.info();
-
- TagTester tag = startBehaviorInPage(behavior, markup);
-
- assertCssClass(tag, "my-class");
- }
+ @Test
+ void testRendersCorrectCssClass() {
+ for (BackgroundColorBehavior.BackgroundColor color : BackgroundColorBehavior.BackgroundColor.values()) {
+ String markup = "";
+
+ TagTester tag = startBehaviorInPage(new BackgroundColorBehavior(color), markup);
+ assertCssClass(tag, color.cssClassName());
+ }
+ }
+
+ @Test
+ void testPreserveOtherCssClasses() {
+ String markup = "";
+ BackgroundColorBehavior behavior = BackgroundColorBehavior.info();
+
+ TagTester tag = startBehaviorInPage(behavior, markup);
+ assertCssClass(tag, "my-class");
+ }
+
+ @Test
+ void testGradientCssClasses() {
+ for (BackgroundColorBehavior.BackgroundColor color : BackgroundColorBehavior.BackgroundColor.values()) {
+ String markup = "";
+
+ TagTester tag = startBehaviorInPage(new BackgroundColorBehavior(color).withGradient(true), markup);
+ assertCssClass(tag, color.cssClassName());
+ assertCssClass(tag, "bg-gradient");
+ }
+ }
+
+ @Test
+ void testOpacityCssClasses() {
+ final String markup = "";
+ for (final BackgroundOpacity backgroundOpacity : BackgroundOpacity.values()) {
+ TagTester tag = startBehaviorInPage(new BackgroundColorBehavior(BackgroundColor.Danger).withOpacity(backgroundOpacity), markup);
+ assertCssClass(tag, BackgroundColor.Danger.cssClassName());
+ assertCssClass(tag, backgroundOpacity.cssClassName());
+ }
+
+ // Test opacity null
+ final BackgroundColorBehavior behavior = BackgroundColorBehavior.dark().withOpacity(null);
+ TagTester tag = startBehaviorInPage(behavior, markup);
+ assertCssClass(tag, BackgroundColor.Dark.cssClassName());
+ for (final BackgroundOpacity backgroundOpacity : BackgroundOpacity.values()) {
+ assertNotContainsCssClass(tag, backgroundOpacity.cssClassName());
+ }
+ }
}
diff --git a/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/ColorBehaviorTest.java b/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/ColorBehaviorTest.java
deleted file mode 100644
index 66cbd0dca..000000000
--- a/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/ColorBehaviorTest.java
+++ /dev/null
@@ -1,32 +0,0 @@
-package de.agilecoders.wicket.core.markup.html.bootstrap.utilities;
-
-import org.apache.wicket.util.tester.TagTester;
-
-import de.agilecoders.wicket.core.WicketApplicationTest;
-import org.junit.jupiter.api.Test;
-
-/**
- * @author Jan Ferko
- */
-class ColorBehaviorTest extends WicketApplicationTest {
-
- @Test
- void testRendersCorrectCssClass() {
- for (ColorBehavior.Color color : ColorBehavior.Color.values()) {
- String markup = "";
-
- TagTester tag = startBehaviorInPage(new ColorBehavior(color), markup);
- assertCssClass(tag, color.cssClassName());
- }
- }
-
- @Test
- void testPreserveOtherCssClasses() {
- String markup = "";
- ColorBehavior behavior = ColorBehavior.info();
-
- TagTester tag = startBehaviorInPage(behavior, markup);
-
- assertCssClass(tag, "my-class");
- }
-}
diff --git a/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/color/TextAndBackgroundColorBehaviorTest.java b/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/color/TextAndBackgroundColorBehaviorTest.java
new file mode 100644
index 000000000..834a47bd3
--- /dev/null
+++ b/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/color/TextAndBackgroundColorBehaviorTest.java
@@ -0,0 +1,32 @@
+package de.agilecoders.wicket.core.markup.html.bootstrap.utilities.color;
+
+import org.apache.wicket.util.tester.TagTester;
+import org.junit.jupiter.api.Test;
+import de.agilecoders.wicket.core.WicketApplicationTest;
+import de.agilecoders.wicket.core.markup.html.bootstrap.helpers.TextAndBackgroundColorBehavior.TextAndBackgroundColor;
+import de.agilecoders.wicket.core.markup.html.bootstrap.helpers.TextAndBackgroundColorBehavior;
+
+/**
+ * Tests for {@link TextAndBackgroundColorBehavior}.
+ */
+class TextAndBackgroundColorBehaviorTest extends WicketApplicationTest {
+
+ @Test
+ void testRendersCorrectCssClass() {
+ for (TextAndBackgroundColor color : TextAndBackgroundColor.values()) {
+ String markup = "";
+
+ TagTester tag = startBehaviorInPage(new TextAndBackgroundColorBehavior(color), markup);
+ assertCssClass(tag, color.cssClassName());
+ }
+ }
+
+ @Test
+ void testPreserveOtherCssClasses() {
+ String markup = "";
+ TextAndBackgroundColorBehavior behavior = TextAndBackgroundColorBehavior.info();
+
+ TagTester tag = startBehaviorInPage(behavior, markup);
+ assertCssClass(tag, "my-class");
+ }
+}
diff --git a/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/color/TextColorBehaviorTest.java b/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/color/TextColorBehaviorTest.java
new file mode 100644
index 000000000..5b463a1d5
--- /dev/null
+++ b/bootstrap-core/src/test/java/de/agilecoders/wicket/core/markup/html/bootstrap/utilities/color/TextColorBehaviorTest.java
@@ -0,0 +1,51 @@
+package de.agilecoders.wicket.core.markup.html.bootstrap.utilities.color;
+
+import org.apache.wicket.util.tester.TagTester;
+import org.junit.jupiter.api.Test;
+import de.agilecoders.wicket.core.WicketApplicationTest;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.TextColorBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.TextColorBehavior.TextColor;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.TextColorBehavior.TextOpacity;
+
+/**
+ * @author Jan Ferko
+ */
+class TextColorBehaviorTest extends WicketApplicationTest {
+
+ @Test
+ void testRendersCorrectCssClass() {
+ for (TextColorBehavior.TextColor color : TextColorBehavior.TextColor.values()) {
+ String markup = "";
+
+ TagTester tag = startBehaviorInPage(new TextColorBehavior(color), markup);
+ assertCssClass(tag, color.cssClassName());
+ }
+ }
+
+ @Test
+ void testPreserveOtherCssClasses() {
+ String markup = "";
+ TextColorBehavior behavior = TextColorBehavior.info();
+
+ TagTester tag = startBehaviorInPage(behavior, markup);
+ assertCssClass(tag, "my-class");
+ }
+
+ @Test
+ void testOpacityCssClass() {
+ final String markup = "";
+ TextColorBehavior behavior = TextColorBehavior.info().withTextOpacity(TextOpacity.Opacity_50);
+
+ TagTester tag = startBehaviorInPage(behavior, markup);
+ assertCssClass(tag, TextColor.Info.cssClassName());
+ assertCssClass(tag, TextOpacity.Opacity_50.cssClassName());
+
+ // Test opacity null
+ behavior = TextColorBehavior.dark().withTextOpacity(null);
+ tag = startBehaviorInPage(behavior, markup);
+ assertCssClass(tag, TextColor.Dark.cssClassName());
+ for (final TextOpacity textOpacity : TextOpacity.values()) {
+ assertNotContainsCssClass(tag, textOpacity.cssClassName());
+ }
+ }
+}
diff --git a/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/table/filter/BootstrapSelectFilter.html b/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/table/filter/BootstrapSelectFilter.html
index 29598b8ee..d141e2b4e 100644
--- a/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/table/filter/BootstrapSelectFilter.html
+++ b/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/table/filter/BootstrapSelectFilter.html
@@ -1,2 +1,2 @@
-BaseCssPage
+
+ BaseCssPage
-
-
-
- CSS
-
- Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
-
-
-
-
-
-
-
- Looking for Bootstrap 2.3.2 docs?
-
- We've moved it to a new home while we push forward with Bootstrap 3. Read the blog for details.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Typography
-
-
-Headings
-
-All HTML headings, <h1> through <h6> are available.
-
-
- h1. Heading 1
-
- h2. Heading 2
-
- h3. Heading 3
- h4. Heading 4
- h5. Heading 5
- h6. Heading 6
-
-
-Body copy
-
-Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
-
-
- Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
-
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
-
- Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
-
-<p>...</p>
-
-Lead body copy
-
-Make a paragraph stand out by adding .lead.
-
-
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
-
-<p class="lead">...</p>
-
-Built with Less
-
-The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
-
-
-
-
-
-Emphasis
-
-Make use of HTML's default emphasis tags with lightweight styles.
-
-<small>
-
-For de-emphasizing inline or blocks of text,
- use the small tag.
-
-
-
- This line of text is meant to be treated as fine print.
-
-
-
+
+
+
+ CSS
+ Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
+
+
+
+
+
+ Looking for the Bootstrap 5 docs? Bootstrap 5 documentation
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Typography
+
+
+ Headings
+
+ All HTML headings, <h1> through <h6> are available.
+
+
+ h1. Heading 1
+
+ h2. Heading 2
+
+ h3. Heading 3
+ h4. Heading 4
+ h5. Heading 5
+ h6. Heading 6
+
+
+ Body copy
+
+ Bootstrap's global default font-size is 14px, with a line-height of
+ 20px. This is applied to the <body> and all paragraphs. In addition,
+ <p>
+ (paragraphs) receive a bottom margin of half their line-height (10px by default).
+
+
+ Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes,
+ nascetur
+ ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
+
+ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus
+ auctor
+ fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec
+ ullamcorper
+ nulla non metus auctor fringilla.
+
+ Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis
+ mollis,
+ est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+
+ <p>...</p>
+
+ Lead body copy
+
+ Make a paragraph stand out by adding .lead.
+
+
+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo
+ luctus.
+
+ <p class="lead">...</p>
+
+ Built with Less
+
+ The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight.
+ The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple
+ math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
+
+
+
+
+
+ Emphasis
+
+ Make use of HTML's default emphasis tags with lightweight styles.
+
+ <small>
+
+ For de-emphasizing inline or blocks of text,
+ use the small tag.
+
+
+
+ This line of text is meant to be treated as fine print.
+
+
+
<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>
-Bold
+ Bold
-For emphasizing a snippet of text with a heavier font-weight.
+ For emphasizing a snippet of text with a heavier font-weight.
-
- The following snippet of text is rendered as bold text.
-
-<strong>rendered as bold text</strong>
+
+ The following snippet of text is rendered as bold text.
+
+ <strong>rendered as bold text</strong>
-Italics
+ Italics
-For emphasizing a snippet of text with italics.
+ For emphasizing a snippet of text with italics.
-
- The following snippet of text is rendered as italicized text.
-
-<em>rendered as italicized text</em>
+
+ The following snippet of text is rendered as italicized text.
+
+ <em>rendered as italicized text</em>
-Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
+ Heads up! Feel free to use <b> and <i> in HTML5.
+ <b>
+ is meant to highlight words or phrases without conveying additional importance while <i> is mostly for
+ voice,
+ technical terms, etc.
-Emphasis classes
+ Emphasis classes
-Convey meaning through color with a handful of emphasis utility classes.
+ Convey meaning through color with a handful of emphasis utility classes.
-
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
+
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- Etiam porta sem malesuada magna mollis euismod.
+ Etiam porta sem malesuada magna mollis euismod.
- Donec ullamcorper nulla non metus auctor fringilla.
+ Donec ullamcorper nulla non metus auctor fringilla.
- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
+ Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-
-
+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
+
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
@@ -160,56 +171,60 @@ Emphasis classes
-
+
-Abbreviations
+ Abbreviations
-Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
+ Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version
+ on
+ hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover,
+ providing
+ additional context on hover.
-<abbr>
+ <abbr>
-For expanded text on long hover of an abbreviation, include the title attribute.
+ For expanded text on long hover of an abbreviation, include the title attribute.
-
- An abbreviation of the word attribute is attr.
-
-<abbr title="attribute">attr</abbr>
+
+ An abbreviation of the word attribute is attr.
+
+ <abbr title="attribute">attr</abbr>
-<abbr class="initialism">
+ <abbr class="initialism">
-Add .initialism to an abbreviation for a slightly smaller font-size.
+ Add .initialism to an abbreviation for a slightly smaller font-size.
-
- HTML is the best thing since sliced bread.
-
-<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
+
+ HTML is the best thing since sliced bread.
+
+ <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
-
+
-Addresses
+ Addresses
-Present contact information for the nearest ancestor or the entire body of work.
+ Present contact information for the nearest ancestor or the entire body of work.
-<address>
+ <address>
-Preserve formatting by ending all lines with <br>.
+ Preserve formatting by ending all lines with <br>.
-
-
- Twitter, Inc.
- 795 Folsom Ave, Suite 600
- San Francisco, CA 94107
- P: (123) 456-7890
-
-
- Full Name
- first.last@gmail.com
-
-
-
+
+
+ Twitter, Inc.
+ 795 Folsom Ave, Suite 600
+ San Francisco, CA 94107
+ P: (123) 456-7890
+
+
+ Full Name
+ first.last@gmail.com
+
+
+
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
@@ -224,166 +239,168 @@ <address>
-
+
-Blockquotes
+ Blockquotes
-For quoting blocks of content from another source within your document.
+ For quoting blocks of content from another source within your document.
-Default blockquote
+ Default blockquote
-Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
+ Wrap <blockquote> around any HTML as the quote. For straight
+ quotes we recommend a <p>.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
-
-
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
-Blockquote options
+ Blockquote options
-Style and content changes for simple variations on a standard blockquote.
+ Style and content changes for simple variations on a standard blockquote.
-Naming a source
+ Naming a source
-Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.
+ Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.
+
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Someone famous in Source Title
-
-
-
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ Someone famous in Source Title
+
+
+
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
-Alternate displays
+ Alternate displays
-Use .pull-right for a floated, right-aligned blockquote.
+ Use .pull-right for a floated, right-aligned blockquote.
-
-
+
+
<blockquote class="blockquote pull-right">
...
</blockquote>
-
-
-
-
-Lists
-
-Unordered
-
-A list of items in which the order does not explicitly matter.
-
-
-
- - Lorem ipsum dolor sit amet
- - Consectetur adipiscing elit
- - Integer molestie lorem at massa
- - Facilisis in pretium nisl aliquet
- - Nulla volutpat aliquam velit
-
- - Phasellus iaculis neque
- - Purus sodales ultricies
- - Vestibulum laoreet porttitor sem
- - Ac tristique libero volutpat at
-
-
- - Faucibus porta lacus fringilla vel
- - Aenean sit amet erat nunc
- - Eget porttitor lorem
-
-
-
+
+
+
+
+ Lists
+
+ Unordered
+
+ A list of items in which the order does not explicitly matter.
+
+
+
+ - Lorem ipsum dolor sit amet
+ - Consectetur adipiscing elit
+ - Integer molestie lorem at massa
+ - Facilisis in pretium nisl aliquet
+ - Nulla volutpat aliquam velit
+
+ - Phasellus iaculis neque
+ - Purus sodales ultricies
+ - Vestibulum laoreet porttitor sem
+ - Ac tristique libero volutpat at
+
+
+ - Faucibus porta lacus fringilla vel
+ - Aenean sit amet erat nunc
+ - Eget porttitor lorem
+
+
+
<ul>
<li>...</li>
</ul>
-Ordered
-
-A list of items in which the order does explicitly matter.
-
-
-
- - Lorem ipsum dolor sit amet
- - Consectetur adipiscing elit
- - Integer molestie lorem at massa
- - Facilisis in pretium nisl aliquet
- - Nulla volutpat aliquam velit
- - Faucibus porta lacus fringilla vel
- - Aenean sit amet erat nunc
- - Eget porttitor lorem
-
-
-
+ Ordered
+
+ A list of items in which the order does explicitly matter.
+
+
+
+ - Lorem ipsum dolor sit amet
+ - Consectetur adipiscing elit
+ - Integer molestie lorem at massa
+ - Facilisis in pretium nisl aliquet
+ - Nulla volutpat aliquam velit
+ - Faucibus porta lacus fringilla vel
+ - Aenean sit amet erat nunc
+ - Eget porttitor lorem
+
+
+
<ol>
<li>...</li>
</ol>
-Unstyled
-
-A list of items with no list-style or additional left padding.
-
-
-
- - Lorem ipsum dolor sit amet
- - Consectetur adipiscing elit
- - Integer molestie lorem at massa
- - Facilisis in pretium nisl aliquet
- - Nulla volutpat aliquam velit
-
- - Phasellus iaculis neque
- - Purus sodales ultricies
- - Vestibulum laoreet porttitor sem
- - Ac tristique libero volutpat at
-
-
- - Faucibus porta lacus fringilla vel
- - Aenean sit amet erat nunc
- - Eget porttitor lorem
-
-
-
+ Unstyled
+
+ A list of items with no list-style or additional left padding.
+
+
+
+ - Lorem ipsum dolor sit amet
+ - Consectetur adipiscing elit
+ - Integer molestie lorem at massa
+ - Facilisis in pretium nisl aliquet
+ - Nulla volutpat aliquam velit
+
+ - Phasellus iaculis neque
+ - Purus sodales ultricies
+ - Vestibulum laoreet porttitor sem
+ - Ac tristique libero volutpat at
+
+
+ - Faucibus porta lacus fringilla vel
+ - Aenean sit amet erat nunc
+ - Eget porttitor lorem
+
+
+
<ul class="list-unstyled">
<li>...</li>
</ul>
-Inline
+ Inline
-
- Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.
-
+
+ Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.
+
-
-
- - Lorem ipsum
- - Phasellus iaculis
- - Nulla volutpat
-
-
-
+
+
+ - Lorem ipsum
+ - Phasellus iaculis
+ - Nulla volutpat
+
+
+
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
@@ -392,437 +409,448 @@ Inline
-Description
+ Description
-A list of terms with their associated descriptions.
+ A list of terms with their associated descriptions.
-
-
- - Description lists
- - A description list is perfect for defining terms.
- - Euismod
- - Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- - Donec id elit non mi porta gravida at eget metus.
- - Malesuada porta
- - Etiam porta sem malesuada magna mollis euismod.
-
-
-
+
+
+ - Description lists
+ - A description list is perfect for defining terms.
+ - Euismod
+ - Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+ - Donec id elit non mi porta gravida at eget metus.
+ - Malesuada porta
+ - Etiam porta sem malesuada magna mollis euismod.
+
+
+
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
-Horizontal description
-
-Make terms and descriptions in <dl> line up side-by-side.
-
-
-
- - Description lists
- - A description list is perfect for defining terms.
- - Euismod
- -
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
-
- - Malesuada porta
- - Etiam porta sem malesuada magna mollis euismod.
- - Felis euismod semper eget lacinia
- - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
-
-
-
+ Horizontal description
+
+ Make terms and descriptions in <dl> line up side-by-side.
+
+
+
+ - Description lists
+ - A description list is perfect for defining terms.
+ - Euismod
+ -
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+ Donec id elit non mi porta gravida at eget metus.
+
+ - Malesuada porta
+ - Etiam porta sem malesuada magna mollis euismod.
+ - Felis euismod semper eget lacinia
+ - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
+ amet risus.
+
+
+
+
<dl class="row">
<dt class="col-sm-3" >...</dt>
<dd class="col-sm-9" >...</dd>
</dl>
-
- Heads up!
- Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.
-
-
-
-
-
-
-
- Code
-
-
- Inline
-
- Wrap inline snippets of code with <code>.
-
-
- For example, <section> should be wrapped as inline.
-
-
+
+ Heads up!
+ Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow.
+ In
+ narrower viewports, they will change to the default stacked layout.
+
+
+
+
+
+
+
+ Code
+
+
+ Inline
+
+ Wrap inline snippets of code with <code>.
+
+
+ For example, <section> should be wrapped as inline.
+
+
For example, <code><section></code> should be wrapped as inline.
- Basic block
+ Basic block
- Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
+ Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
+
-
- <p>Sample text here...</p>
-
-
+
+ <p>Sample text here...</p>
+
+
<pre>
<p>Sample text here...</p>
</pre>
- Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.
-
- You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.
-
-
-
-
-
-
- Tables
-
-
-Default styles
-
-For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
-
-
-
-
-
- #
- First Name
- Last Name
- Username
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry
- the Bird
- @twitter
-
-
-
-
-
+ Heads up! Be sure to keep code within <pre> tags as close to the left
+ as
+ possible; it will render all tabs.
+
+ You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis
+ scrollbar.
+
+
+
+
+
+
+
+ Tables
+
+
+ Default styles
+
+ For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
+
+
+
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
<table class="table">
...
</table>
-
-
-
-Optional classes
-
-Add any of the following classes to the .table base class.
-
-.table-striped
-
-Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).
-
-
-
-
-
- #
- First Name
- Last Name
- Username
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry
- the Bird
- @twitter
-
-
-
-
-
+
+
+
+ Optional classes
+
+ Add any of the following classes to the .table base class.
+
+ .table-striped
+
+ Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not
+ available in IE7-IE8).
+
+
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
<table class="table table-striped">
...
</table>
-.table-bordered
-
-Add borders and rounded corners to the table.
-
-
-
-
-
- #
- First Name
- Last Name
- Username
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- Mark
- Otto
- @TwBootstrap
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-
-
+ .table-bordered
+
+ Add borders and rounded corners to the table.
+
+
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ Mark
+ Otto
+ @TwBootstrap
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
<table class="table table-bordered">
...
</table>
-.table-hover
-
-Enable a hover state on table rows within a <tbody>.
-
-
-
-
-
- #
- First Name
- Last Name
- Username
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-
-
+ .table-hover
+
+ Enable a hover state on table rows within a <tbody>.
+
+
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
<table class="table table-hover">
...
</table>
-.table-sm
-
-Makes tables more compact by cutting cell padding in half.
-
-
-
-
-
- #
- First Name
- Last Name
- Username
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-
-
+ .table-sm
+
+ Makes tables more compact by cutting cell padding in half.
+
+
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
<table class="table table-sm">
...
</table>
-.table-dark
-
-Uses dark colors for rows and columns.
-
-
-
-
-
- #
- First Name
- Last Name
- Username
-
-
-
-
- 1
- Mark
- Otto
- @mdo
-
-
- 2
- Jacob
- Thornton
- @fat
-
-
- 3
- Larry the Bird
- @twitter
-
-
-
-
-
+ .table-dark
+
+ Uses dark colors for rows and columns.
+
+
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
<table class="table table-dark">
...
</table>
-
-
-
-Optional row classes
-
-Use contextual classes to color table rows.
-
-
- .table-active
- Cell
- Cell
-
-
-
-
-
- Class
- Heading
- Heading
-
-
-
-
-
-
-
-
-
-
- #
- Product
- Payment Taken
- Status
-
-
-
-
- 1
- TB - Monthly
- 01/04/2012
- In Stock
-
-
- 1
- TB - Monthly
- 02/04/2012
- Approved
-
-
- 2
- TB - Monthly
- 03/04/2012
- Declined
-
-
- 3
- TB - Monthly
- 04/04/2012
- Pending
-
-
- 4
- TB - Monthly
- 05/04/2012
- Call in to confirm
-
-
-
-
-
+
+
+
+ Optional row classes
+
+ Use contextual classes to color table rows.
+
+
+ .table-active
+ Cell
+ Cell
+
+
+
+
+
+ Class
+ Heading
+ Heading
+
+
+
+
+
+
+
+
+
+
+ #
+ Product
+ Payment Taken
+ Status
+
+
+
+
+ 1
+ TB - Monthly
+ 01/04/2012
+ In Stock
+
+
+ 1
+ TB - Monthly
+ 02/04/2012
+ Approved
+
+
+ 2
+ TB - Monthly
+ 03/04/2012
+ Declined
+
+
+ 3
+ TB - Monthly
+ 04/04/2012
+ Pending
+
+
+ 4
+ TB - Monthly
+ 05/04/2012
+ Call in to confirm
+
+
+
+
+
...
<tr class="table-success">
<td>1</td>
@@ -834,84 +862,86 @@ Optional row classes
-
-
-
-Supported table markup
-
-List of supported table HTML elements and how they should be used.
-
-
-
-
-
- Tag
- Description
-
-
-
-
-
- <table>
-
-
- Wrapping element for displaying data in a tabular format
-
-
-
-
- <thead>
-
-
- Container element for table header rows (<tr>) to label table columns
-
-
-
-
- <tbody>
-
-
- Container element for table rows (<tr>) in the body of the table
-
-
-
-
- <tr>
-
-
- Container element for a set of table cells (<td> or <th>) that appears on a single row
-
-
-
-
- <td>
-
-
- Default table cell
-
-
-
-
- <th>
-
-
- Special table cell for column (or row, depending on scope and placement) labels
- Must be used within a <thead>
-
-
-
-
- <caption>
-
-
- Description or summary of what the table holds, especially useful for screen readers
-
-
-
-
-
+
+
+
+ Supported table markup
+
+ List of supported table HTML elements and how they should be used.
+
+
+
+
+
+ Tag
+ Description
+
+
+
+
+
+ <table>
+
+
+ Wrapping element for displaying data in a tabular format
+
+
+
+
+ <thead>
+
+
+ Container element for table header rows (<tr>) to label table columns
+
+
+
+
+ <tbody>
+
+
+ Container element for table rows (<tr>) in the body of the table
+
+
+
+
+ <tr>
+
+
+ Container element for a set of table cells (<td> or <th>) that appears on a
+ single
+ row
+
+
+
+
+ <td>
+
+
+ Default table cell
+
+
+
+
+ <th>
+
+
+ Special table cell for column (or row, depending on scope and placement) labels
+ Must be used within a <thead>
+
+
+
+
+ <caption>
+
+
+ Description or summary of what the table holds, especially useful for screen readers
+
+
+
+
+
<table>
<caption>...</caption>
<thead>
@@ -929,34 +959,36 @@ Supported table markup
</table>
-
-
-
-
-
-
- Forms
-
-
-Default styles
-
-Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.
-
-
-
+
+
+
+
+
+
+ Forms
+
+
+ Default styles
+
+ Individual form controls receive styling, but without any required base class on the <form> or large changes
+ in
+ markup. Results in stacked, left-aligned labels on top of form controls.
+
+
+
<form>
<fieldset>
<legend>Legend</legend>
@@ -981,30 +1013,30 @@ Default styles
-
+
-Optional layouts
+ Optional layouts
-Included with Bootstrap are three optional form layouts for common use cases.
+ Included with Bootstrap are three optional form layouts for common use cases.
-Inline form
+ Inline form
-Add .form-inline for left-aligned labels and inline-block controls for a compact layout.
+ Add .form-inline for left-aligned labels and inline-block controls for a compact layout.
-
+
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Email">
@@ -1018,41 +1050,43 @@ Inline form
</form>
-Horizontal form
-
-Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
-
- - Add
.form-horizontal to the form
- - Wrap labels and controls in
.form-group
- - Add
.control-label to the label
- - Wrap any associated controls in
.controls for proper alignment
-
-
-
+ Horizontal form
+
+ Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup
+ changes
+ from a default form:
+
+ - Add
.form-horizontal to the form
+ - Wrap labels and controls in
.form-group
+ - Add
.control-label to the label
+ - Wrap any associated controls in
.controls for proper alignment
+
+
+
<form>
<div class="form-group row">
<label class="col-form-label col-sm-2" for="inputEmail">Email</label>
@@ -1081,67 +1115,69 @@ Horizontal form
-
+
-Supported form controls
+ Supported form controls
-Examples of standard form controls supported in an example form layout.
+ Examples of standard form controls supported in an example form layout.
-Inputs
+ Inputs
-Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
+ Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime,
+ datetime-local,
+ date, month, time, week, number, email, url, search, tel, and color.
-Requires the use of a specified type at all times.
+ Requires the use of a specified type at all times.
-
-
+
+
<input type="text" class="form-control" placeholder="Text input">
-Textarea
+ Textarea
-Form control which supports multiple lines of text. Change rows attribute as necessary.
+ Form control which supports multiple lines of text. Change rows attribute as necessary.
-
-
+
+
<textarea class="form-control" rows="3"></textarea>
-Checkboxes and radios
-
-Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
-Default (stacked)
-
-
-
+ Checkboxes and radios
+
+ Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
+ Default (stacked)
+
+
+
<div class="form-check">
<input type="checkbox" value="" class="form-check-input">
<label class="form-check-label">
@@ -1162,25 +1198,25 @@ Default (stacked)
</div>
-Inline checkboxes
-
-Add the .inline class to a series of checkboxes or radios for controls appear on the same line.
-
-
-
+ Inline checkboxes
+
+ Add the .inline class to a series of checkboxes or radios for controls appear on the same line.
+
+
+
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" id="inlineCheckbox1" value="option1" class="form-check-input"> 1
@@ -1197,28 +1233,28 @@ Inline checkboxes
</div>
-Selects
-
-Use the default option or specify a multiple="multiple" to show multiple options at once.
-
-
-
+ Selects
+
+ Use the default option or specify a multiple="multiple" to show multiple options at once.
+
+
+
<select>
<option>1</option>
<option>2</option>
@@ -1237,36 +1273,36 @@ Selects
-
+
-Extending form controls
+ Extending form controls
-Adding on top of existing browser controls, Bootstrap includes other useful form components.
+ Adding on top of existing browser controls, Bootstrap includes other useful form components.
-Prepended and appended inputs
+ Prepended and appended inputs
-Add text or buttons before or after any text-based input. Do note that select elements are not supported here.
+ Add text or buttons before or after any text-based input. Do note that select elements are not supported here.
-Default options
+ Default options
-Wrap an .add-on and an input with one of two classes to prepend or append text to an input.
+ Wrap an .add-on and an input with one of two classes to prepend or append text to an input.
-
+
<div class="form-group">
<div class="input-group">
<span class="input-group-text">@</span>
@@ -1279,20 +1315,20 @@ Default options
</div>
-Combined
+ Combined
-Use both classes and two instances of .add-on to prepend and append an input.
+ Use both classes and two instances of .add-on to prepend and append an input.
-
-
+
+
<div class="form-group">
<div class="input-group">
<span class="input-group-text">$</span>
@@ -1302,19 +1338,19 @@ Combined
</div>
-Buttons instead of text
+ Buttons instead of text
-Instead of a <span> with text, use a .btn to attach a button (or two) to an input.
+ Instead of a <span> with text, use a .btn to attach a button (or two) to an input.
-
-
+
+
<div class="form-group">
<div class="input-group">
<input class="form-control" id="appendedInputButton" type="text"/>
@@ -1322,15 +1358,15 @@ Buttons instead of text
</div>
</div>
-
-
+
+
<div class="form-group">
<div class="input-group">
<input class="form-control" id="appendedInputButtons" type="text">
@@ -1339,31 +1375,32 @@ Buttons instead of text
</div>
-Button dropdowns
-
-
-
-
-
+ Button dropdowns
+
+
+
+
+
<div class="form-group">
<div class="input-group">
<input class="form-control" id="appendedDropdownButton" type="text">
@@ -1380,26 +1417,27 @@ Button dropdowns
</div>
-
-
+
+
<div class="form-group">
<div class="input-group">
<button class="btn dropdown-toggle" data-bs-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1415,32 +1453,34 @@ Button dropdowns
</div>
-
-
+
+
<div class="form-group">
<div class="input-group">
<button class="btn dropdown-toggle" data-bs-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1466,44 +1506,46 @@ Button dropdowns
</div>
-Control sizing
+ Control sizing
-Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.
+ Use relative sizing classes like .input-large or match your inputs to the grid column sizes using
+ .span*
+ classes.
-Block level inputs
+ Block level inputs
-Make any <input> or <textarea> element behave like a block level element.
+ Make any <input> or <textarea> element behave like a block level element.
-
-
+
+
<input class="form-control input-block-level" type="text" placeholder=".input-block-level">
-Relative sizing
-
-
-
+ Relative sizing
+
+
+
<div class="form-group">
<div class="controls docs-input-sizes">
<input class="form-control input-sm" type="text" placeholder=".input-small">
@@ -1522,87 +1564,90 @@ Relative sizing
</div>
-Help text
+ Help text
-Block level support for help text that appears around form controls.
+ Block level support for help text that appears around form controls.
-Block help
+ Block help
-
-
+
+
<input type="text" class="form-control" ><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
-
+
-Form control states
+ Form control states
-Provide feedback to users or visitors with basic feedback states on form controls and labels.
+ Provide feedback to users or visitors with basic feedback states on form controls and labels.
-Input focus
+ Input focus
-We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.
+ We remove the default outline styles on some form controls and apply a box-shadow in its place for
+ :focus.
+
-
-
+
+
<input class="form-control input-lg" id="focusedInput" type="text" value="This is focused...">
-Disabled inputs
+ Disabled inputs
-Add the disabled attribute on an input to prevent user input and trigger a slightly different look.
+ Add the disabled attribute on an input to prevent user input and trigger a slightly different look.
-
-
+
+
<input class="form-control input-lg" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-Validation states
-
-Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .form-group.
-
-
-
+ Validation states
+
+ Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the
+ surrounding .form-group.
+
+
+
<div class="form-group">
<div class="has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
@@ -1631,115 +1676,119 @@ Validation states
</div>
-
-
-
-
-
+
+
+
+
+
-
-
-
- Images
-
+
+
+
+ Images
+
- Add classes to an <img> element to easily style images in any project.
+ Add classes to an <img> element to easily style images in any project.
-
- 
-
-
-
-
+
+
+
+
+
+
<img src="..." class="rounded">
<img src="..." class="rounded-circle">
<img src="..." class="img-thumbnail">
- Heads up! .rounded and .rounded-circle do not work in IE7-8 due to lack of border-radius support.
+ Heads up! .rounded and .rounded-circle do not work in IE7-8 due
+ to
+ lack of border-radius support.
-
+
-
-
-
- Icons
- by Font Awesome
-
-
+
+
+
+ Icons
+ by Font Awesome
+
+
-Icon glyphs
+ Icon glyphs
-
-
-
-
+
+
+
+
-Icons in sprite form, available in dark gray (default) and white, provided by Font Awesome.
-
+ Icons in sprite form, available in dark gray (default) and white, provided by
+ Font
+ Awesome.
+
-
+
-How to use
+ How to use
-All icons require an <i> tag with a unique class, prefixed with fa-. To use, place the following code just about anywhere:
-
+ All icons require an <i> tag with a unique class, prefixed with fa-. To use, place the
+ following
+ code just about anywhere:
+
<i class="fa fa-search"></i>
-There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.
-
+ There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this
+ class on hover and active states for nav and dropdown links.
+
<i class="fa fa-search fa-white"></i>
-
- Heads up!
- When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
-
+
+ Heads up!
+ When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag
+ for
+ proper spacing.
+
-
+
-Icon examples
+ Icon examples
-Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
+ Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
-Buttons
+ Buttons
-Button group in a button toolbar
+ Button group in a button toolbar
-
-
-
-
+
+
+
+
<div class="btn-toolbar">
<div class="btn-group">
@@ -1912,22 +1975,22 @@ Button group in a button toolbar
</div>
-Dropdown in a button group
-
-
-
- User
-
-
-
-
-
+ Dropdown in a button group
+
+
+
+ User
+
+
+
+
+
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"><span class="caret"></span></a>
@@ -1941,29 +2004,29 @@ Dropdown in a button group
</div>
-Small button
+ Small button
-
-
+
+
<a class="btn btn-sm" href="#"><i class="fa fa-star"></i></a>
-Navigation
+ Navigation
-
-
-
-
-
-
+
+
+
+
+
+
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#"><i class="fa fa-book"></i> Library</a></li>
@@ -1972,21 +2035,21 @@ Navigation
</ul>
-Form fields
-
-
-
+ Form fields
+
+
+
<div class="form-group">
<label class="control-label" for="inputIcon">Email address</label>
@@ -2001,12 +2064,10 @@ Form fields
</div>
-
-
-
-
-
-
+
+
+
+
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BasePage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BasePage.html
index fc1c3a83a..798a63598 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BasePage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BasePage.html
@@ -9,18 +9,31 @@
+
+
-
+
{
+
private static final long serialVersionUID = 1L;
/**
@@ -96,24 +96,25 @@ public Properties getProperties() {
*/
protected Navbar newNavbar(String markupId) {
Navbar navbar = new Navbar(markupId)
- .setPosition(Navbar.Position.TOP)
- .setInverted(true)
- .setBackgroundColor(BackgroundColorBehavior.Color.Dark);
+ .setPosition(Position.TOP)
+ .setInverted(true)
+ .setBackgroundColor(BackgroundColor.Dark)
+ .fluid(true);
// show brand name
navbar.setBrandName(Model.of("Wicket Bootstrap"));
navbar.addComponents(NavbarComponents.transform(Navbar.ComponentPosition.LEFT,
- new NavbarButton(HomePage.class, Model.of("Overview")).setIconType(FontAwesome6IconType.house_s),
- new NavbarButton(BaseCssPage.class, Model.of("Base CSS")),
- new NavbarButton(ComponentsPage.class, Model.of("Components")),
- new NavbarButton(UtilitiesPage.class, Model.of("Utilities")),
- new NavbarExternalLink(Model.of("https://github.com/l0rdn1kk0n/wicket-bootstrap"))
- .setLabel(Model.of("Github"))
- .setTarget(BootstrapExternalLink.Target.blank)
- .setIconType(FontAwesome6IconType.upload_s),
- newAddonsDropDownButton(),
- newExamplesDropDownButton())
+ new NavbarButton(HomePage.class, Model.of("Overview")).setIconType(FontAwesome6IconType.house_s),
+ new NavbarButton(BaseCssPage.class, Model.of("Base CSS")),
+ new NavbarButton(ComponentsPage.class, Model.of("Components")),
+ new NavbarButton(UtilitiesPage.class, Model.of("Utilities")),
+ new NavbarExternalLink(Model.of("https://github.com/l0rdn1kk0n/wicket-bootstrap"))
+ .setLabel(Model.of("Github"))
+ .setTarget(BootstrapExternalLink.Target.blank)
+ .setIconType(FontAwesome6IconType.upload_s),
+ newAddonsDropDownButton(),
+ newExamplesDropDownButton())
);
navbar.addComponents(new NavbarText(navbar.newExtraItemId(), "Plain text").position(Navbar.ComponentPosition.RIGHT));
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BaseValidationPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BaseValidationPage.html
index 95e2aaa22..b9a77fbc6 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BaseValidationPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BaseValidationPage.html
@@ -3,7 +3,7 @@
-
+
Validation
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/CheckboxesPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/CheckboxesPage.html
index 9558a5e3b..9e110a149 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/CheckboxesPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/CheckboxesPage.html
@@ -6,7 +6,7 @@
-
+
Checkboxes and Toogles
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html
index e84eabb6c..fafc058d4 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html
@@ -1,69 +1,68 @@
-
+
ComponentsPage
-
+
+
+ Components
+
+ Dozens of reusable components built to provide navigation, alerts, popovers, and more.
+
+
+
- Components
+
+
+
- Dozens of reusable components built to provide navigation, alerts, popovers, and more.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Dropdown menus
-
- Example
+
+
+
+ Dropdown menus
+
- Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
+ Example
-
-
-
-
-
-
+ Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown
+ JavaScript plugin.
+
+
+
+
+
+
+
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a class="dropdown-item" tabindex="-1" href="#">Action</a></li>
<li><a class="dropdown-item" tabindex="-1" href="#">Another action</a></li>
@@ -73,11 +72,13 @@ Example
</ul>
- Markup
+ Markup
- Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.
+ Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu
+ within .dropdown, or another element that declares position: relative;. Then just create the menu.
+
-
+
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
@@ -90,122 +91,123 @@ Markup
</div>
- Options
+ Options
- Align menus to the right and add include additional levels of dropdowns.
+ Align menus to the right and add include additional levels of dropdowns.
- Aligning the menus
+ Aligning the menus
- Add .pull-right to a .dropdown-menu to right align the dropdown menu.
-
+ Add .pull-right to a .dropdown-menu to right align the dropdown menu.
+
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
...
</ul>
-
+
-
-
+
+
-
-
-
- Cards
+
+ Cards
- Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
+ Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
-
-
-
-
- Card styles
-
-
-
-
+
+
+
-
+ Card styles
+
+
+
+
- Radio buttons
+
- Radio buttons as in buttons.
+ Radio buttons
+ Radio buttons as in buttons.
-
-
-
-
-
+
+
+
+
+
+
add(new BooleanRadioGroup("boolean", new Model<>(Boolean.FALSE)));
-
+
- Boolean radio buttons with AJAX: the selected value is
+ Boolean radio buttons with AJAX: the selected value is
-
-
-
+
+
+
- Enum based radio buttons with AJAX: the selected value is
+ Enum based radio buttons with AJAX: the selected value is
-
-
-
+
+
+
-
+
-
-
-
-
-
-
-
-
-
- Badges
- Badges are our small count and labeling components.
-
+
+
+
+ Badges
+ Badges are our small count and labeling components.
+
-
-
-
- Example
- Markup
-
-
-
-
-
- 1
-
-
- <span class="badge">1</span>
-
-
-
-
-
- Pills
-
-
- Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).
- Useful if you miss the badges from v3.
-
-
-
-
-
- Name
- Example
- Markup
-
-
-
-
- Default
-
- 1
-
-
- <span class="badge">1</span>
-
-
-
-
-
-
- Badges can be used as part of links or buttons to provide a counter.
-
-
+
+
+
+ Example
+ Markup
+
+
+
+
+
+ 1
+
+
+ <span class="badge">1</span>
+
+
+
+
+
+ Pills
+
+
+ Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and
+ additional horizontal padding).
+ Useful if you miss the badges from v3.
+
+
+
+
+
+ Name
+ Example
+ Markup
+
+
+
+
+ Default
+
+ 1
+
+
+ <span class="badge">1</span>
+
+
+
+
+
+
+ Badges can be used as part of links or buttons to provide a counter.
+
+
-
+
<button wicket:id="badge-button">
Submit <span wicket:id="button-count"></span>
<span class="visually-hidden">unread messages</span>
</button>
-
+
-
+
-
-
-
- Typographic components
-
+
+
+
+ Typographic components
+
- Hero unit
+ Hero unit
- A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.
+ A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.
-
-
- Hello, world!
+
+
+ Hello, world!
- This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
+ This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or
+ information.
-
-
-
-
+
+
+
+
<div class="jumbotron">
<h1>Heading</h1>
<p>Tagline</p>
@@ -1590,124 +1621,133 @@ Hello, world!
</div>
- Page header
+ Page header
- A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).
+ A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the
+ h1's default small, element as well most other components (with additional styles).
-
-
- Example page header
- Subtext for header
-
-
-
-
+
+
+ Example page header
+ Subtext for header
+
+
+
+
<div class="pb-2 mt-4 mb-2 border-bottom">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
-
+
-
-
-
- Thumbnails
- Grids of images, videos, text, and more
-
-
+
+
+
+ Thumbnails
+ Grids of images, videos, text, and more
+
+
- Default thumbnails
+ Default thumbnails
- By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
+ By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
-
+
- Highly customizable
+ Highly customizable
- With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
+ With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into
+ thumbnails.
-
-
-
- 
+
+
+
+
-
- Thumbnail label
+
+ Thumbnail label
- Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
+ Nullam id dolor id nibh ultricies vehicula ut id elit.
-
-
-
-
-
+
+
+
+
-
- Thumbnail label
+
+ Thumbnail label
- Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
+ Nullam id dolor id nibh ultricies vehicula ut id elit.
-
-
-
-
-
+
+
+
+
-
- Thumbnail label
+
+ Thumbnail label
- Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
+ Nullam id dolor id nibh ultricies vehicula ut id elit.
-
-
-
-
-
+
+
+
+
+
- Why use thumbnails
+ Why use thumbnails
- Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.
+ Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results,
+ retail products, portfolios, and much more. They can be links or static content.
- Simple, flexible markup
+ Simple, flexible markup
- Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.
+ Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's
+ also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.
- Uses grid column sizes
+ Uses grid column sizes
- Lastly, the thumbnails component uses existing grid system classes—like .col-lg-2 or .col-lg-3—for control of thumbnail dimensions.
+ Lastly, the thumbnails component uses existing grid system classes—like .col-lg-2 or .col-lg-3—for
+ control of thumbnail dimensions.
- Markup
+ Markup
- As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:
-
+ As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup
+ for linked images:
+
<ul class="thumbnails">
<li class="col-lg-4">
<a href="#" class="thumbnail">
@@ -1717,8 +1757,9 @@ Markup
...
</ul>
- For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:
-
+ For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a>
+ for a <div> like so:
+
<ul class="thumbnails">
<li class="col-lg-4">
<div class="thumbnail">
@@ -1731,203 +1772,206 @@ Markup
</ul>
- More examples
+ More examples
- Explore all your options with the various grid classes available to you. You can also mix and match different sizes.
-
+ Explore all your options with the various grid classes available to you. You can also mix and match different sizes.
+
-
+
-
-
-
- Alerts
- Styles for success, warning, and error messages
-
-
+
+
+
+ Alerts
+ Styles for success, warning, and error messages
+
+
- Default alert
+ Default alert
- Wrap any text and an optional dismiss button in .alert for a basic warning alert message.
+ Wrap any text and an optional dismiss button in .alert for a basic warning alert message.
-
-
-
- Warning! Best check yo self, you're not looking too good.
-
-
-
+
+
+
+ Warning! Best check yo self, you're not looking too good.
+
+
+
<div class="alert alert-warning">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
- Dismiss buttons
+ Dismiss buttons
- Mobile Safari and Mobile Opera browsers, in addition to the data-bs-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.
- <a href="#" class="btn-close" data-bs-dismiss="alert"></a>
- Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.
- <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+ Mobile Safari and Mobile Opera browsers, in addition to the data-bs-dismiss="alert" attribute, require an href="#"
+ for the dismissal of alerts when using an <a> tag.
+ <a href="#" class="btn-close" data-bs-dismiss="alert"></a>
+ Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our
+ docs. When using <button>, you must include type="button" or your forms may not submit.
+ <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
- Dismiss alerts via JavaScript
+ Dismiss alerts via JavaScript
- Use the alerts jQuery plugin for quick and easy dismissal of alerts.
+ Use the alerts jQuery plugin for quick and easy dismissal of alerts.
-
+
- Options
+ Options
- Contextual alternatives
+ Contextual alternatives
- Add optional classes to change an alert's connotation.
+ Add optional classes to change an alert's connotation.
- Error or danger
+ Error or danger
-
-
-
- Oh snap! Change a few things up and try submitting again.
-
-
-
+
+
+
+ Oh snap! Change a few things up and try submitting again.
+
+
+
<div class="alert alert-error">
...
</div>
- Success
+ Success
-
-
-
- Well done! You successfully read this important alert message.
-
-
-
+
+
+
+ Well done! You successfully read this important alert message.
+
+
+
<div class="alert alert-success">
...
</div>
- Information
+ Information
-
-
-
- Heads up! This alert needs your attention, but it's not super important.
-
-
-
+
+
+
+ Heads up! This alert needs your attention, but it's not super important.
+
+
+
<div class="alert alert-info">
...
</div>
-
+
-
-
-
- Progress bars
- For loading, redirecting, or action status
-
-
+
+
+
+ Progress bars
+ For loading, redirecting, or action status
+
+
- Examples and markup
+ Examples and markup
- Basic
+ Basic
- Default progress bar with a vertical gradient.
+ Default progress bar with a vertical gradient.
-
-
-
-
+
+
+
+
<div class="progress">
<div class="progress-bar" style="width: 60%;"></div>
</div>
- Striped
+ Striped
- Uses a gradient to create a striped effect. Not available in IE7-8.
+ Uses a gradient to create a striped effect. Not available in IE7-8.
-
-
-
-
+
+
+
+
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 20%;"></div>
</div>
- Animated
+ Animated
- Add .progress-bar-animated to .progress-bar-striped to animate the stripes right to left. Not available in all versions of IE.
+ Add .progress-bar-animated to .progress-bar-striped to animate the stripes right to left. Not
+ available in all versions of IE.
-
-
-
-
+
+
+
+
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%;"></div>
</div>
- Labeled
+ Labeled
- Use Stack#labeled(true) to show the stack's label.
+ Use Stack#labeled(true) to show the stack's label.
-
-
-
-
+
+
+
+
<div class="progress">
<div class="progress-bar" style="width: 40%;"></div>
</div>
- Stacked
+ Stacked
- Place multiple bars into the same .progress to stack them.
+ Place multiple bars into the same .progress to stack them.
-
-
-
-
+
+
+
+
<div class="progress">
<div class="progress-bar bg-success" style="width: 35%;"></div>
<div class="progress-bar bg-warning" style="width: 20%;"></div>
@@ -1936,22 +1980,22 @@ Stacked
-
+
- Options
+ Options
- Additional colors
+ Additional colors
- Progress bars use background color utility classes for consistent styles.
+ Progress bars use background color utility classes for consistent styles.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
<div class="progress">
<div class="progress-bar bg-info" style="width: 20%"></div>
</div>
@@ -1966,25 +2010,25 @@ Additional colors
</div>
- Striped bars
+ Striped bars
- Similar to the solid colors, we have varied striped progress bars.
+ Similar to the solid colors, we have varied striped progress bars.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" style="width: 20%"></div>
</div>
@@ -2000,72 +2044,80 @@ Striped bars
-
+
- Updatable bars
+ Updatable bars
- A ProgressBar with self updating Ajax behavior.
+ A ProgressBar with self updating Ajax behavior.
-
-
-
+
+
+
-
+
- Browser support
+ Browser support
- Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.
+ Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in
+ IE7-9 or older versions of Firefox.
- Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.
+ Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.
-
+
-
-
-
- Media object
-
- Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
+
+
+
+ Media object
+
+ Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a
+ left- or right-aligned image alongside textual content.
- Default example
+ Default example
- The default media allow to float a media object (images, video, audio) to the left or right of a content block.
+ The default media allow to float a media object (images, video, audio) to the left or right of a content block.
-
-
-
- 
-
+
+
+
+
+
-
- Media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-
-
-
-
-
-
-
-
- Media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-
-
-
-
-
-
- Media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-
-
-
-
-
-
+
+ Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,
+ vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
+ congue felis in faucibus.
+
+
+
+
+
+
+
+
+ Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,
+ vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
+ congue felis in faucibus.
+
+
+
+
+
+
+ Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
+ odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
+ Donec lacinia congue felis in faucibus.
+
+
+
+
+
+
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="https://via.placeholder.com/64x64">
@@ -2083,72 +2135,77 @@ Media heading
-
-
-
- Media list
-
- With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
+
-
-
- -
-
-
-
-
-
Media heading
+ Media list
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-
-
-
-
-
+ With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
-
- Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-
-
+
+
+ -
-
Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+ Media heading
+
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
+ odio, vestibulum in vulputate at, tempus viverra turpis.
+
+
+
+
+
+
+
+ Nested media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
+ purus odio, vestibulum in vulputate at, tempus viverra turpis.
+
+
+
+
+
+
+
+ Nested media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
+ commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+
+
+
+
+
+
+
+
+
+
+
+ Nested media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
+ purus odio, vestibulum in vulputate at, tempus viverra turpis.
+
+
-
-
-
-
-
-
-
-
+
+ -
+
+
+
-
-
Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-
+
+ Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
+ odio, vestibulum in vulputate at, tempus viverra turpis.
+
+
+
-
-
- -
-
-
-
-
-
-
Media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-
-
-
-
-
+
<ul class="media-list">
<li class="media">
<a class="media-left" href="#">
@@ -2167,117 +2224,117 @@ Media heading
</ul>
-
+
-
-
-
- Miscellaneous
- Lightweight utility components
-
-
+
+
+
+ Miscellaneous
+ Lightweight utility components
+
+
- Wells
+ Wells
- Use the well as a simple effect on an element to give it an inset effect.
+ Use the well as a simple effect on an element to give it an inset effect.
-
-
- Look, I'm in a well!
-
-
-
+
+
+ Look, I'm in a well!
+
+
+
<div class="well">
...
</div>
- Optional classes
+ Optional classes
- Control padding and rounded corners with two optional modifier classes.
+ Control padding and rounded corners with two optional modifier classes.
-
-
- Look, I'm in a well!
-
-
-
+
+
+ Look, I'm in a well!
+
+
+
<div class="well well-lg">
...
</div>
-
-
- Look, I'm in a well!
-
-
-
+
+
+ Look, I'm in a well!
+
+
+
<div class="well well-sm">
...
</div>
- Close icon
+ Close icon
- Use the generic close icon for dismissing content like modals and alerts.
+ Use the generic close icon for dismissing content like modals and alerts.
-
-
-
-
-
- <button class="btn-close"></button>
- iOS devices require an href="#" for click events if you would rather use an anchor.
- <a class="btn-close" href="#"></a>
+
+
+
+
+
+ <button class="btn-close"></button>
+ iOS devices require an href="#" for click events if you would rather use an anchor.
+ <a class="btn-close" href="#"></a>
- Helper classes
+ Helper classes
- Simple, focused classes for small display or behavior tweaks.
+ Simple, focused classes for small display or behavior tweaks.
- .pull-left
+ .pull-left
- Float an element left
-
+ Float an element left
+
class="pull-left"
-
+
.pull-left {
float: left;
}
- .pull-right
+ .pull-right
- Float an element right
-
+ Float an element right
+
class="pull-right"
-
+
.pull-right {
float: right;
}
- .text-muted
+ .text-muted
- Change an element's color to #999
-
+ Change an element's color to #999
+
class="text-muted"
-
+
.text-muted {
color: #999;
}
- .clearfix
+ .clearfix
- Clear the float on any element
-
+ Clear the float on any element
+
class="clearfix"
-
+
.clearfix {
*zoom: 1;
&:before,
@@ -2291,10 +2348,10 @@ .clearfix
}
-
-
-
-
+
+
+
+
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.java b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.java
index 7cbe51bea..4b8e49657 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.java
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.java
@@ -4,7 +4,6 @@
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
-
import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.extensions.markup.html.tabs.AbstractTab;
@@ -19,7 +18,6 @@
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.apache.wicket.request.mapper.parameter.PageParameters;
-
import de.agilecoders.wicket.core.markup.html.bootstrap.badge.BootstrapBadge;
import de.agilecoders.wicket.core.markup.html.bootstrap.block.Code;
import de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink;
@@ -28,6 +26,7 @@
import de.agilecoders.wicket.core.markup.html.bootstrap.button.dropdown.MenuBookmarkablePageLink;
import de.agilecoders.wicket.core.markup.html.bootstrap.button.dropdown.MenuDivider;
import de.agilecoders.wicket.core.markup.html.bootstrap.button.dropdown.SplitButton;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.BackgroundColor;
import de.agilecoders.wicket.core.markup.html.bootstrap.components.progress.ProgressBar;
import de.agilecoders.wicket.core.markup.html.bootstrap.components.progress.Stack;
import de.agilecoders.wicket.core.markup.html.bootstrap.components.progress.UpdatableProgressBar;
@@ -38,9 +37,8 @@
import de.agilecoders.wicket.core.markup.html.bootstrap.image.IconType;
import de.agilecoders.wicket.core.markup.html.bootstrap.tabs.AjaxBootstrapTabbedPanel;
import de.agilecoders.wicket.core.markup.html.bootstrap.tabs.ClientSideBootstrapTabbedPanel;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.ColorBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.TextColorBehavior;
import de.agilecoders.wicket.samples.components.basecss.ButtonGroups;
import de.agilecoders.wicket.samples.panels.PanelTypesPanel;
import de.agilecoders.wicket.samples.panels.SimpleCard;
@@ -51,6 +49,7 @@
* @author miha
*/
public class ComponentsPage extends BasePage {
+
private static final long serialVersionUID = 1L;
private static enum Status {
@@ -115,28 +114,27 @@ protected IModel createLabelModel() {
return () -> String.format("The progress is: %s%%", getModelObject());
}
};
- labeledStack.labeled(true).color(BackgroundColorBehavior.Color.Success);
+ labeledStack.labeled(true).color(BackgroundColor.Success);
labeledProgressBar.addStacks(labeledStack);
add(labeledProgressBar);
-
ProgressBar stacked = new ProgressBar("stacked");
add(stacked);
- Stack stackedStack1 = new Stack(stacked.getStackId(), Model.of(35)).color(BackgroundColorBehavior.Color.Success);
- Stack stackedStack2 = new Stack(stacked.getStackId(), Model.of(20)).color(BackgroundColorBehavior.Color.Warning);
- Stack stackedStack3 = new Stack(stacked.getStackId(), Model.of(10)).color(BackgroundColorBehavior.Color.Danger);
+ Stack stackedStack1 = new Stack(stacked.getStackId(), Model.of(35)).color(BackgroundColor.Success);
+ Stack stackedStack2 = new Stack(stacked.getStackId(), Model.of(20)).color(BackgroundColor.Warning);
+ Stack stackedStack3 = new Stack(stacked.getStackId(), Model.of(10)).color(BackgroundColor.Danger);
stacked.addStacks(stackedStack1, stackedStack2, stackedStack3);
- ProgressBar coloredInfo = new ProgressBar("coloredInfo", Model.of(20), BackgroundColorBehavior.Color.Info);
+ ProgressBar coloredInfo = new ProgressBar("coloredInfo", Model.of(20), BackgroundColor.Info);
add(coloredInfo);
- ProgressBar coloredSuccess = new ProgressBar("coloredSuccess", Model.of(40), BackgroundColorBehavior.Color.Success);
+ ProgressBar coloredSuccess = new ProgressBar("coloredSuccess", Model.of(40), BackgroundColor.Success);
add(coloredSuccess);
- ProgressBar coloredWarning = new ProgressBar("coloredWarning", Model.of(60), BackgroundColorBehavior.Color.Warning);
+ ProgressBar coloredWarning = new ProgressBar("coloredWarning", Model.of(60), BackgroundColor.Warning);
add(coloredWarning);
- ProgressBar coloredDanger = new ProgressBar("coloredDanger", Model.of(80), BackgroundColorBehavior.Color.Danger);
+ ProgressBar coloredDanger = new ProgressBar("coloredDanger", Model.of(80), BackgroundColor.Danger);
add(coloredDanger);
UpdatableProgressBar updatableBar = new UpdatableProgressBar("updatable", Model.of(0)) {
@@ -151,7 +149,6 @@ protected IModel newValue() {
updatableBar.updateInterval(Duration.ofSeconds(80L));
add(updatableBar);
-
}
private void addRadioGroups() {
@@ -171,7 +168,6 @@ protected void onSelectionChanged(AjaxRequestTarget target, Boolean value) {
}
});
-
IModel enumAjaxSelectedModel = Model.of(Status.submitted);
enumAjaxSelected = new Label("enumAjaxSelected", enumAjaxSelectedModel);
enumAjaxSelected.setOutputMarkupId(true);
@@ -191,19 +187,19 @@ protected void onSelectionChanged(AjaxRequestTarget target, Status value) {
}
private void addLabels() {
- List colors = List.of(BackgroundColorBehavior.Color.values());
+ final List colors = List.of(BackgroundColor.values());
add(new ListView<>("badges", colors) {
private static final long serialVersionUID = 1L;
@Override
- protected void populateItem(ListItem item) {
- BackgroundColorBehavior.Color color = item.getModelObject();
+ protected void populateItem(ListItem item) {
+ final BackgroundColor backgroundColor = item.getModelObject();
- item.add(new BootstrapBadge("badge", color.cssClassName(), color));
+ item.add(new BootstrapBadge("badge", backgroundColor.cssClassName(), backgroundColor));
- Code code = new Code(
- "code",
- Model.of(String.format("%1$s", color.cssClassName()))
+ final Code code = new Code(
+ "code",
+ Model.of(String.format("%1$s", backgroundColor.cssClassName()))
);
item.add(code);
}
@@ -211,21 +207,21 @@ protected void populateItem(ListItem item) {
}
private void addBadges() {
- List colors = List.of(BackgroundColorBehavior.Color.values());
+ final List colors = List.of(BackgroundColor.values());
add(new ListView<>("badge-pills", colors) {
private static final long serialVersionUID = 1L;
@Override
- protected void populateItem(ListItem item) {
- BackgroundColorBehavior.Color color = item.getModelObject();
+ protected void populateItem(ListItem item) {
+ final BackgroundColor backgroundColor = item.getModelObject();
- item.add(new Label("name", color.cssClassName()));
+ item.add(new Label("name", backgroundColor.cssClassName()));
- item.add(new BootstrapBadge("badge", 1, color).setPill(true));
+ item.add(new BootstrapBadge("badge", 1, backgroundColor).setPill(true));
item.add(new Code("code",
- Model.of(String.format("%1$s", color.cssClassName()))
+ Model.of(String.format("%1$s", backgroundColor.cssClassName()))
));
}
});
@@ -239,32 +235,32 @@ public void onClick() {
}
};
badgeButton.add(new ButtonBehavior(Buttons.Type.Primary));
- badgeButton.add(new BootstrapBadge("badge", Model.of(1), BackgroundColorBehavior.Color.Light));
+ badgeButton.add(new BootstrapBadge("badge", Model.of(1), BackgroundColor.Light));
add(badgeButton);
}
private Component newCard(String markupId) {
return new SimpleCard(markupId)
- .add(new BorderBehavior()
- .type(BorderBehavior.Type.All)
- .color(BorderBehavior.Color.Dark)
- .radius(BorderBehavior.Radius.All))
- .add(ColorBehavior.success());
+ .add(new BorderBehavior()
+ .type(BorderBehavior.Type.All)
+ .color(BorderBehavior.Color.Dark)
+ .radius(BorderBehavior.Radius.All))
+ .add(TextColorBehavior.success());
}
private Component newCardStyles(String markupId) {
- return new PanelTypesPanel(markupId);
+ return new PanelTypesPanel(markupId);
}
private Component newTabs(String markupId) {
return new AjaxBootstrapTabbedPanel<>(markupId, List.of(
- createTab("Section 1"), createTab("Section 2"), createTab("Section 3")
+ createTab("Section 1"), createTab("Section 2"), createTab("Section 3")
));
}
private Component newClientSideTabs(String markupId) {
return new ClientSideBootstrapTabbedPanel<>(markupId, List.of(
- createTab("Section 1"), createTab("Section 2"), createTab("Section 3")
+ createTab("Section 1"), createTab("Section 2"), createTab("Section 3")
));
}
@@ -286,7 +282,6 @@ public void onComponentTagBody(MarkupStream markupStream, ComponentTag openTag)
};
}
-
/**
* creates a new split button with some submenu links.
*
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DataTablePage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DataTablePage.html
index 354dcdd5a..017b7f9bb 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DataTablePage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DataTablePage.html
@@ -6,7 +6,7 @@
-
+
Datatable Examples
Some Examples with Datatables.
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DatePickerPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DatePickerPage.html
index b8e7ddb93..eccf66a4a 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DatePickerPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DatePickerPage.html
@@ -6,7 +6,7 @@
-
+
DatePicker
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DatetimePickerPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DatetimePickerPage.html
index 21c2f8ffb..129ba5f00 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DatetimePickerPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/DatetimePickerPage.html
@@ -6,7 +6,7 @@
-
+
Datetime Picker
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ExtensionsBootstrapFileInputPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ExtensionsBootstrapFileInputPage.html
index a8bc98609..b0cb9fd6c 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ExtensionsBootstrapFileInputPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ExtensionsBootstrapFileInputPage.html
@@ -6,7 +6,7 @@
-
+
Bootstrap FileInput
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ExtensionsPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ExtensionsPage.html
index 97517d48b..b9ac32232 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ExtensionsPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ExtensionsPage.html
@@ -6,7 +6,7 @@
-
+
Bootstrap Extensions
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/FontAwesomePage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/FontAwesomePage.html
index cc1453939..7ec1b245c 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/FontAwesomePage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/FontAwesomePage.html
@@ -7,7 +7,7 @@
-
+
Font Awesome demo
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/HomePage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/HomePage.html
index 4e48fbc25..e26be94d1 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/HomePage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/HomePage.html
@@ -6,7 +6,7 @@
-
+
Wicket-Bootstrap
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/IssuesPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/IssuesPage.html
index 837c2d314..a2c2f2b4b 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/IssuesPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/IssuesPage.html
@@ -6,7 +6,7 @@
-
+
Issues from github
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html
index 943e4054f..11119a6fd 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html
@@ -9,7 +9,7 @@
-
+
JavaScript for Bootstrap
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/MarkdownPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/MarkdownPage.html
index b82e95989..3be3e9aa6 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/MarkdownPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/MarkdownPage.html
@@ -6,7 +6,7 @@
-
+
Markdown Editor for Bootstrap3
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/SelectPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/SelectPage.html
index 2b357fcd6..6cfcdc698 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/SelectPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/SelectPage.html
@@ -6,7 +6,7 @@
-
+
SelectPicker
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/SummernotePage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/SummernotePage.html
index 9ff2a6d94..6e516c49d 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/SummernotePage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/SummernotePage.html
@@ -6,7 +6,7 @@
-
+
Rich Editor for Bootstrap
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/UtilitiesPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/UtilitiesPage.html
index 3467085fe..9a806a753 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/UtilitiesPage.html
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/UtilitiesPage.html
@@ -1,224 +1,288 @@
-
- Javascript
+
+ Javascript
+
+
+
+
-
-
-
- Bootstrap utility classes
-
- Use Bootstrap utility classes to set borders, colors, floats, positions and more...
-
-
-
-
-
-
-
-
-
-
-
-
-
- Borders
-
-
- Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
-
-
- Border
-
-
- Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
-
-
-
- Additive
-
-
-
-
-
-
-
- Java code:
-
-
-
-
- HTML code:
-
+
+
+
+ Bootstrap utility classes
+
+ Use Bootstrap utility classes to set borders, colors, floats, positions and more...
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Borders
+
+
+ Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other
+ element.
+
+
+ Border
+
+
+ Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
+
+
+
+ Additive
+
+
+
+
+
+
+
+ Java code:
+
+
+
+
+ HTML code:
+
<wicket:container wicket:id="additive-border-types">
<span wicket:id="border-type" class="mb-2 p-2"></span>
</wicket:container>
-
-
-
-
- Subtractive
-
-
-
-
-
-
-
-
-
- Border color
-
- Change the border color using utilities built on our theme colors.
-
-
-
-
-
-
-
-
- Java code:
-
-
-
-
- HTML code:
-
+
+
+
+
+ Subtractive
+
+
+
+
+
+
+
+
+
+ Border color
+
+ Change the border color using utilities built on our theme colors.
+
+
+
+
+
+
+
+
+ Java code:
+
+
+
+
+ HTML code:
+
<div class="border rounded mb-5 p-2">
<wicket:container wicket:id="border-colors">
<div wicket:id="border-color"></div>
</wicket:container>
</div>
-
-
+
+
-
- Border-radius
+
+ Border-radius
- Add classes to an element to easily round its corners.
+ Add classes to an element to easily round its corners.
-
-
- ![]()
-
-
+
+
+ ![]()
+
+
-
- Java code:
-
-
+
+ Java code:
+
+
-
- HTML code:
-
+
+ HTML code:
+
<div class="border rounded mb-5 p-2">
<wicket:container wicket:id="border-radiuses">
<div wicket:id="border-radius"></div>
</wicket:container>
</div>
-
-
-
-
-
-
- Colors
-
-
- Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
-
-
- Color
-
-
-
-
-
-
-
-
-
- Java code:
-
-
-
-
- HTML code:
-
+
+
+
+
+
+
+ Colors
+
+
+ Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states,
+ too.
+
+
+ Color
+
+
+
+
+
+
+
+
+
+ Java code:
+
+
+
+
+ HTML code:
+
<div class="border rounded mb-5 p-2">
<wicket:container wicket:id="text-colors">
<div wicket:id="color" class="mb-2 p-2"></div>
</wicket:container>
</div>
-
-
-
-
- Contextual text classes also work well on anchors with the provided hover and focus states.
- Note that the .text-white and .text-muted class has no link styling.
-
-
-
-
-
- Background color
-
-
- Similar to the contextual text color classes, easily set the background of an element to any contextual class.
- Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases
- you’ll want to use .text-* utilities.
-
-
-
-
-
-
-
-
-
-
- Java code:
-
-
-
-
- HTML code:
-
- <div class="border rounded mb-5 p-2">
- <wicket:container wicket:id="background-colors">
- <div wicket:id="color" class="mb-2 p-2"></div>
- </wicket:container>
- </div>
-
-
-
-
-
-
-
+
+
+
+
+ Contextual text classes also work well on anchors with the provided hover and focus states.
+ Note that the .text-white and .text-muted class has no link styling.
+
+
+
+
+
+
+ Background color
+
+
+ Similar to the contextual text color classes, easily set the background of an element to any contextual class.
+ Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases
+ you’ll want to use .text-* utilities.
+
+
+
+
+
+
+
+
+
+
+ Java code:
+
+
+
+
+ HTML code:
+
+
+
+
+ Background Color Opacity
+ As of v5.1.0, background-color utilities are generated with Sass using CSS variables. This allows for real-time color
+ changes without compilation and dynamic alpha transparency changes.
+
+
+
+
+
+
+ Java code:
+
+
+
+ HTML code:
+
+
+
+
+ Background Color Gradient
+
+ By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
+
+
+
+
+
+
+
+ Java code:
+
+
+
+ HTML code:
+
+
+
+
+
+
+
+ Text and Background Color
+
+ Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class. Using our Sass color-contrast() function, we automatically determine a contrasting color for a particular background-color.
+
+
+
+
+
+
+
+ Java code:
+
+
+
+ HTML code:
+
+
+
+
+
+
\ No newline at end of file
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/UtilitiesPage.java b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/UtilitiesPage.java
index ab2d20b33..20a456663 100644
--- a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/UtilitiesPage.java
+++ b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/UtilitiesPage.java
@@ -1,7 +1,9 @@
package de.agilecoders.wicket.samples.pages;
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.Arrays;
import java.util.List;
-
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.image.ExternalImage;
import org.apache.wicket.markup.html.link.AbstractLink;
@@ -10,271 +12,491 @@
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.model.Model;
import org.apache.wicket.request.mapper.parameter.PageParameters;
-
import de.agilecoders.wicket.core.markup.html.bootstrap.block.Code;
import de.agilecoders.wicket.core.markup.html.bootstrap.block.CodeBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.block.CodeBehavior.Language;
+import de.agilecoders.wicket.core.markup.html.bootstrap.helpers.TextAndBackgroundColorBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.helpers.TextAndBackgroundColorBehavior.TextAndBackgroundColor;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior.BackgroundColor;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundOpacity;
import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BorderBehavior;
-import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.ColorBehavior;
+import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.TextColorBehavior;
/**
* @author Jan Ferko
*/
public class UtilitiesPage extends BasePage {
- private static final long serialVersionUID = 1L;
-
- /**
- * Construct.
- *
- * @param parameters current page parameters
- */
- public UtilitiesPage(PageParameters parameters) {
- super(parameters);
-
- addBorderTypes();
- addBorderColors();
- addBorderRadius();
- addColors();
- addBackgroundColors();
- }
-
- private void addBorderTypes() {
- List additiveTypes = List.of(
- BorderBehavior.Type.All,
- BorderBehavior.Type.Top,
- BorderBehavior.Type.Right,
- BorderBehavior.Type.Bottom,
- BorderBehavior.Type.Left
- );
- add(new ListView<>("additive-border-types", additiveTypes) {
- private static final long serialVersionUID = 1L;
-
- @Override
- protected void populateItem(ListItem item) {
- BorderBehavior.Type type = item.getModelObject();
- Label label = new Label("border-type", "");
- label.add(new BorderBehavior().type(type).color(BorderBehavior.Color.Dark));
- item.add(label);
- }
- });
-
- List subtractiveTypes = List.of(
- BorderBehavior.Type.None,
- BorderBehavior.Type.ExceptTop,
- BorderBehavior.Type.ExceptRight,
- BorderBehavior.Type.ExceptBottom,
- BorderBehavior.Type.ExceptLeft
- );
- add(new ListView<>("subtractive-border-types", subtractiveTypes) {
- private static final long serialVersionUID = 1L;
-
- @Override
- protected void populateItem(ListItem item) {
- BorderBehavior.Type type = item.getModelObject();
- Label label = new Label("border-type", "");
- label.add(new BorderBehavior().type(type).color(BorderBehavior.Color.Dark));
- item.add(label);
- }
- });
-
- add(new Code("border-type-code", Model.of(
- "List additiveTypes = List.of(\n" +
- " BorderBehavior.Type.All,\n" +
- " BorderBehavior.Type.Top,\n" +
- " BorderBehavior.Type.Right,\n" +
- " BorderBehavior.Type.Bottom,\n" +
- " BorderBehavior.Type.Left\n" +
- ");\n" +
- "add(new ListView(\"additive-border-types\", additiveTypes) {\n\n" +
- " @Override\n" +
- " protected void populateItem(ListItem item) {\n" +
- " BorderBehavior.Type type = item.getModelObject();\n" +
- " Label label = new Label(\"border-type\", \"\");\n" +
- " label.add(new BorderBehavior().type(type).color(BorderBehavior.Color.Dark));\n" +
- " item.add(label);\n" +
- " }\n" +
- "});"
- )).setLanguage(CodeBehavior.Language.JAVA));
- }
-
- private void addBorderColors() {
- List colors = List.of(BorderBehavior.Color.values());
- add(new ListView<>("border-colors", colors) {
- private static final long serialVersionUID = 1L;
-
- @Override
- protected void populateItem(ListItem item) {
- BorderBehavior.Color color = item.getModelObject();
- Label label = new Label("border-color", "");
- label.add(new BorderBehavior().color(color).type(BorderBehavior.Type.All));
- item.add(label);
- }
- });
-
- add(new Code("border-colors-code", Model.of(
- "List colors = List.of(BorderBehavior.Color.values());\n" +
- "add(new ListView(\"border-colors\", colors) {\n\n" +
- " @Override\n" +
- " protected void populateItem(ListItem item) {\n" +
- " BorderBehavior.Color color = item.getModelObject();\n" +
- " Label label = new Label(\"border-color\", \"\");\n" +
- " label.add(new BorderBehavior().color(color).type(BorderBehavior.Type.All));\n" +
- " item.add(label);\n" +
- " }\n" +
- "});"
- )).setLanguage(CodeBehavior.Language.JAVA));
- }
-
- private void addBorderRadius() {
- List radiuses = List.of(BorderBehavior.Radius.values());
- add(new ListView<>("border-radiuses", radiuses) {
- private static final long serialVersionUID = 1L;
-
- @Override
- protected void populateItem(ListItem item) {
- BorderBehavior.Radius radius = item.getModelObject();
- ExternalImage img = new ExternalImage("border-radius", "https://via.placeholder.com/260x180");
- img.add(new BorderBehavior().radius(radius));
- item.add(img);
- }
- });
-
- add(new Code("border-radius-code", Model.of(
- "List radiuses = List.of(BorderBehavior.Radius.values());\n" +
- "add(new ListView(\"border-radiuses\", radiuses) {\n" +
- " @Override\n" +
- " protected void populateItem(ListItem item) {\n" +
- " BorderBehavior.Radius radius = item.getModelObject();\n" +
- " ExternalImage img = new ExternalImage(\"border-radius\", \"https://via.placeholder.com/260x180\");\n" +
- " img.add(new BorderBehavior().radius(radius));\n" +
- " item.add(img);\n" +
- " }\n" +
- "});"
- )).setLanguage(CodeBehavior.Language.JAVA));
- }
-
- private void addColors() {
- List colors = List.of(ColorBehavior.Color.values());
- add(new ListView<>("text-colors", colors) {
- private static final long serialVersionUID = 1L;
-
- @Override
- protected void populateItem(ListItem item) {
- ColorBehavior.Color color = item.getModelObject();
- Label label = new Label("color", Model.of(color.cssClassName()));
- label.add(new ColorBehavior(color));
-
- switch (color) {
- case White:
- case Light:
- case White50:
- label.add(BackgroundColorBehavior.dark());
- break;
- default:
- break;
- }
-
- item.add(label);
- }
- });
-
- add(new Code("text-colors-code", Model.of(
- "add(new ListView(\"text-colors\", colors) {\n\n" +
- " protected void populateItem(ListItem item) {\n" +
- " ColorBehavior.Color color = item.getModelObject();\n" +
- " Label label = new Label(\"color\", Model.of(color.cssClassName()));\n" +
- " label.add(new ColorBehavior(color));\n\n" +
- " switch (color) {\n" +
- " case White:\n" +
- " case Light:\n" +
- " case White50:\n" +
- " label.add(BackgroundColorBehavior.dark());\n" +
- " break;\n" +
- " default:\n" +
- " break;\n" +
- " }\n\n" +
- " item.add(label);\n" +
- " }\n" +
- "});"
- )).setLanguage(CodeBehavior.Language.JAVA));
-
- add(new ListView<>("link-colors", colors) {
- private static final long serialVersionUID = 1L;
-
- @Override
- protected void populateItem(ListItem item) {
- ColorBehavior.Color color = item.getModelObject();
- AbstractLink link = new Link("color") {
- private static final long serialVersionUID = 1L;
-
- @Override
- public void onClick() {
- }
- }.setBody(Model.of(color.cssClassName()));
-
- switch (color) {
- case White:
- case Light:
- case White50:
- item.add(BackgroundColorBehavior.dark());
- break;
- default:
- break;
- }
-
- link.add(new ColorBehavior(color));
- item.add(link);
- }
- });
- }
-
- private void addBackgroundColors() {
- List colors = List.of(BackgroundColorBehavior.Color.values());
-
- add(new ListView<>("background-colors", colors) {
- private static final long serialVersionUID = 1L;
-
- @Override
- protected void populateItem(ListItem item) {
- BackgroundColorBehavior.Color color = item.getModelObject();
- Label label = new Label("color", Model.of(color.cssClassName()));
-
- switch (color) {
- case Light:
- case Transparent:
- case Warning:
- case White:
- label.add(ColorBehavior.dark());
- break;
- default:
- label.add(ColorBehavior.white());
- break;
- }
-
- label.add(new BackgroundColorBehavior(color));
- item.add(label);
- }
- });
-
- add(new Code("background-colors-code", Model.of(
- "add(new ListView(\"background-colors\", colors) {\n\n" +
- " protected void populateItem(ListItem item) {\n" +
- " BackgroundColorBehavior.Color color = item.getModelObject();\n" +
- " Label label = new Label(\"color\", Model.of(color.cssClassName()));\n\n" +
- " switch (color) {\n" +
- " case Transparent:\n" +
- " case White:\n" +
- " case Light:\n" +
- " label.add(ColorBehavior.dark());" +
- " break;\n" +
- " default:\n" +
- " label.add(ColorBehavior.white());\n" +
- " break;\n" +
- " }\n\n" +
- " label.add(new BackgroundColorBehavior(color));\n" +
- " item.add(label);\n" +
- " }\n" +
- "});\n"
- )).setLanguage(CodeBehavior.Language.JAVA));
- }
+
+ private static final long serialVersionUID = 1L;
+
+ /**
+ * Construct.
+ *
+ * @param parameters current page parameters
+ */
+ public UtilitiesPage(PageParameters parameters) {
+ super(parameters);
+
+ addBorderTypes();
+ addBorderColors();
+ addBorderRadius();
+ addTextColors();
+ addBackgroundColors();
+ addBackgroundColorOpacity();
+ addBackgroundColorGradients();
+ addTextAndBackgroundColors();
+ }
+
+ private void addBorderTypes() {
+ List additiveTypes = List.of(
+ BorderBehavior.Type.All,
+ BorderBehavior.Type.Top,
+ BorderBehavior.Type.Right,
+ BorderBehavior.Type.Bottom,
+ BorderBehavior.Type.Left
+ );
+ add(new ListView<>("additive-border-types", additiveTypes) {
+ private static final long serialVersionUID = 1L;
+
+ @Override
+ protected void populateItem(ListItem item) {
+ BorderBehavior.Type type = item.getModelObject();
+ Label label = new Label("border-type", "");
+ label.add(new BorderBehavior().type(type).color(BorderBehavior.Color.Dark));
+ item.add(label);
+ }
+ });
+
+ List subtractiveTypes = List.of(
+ BorderBehavior.Type.None,
+ BorderBehavior.Type.ExceptTop,
+ BorderBehavior.Type.ExceptRight,
+ BorderBehavior.Type.ExceptBottom,
+ BorderBehavior.Type.ExceptLeft
+ );
+ add(new ListView<>("subtractive-border-types", subtractiveTypes) {
+ private static final long serialVersionUID = 1L;
+
+ @Override
+ protected void populateItem(ListItem item) {
+ BorderBehavior.Type type = item.getModelObject();
+ Label label = new Label("border-type", "");
+ label.add(new BorderBehavior().type(type).color(BorderBehavior.Color.Dark));
+ item.add(label);
+ }
+ });
+
+ add(new Code("border-type-code", Model.of(
+ "List additiveTypes = List.of(\n" +
+ " BorderBehavior.Type.All,\n" +
+ " BorderBehavior.Type.Top,\n" +
+ " BorderBehavior.Type.Right,\n" +
+ " BorderBehavior.Type.Bottom,\n" +
+ " BorderBehavior.Type.Left\n" +
+ ");\n" +
+ "add(new ListView(\"additive-border-types\", additiveTypes) {\n\n" +
+ " @Override\n" +
+ " protected void populateItem(ListItem item) {\n" +
+ " BorderBehavior.Type type = item.getModelObject();\n" +
+ " Label label = new Label(\"border-type\", \"\");\n" +
+ " label.add(new BorderBehavior().type(type).color(BorderBehavior.Color.Dark));\n" +
+ " item.add(label);\n" +
+ " }\n" +
+ "});"
+ )).setLanguage(CodeBehavior.Language.JAVA));
+ }
+
+ private void addBorderColors() {
+ List colors = List.of(BorderBehavior.Color.values());
+ add(new ListView<>("border-colors", colors) {
+ private static final long serialVersionUID = 1L;
+
+ @Override
+ protected void populateItem(ListItem item) {
+ BorderBehavior.Color color = item.getModelObject();
+ Label label = new Label("border-color", "");
+ label.add(new BorderBehavior().color(color).type(BorderBehavior.Type.All));
+ item.add(label);
+ }
+ });
+
+ add(new Code("border-colors-code", Model.of(
+ "List colors = List.of(BorderBehavior.Color.values());\n" +
+ "add(new ListView(\"border-colors\", colors) {\n\n" +
+ " @Override\n" +
+ " protected void populateItem(ListItem item) {\n" +
+ " BorderBehavior.Color color = item.getModelObject();\n" +
+ " Label label = new Label(\"border-color\", \"\");\n" +
+ " label.add(new BorderBehavior().color(color).type(BorderBehavior.Type.All));\n" +
+ " item.add(label);\n" +
+ " }\n" +
+ "});"
+ )).setLanguage(CodeBehavior.Language.JAVA));
+ }
+
+ private void addBorderRadius() {
+ List radiuses = List.of(BorderBehavior.Radius.values());
+ add(new ListView<>("border-radiuses", radiuses) {
+ private static final long serialVersionUID = 1L;
+
+ @Override
+ protected void populateItem(ListItem item) {
+ BorderBehavior.Radius radius = item.getModelObject();
+ ExternalImage img = new ExternalImage("border-radius", "https://via.placeholder.com/260x180");
+ img.add(new BorderBehavior().radius(radius));
+ item.add(img);
+ }
+ });
+
+ add(new Code("border-radius-code", Model.of(
+ "List radiuses = List.of(BorderBehavior.Radius.values());\n" +
+ "add(new ListView(\"border-radiuses\", radiuses) {\n" +
+ " @Override\n" +
+ " protected void populateItem(ListItem item) {\n" +
+ " BorderBehavior.Radius radius = item.getModelObject();\n" +
+ " ExternalImage img = new ExternalImage(\"border-radius\", \"https://via.placeholder.com/260x180\");\n" +
+ " img.add(new BorderBehavior().radius(radius));\n" +
+ " item.add(img);\n" +
+ " }\n" +
+ "});"
+ )).setLanguage(CodeBehavior.Language.JAVA));
+ }
+
+ private void addTextColors() {
+ List colors = List.of(TextColorBehavior.TextColor.values());
+ add(new ListView<>("text-colors", colors) {
+ private static final long serialVersionUID = 1L;
+
+ @Override
+ protected void populateItem(ListItem item) {
+ TextColorBehavior.TextColor color = item.getModelObject();
+ Label label = new Label("color", Model.of(color.cssClassName()));
+ label.add(new TextColorBehavior(color));
+
+ switch (color) {
+ case White:
+ case Light:
+ case White50:
+ label.add(BackgroundColorBehavior.dark());
+ break;
+ default:
+ break;
+ }
+
+ item.add(label);
+ }
+ });
+
+ add(new Code("text-colors-code", Model.of(
+ "add(new ListView(\"text-colors\", colors) {\n\n" +
+ " protected void populateItem(ListItem item) {\n" +
+ " ColorBehavior.Color color = item.getModelObject();\n" +
+ " Label label = new Label(\"color\", Model.of(color.cssClassName()));\n" +
+ " label.add(new ColorBehavior(color));\n\n" +
+ " switch (color) {\n" +
+ " case White:\n" +
+ " case Light:\n" +
+ " case White50:\n" +
+ " label.add(BackgroundColorBehavior.dark());\n" +
+ " break;\n" +
+ " default:\n" +
+ " break;\n" +
+ " }\n\n" +
+ " item.add(label);\n" +
+ " }\n" +
+ "});"
+ )).setLanguage(CodeBehavior.Language.JAVA));
+
+ add(new ListView<>("link-colors", colors) {
+ private static final long serialVersionUID = 1L;
+
+ @Override
+ protected void populateItem(ListItem item) {
+ TextColorBehavior.TextColor color = item.getModelObject();
+ AbstractLink link = new Link("color") {
+ private static final long serialVersionUID = 1L;
+
+ @Override
+ public void onClick() {
+ }
+ }.setBody(Model.of(color.cssClassName()));
+
+ switch (color) {
+ case White:
+ case Light:
+ case White50:
+ item.add(BackgroundColorBehavior.dark());
+ break;
+ default:
+ break;
+ }
+
+ link.add(new TextColorBehavior(color));
+ item.add(link);
+ }
+ });
+ }
+
+ private void addBackgroundColors() {
+ final List colors = List.of(BackgroundColor.values());
+
+ add(new ListView<>("background-colors", colors) {
+ private static final long serialVersionUID = 1L;
+
+ @Override
+ protected void populateItem(ListItem item) {
+ final BackgroundColor color = item.getModelObject();
+ final Label label = new Label("color", Model.of(color.cssClassName()));
+
+ switch (color) {
+ case Light, Light_Subtle:
+ case Transparent:
+ case Warning, Warning_Subtle:
+ case Body, Body_Secondary, Body_Tertiary:
+ case Primary_Subtle, Secondary_Subtle, Success_Subtle, Info_Subtle, Danger_Subtle, Dark_Subtle:
+ case White:
+ label.add(TextColorBehavior.dark());
+ break;
+ default:
+ label.add(TextColorBehavior.white());
+ break;
+ }
+
+ label.add(new BackgroundColorBehavior(color));
+ item.add(label);
+ }
+ });
+
+ final String code = """
+ add(new ListView<>("background-colors", colors) {
+ private static final long serialVersionUID = 1L;
+
+ @Override
+ protected void populateItem(ListItem item) {
+ final BackgroundColor color = item.getModelObject();
+ final Label label = new Label("color", Model.of(color.cssClassName()));
+
+ switch (color) {
+ case Light, Light_Subtle:
+ case Transparent:
+ case Warning, Warning_Subtle:
+ case Body, Body_Secondary, Body_Tertiary:
+ case Primary_Subtle, Secondary_Subtle, Success_Subtle, Info_Subtle, Danger_Subtle, Dark_Subtle:
+ case White:
+ label.add(ColorBehavior.dark());
+ break;
+ default:
+ label.add(ColorBehavior.white());
+ break;
+ }
+
+ label.add(new BackgroundColorBehavior(color));
+ item.add(label);
+ }
+ });""";
+
+ add(new Code("background-colors-code", Model.of(code)).setLanguage(CodeBehavior.Language.JAVA));
+
+ final String htmlCode = """
+
+
+
+
+ """;
+ add(new Code("htmlCodeBackground", Model.of(htmlCode)).setLanguage(Language.HTML));
+ }
+
+ private void addBackgroundColorOpacity() {
+
+ //
+ final List backgroundColors = Arrays.stream(BackgroundColor.values())
+ .filter(c -> !c.cssClassName().contains("subtle")) // ignore subtles because opacity makes no sense for them
+ .toList();
+ record BackgroundColorAndOpacity(BackgroundColor backgroundColor, BackgroundOpacity backgroundOpacity) implements Serializable {
+
+ }
+ final List bgColorsAndOpacities = new ArrayList<>();
+ for (final BackgroundColor backgroundColor : backgroundColors) {
+ for (final BackgroundOpacity backgroundOpacity : BackgroundOpacity.values()) {
+ bgColorsAndOpacities.add(new BackgroundColorAndOpacity(backgroundColor, backgroundOpacity));
+ }
+ }
+
+ add(new ListView<>("backgroundColorsOpacity", bgColorsAndOpacities) {
+
+ @Override
+ protected void populateItem(ListItem item) {
+ final BackgroundColorAndOpacity colorAndOpacity = item.getModelObject();
+ final Label label = new Label("color",
+ Model.of(colorAndOpacity.backgroundColor.cssClassName() + " " + colorAndOpacity.backgroundOpacity.cssClassName()));
+
+ switch (colorAndOpacity.backgroundColor) {
+ case Light:
+ case Transparent:
+ case Warning:
+ case Body, Body_Secondary, Body_Tertiary:
+ case White:
+ label.add(TextColorBehavior.dark());
+ break;
+ default:
+ // Settings the TextColor to Dark may not work properly for all themes in combination with opacity
+ if (colorAndOpacity.backgroundOpacity == BackgroundOpacity.Opacity_10
+ || colorAndOpacity.backgroundOpacity == BackgroundOpacity.Opacity_25
+ ) {
+ label.add(TextColorBehavior.dark());
+ } else {
+ label.add(TextColorBehavior.white());
+ }
+ break;
+ }
+
+ label.add(new BackgroundColorBehavior(colorAndOpacity.backgroundColor).withOpacity(colorAndOpacity.backgroundOpacity));
+ item.add(label);
+ }
+ });
+ final String code = """
+ add(new ListView<>("background-colors-opacity", bgColorsAndOpacities) {
+
+ @Override
+ protected void populateItem(ListItem item) {
+ final BackgroundColorAndOpacity colorAndOpacity = item.getModelObject();
+ final Label label = new Label("color",
+ Model.of(colorAndOpacity.backgroundColor.cssClassName() + " " + colorAndOpacity.backgroundOpacity.cssClassName()));
+
+ switch (colorAndOpacity.backgroundColor) {
+ case Light:
+ case Transparent:
+ case Warning:
+ case Body, Body_Secondary, Body_Tertiary:
+ case White:
+ label.add(ColorBehavior.dark());
+ break;
+ default:
+ // Settings the TextColor to Dark may not work properly for all themes in combination with opacity
+ if (colorAndOpacity.backgroundOpacity == BackgroundOpacity.Opacity_10
+ || colorAndOpacity.backgroundOpacity == BackgroundOpacity.Opacity_25
+ ) {
+ label.add(ColorBehavior.dark());
+ } else {
+ label.add(ColorBehavior.white());
+ }
+ break;
+ }
+
+ label.add(new BackgroundColorBehavior(colorAndOpacity.backgroundColor).withOpacity(colorAndOpacity.backgroundOpacity));
+ item.add(label);
+ }
+ });""";
+ add(new Code("backgroundColorsOpacityCode", Model.of(code)).setLanguage(CodeBehavior.Language.JAVA));
+
+ final String htmlCode = """
+
+
+
+
+ """;
+ add(new Code("htmlCodeBackgroundOpacity", Model.of(htmlCode)).setLanguage(Language.HTML));
+ }
+
+ private void addBackgroundColorGradients() {
+
+ // avoid not necessary background colors
+ final List backgroundColors = Arrays.stream(BackgroundColor.values())
+ .filter(c -> !c.cssClassName().contains("subtle"))
+ .filter(c -> !c.cssClassName().contains("body"))
+ .filter(c -> !c.cssClassName().contains("transparent"))
+ .toList();
+
+ add(new ListView<>("backgroundColorsGradient", backgroundColors) {
+
+ @Override
+ protected void populateItem(final ListItem item) {
+ final BackgroundColor backgroundColor = item.getModelObject();
+ final Label label = new Label("color", Model.of(backgroundColor.cssClassName()));
+ label.add(new BackgroundColorBehavior(backgroundColor).withGradient(true));
+ switch (backgroundColor) {
+ case Light:
+ case Warning:
+ case Secondary:
+ case White:
+ label.add(TextColorBehavior.dark());
+ break;
+ default:
+ label.add(TextColorBehavior.white());
+ break;
+ }
+ item.add(label);
+ }
+ });
+
+ final String code = """
+ add(new ListView<>("backgroundColorsGradient", backgroundColors) {
+
+ @Override
+ protected void populateItem(final ListItem item) {
+ final BackgroundColor backgroundColor = item.getModelObject();
+ final Label label = new Label("color", Model.of(backgroundColor.cssClassName()));
+ label.add(new BackgroundColorBehavior(backgroundColor).withGradient(true));
+ switch (backgroundColor) {
+ case Light:
+ case Warning:
+ case Secondary:
+ case White:
+ label.add(TextColorBehavior.dark());
+ break;
+ default:
+ label.add(TextColorBehavior.white());
+ break;
+ }
+ item.add(label);
+ }
+ });""";
+
+ add(new Code("backgroundColorsGradientCode", Model.of(code)).setLanguage(CodeBehavior.Language.JAVA));
+
+ final String htmlCode = """
+
+
+
+
+ """;
+
+ add(new Code("htmlCodeBackgroundGradient", Model.of(htmlCode)).setLanguage(Language.HTML));
+ }
+
+ private void addTextAndBackgroundColors() {
+
+ add(new ListView<>("textAndBackgroundColors", Arrays.asList(TextAndBackgroundColor.values())) {
+
+ @Override
+ protected void populateItem(final ListItem item) {
+ final TextAndBackgroundColor textAndBackgroundColor = item.getModelObject();
+ final Label label = new Label("color", Model.of(textAndBackgroundColor.cssClassName()));
+ label.add(new TextAndBackgroundColorBehavior(textAndBackgroundColor));
+ item.add(label);
+ }
+ });
+
+ final String code = """
+ add(new ListView<>("textAndBackgroundColors", Arrays.asList(TextAndBackgroundColor.values())) {
+
+ @Override
+ protected void populateItem(final ListItem item) {
+ final TextAndBackgroundColor textAndBackgroundColor = item.getModelObject();
+ final Label label = new Label("color", Model.of(textAndBackgroundColor.cssClassName()));
+ label.add(new TextAndBackgroundColorBehavior(textAndBackgroundColor));
+ item.add(label);
+ }
+ });""";
+ add(new Code("textAndBackgroundColorCode", Model.of(code)).setLanguage(CodeBehavior.Language.JAVA));
+
+ final String htmlCode = """
+
+
+
+
+ true
true
-
1.1.2
3.13.0
2.4.3
@@ -338,7 +337,6 @@
${hamcrest.version}
test
-