Styling buttons, text inputs, bool inputs. Raw CSS attributes.

docs/source/examples/Widget Styling.ipynb

@@ -645,6 +645,29 @@
  "s1"
  ]
  },
+ {
+ "cell_type": "markdown",
+ "metadata": {},
+ "source": [
+ "Styles can be given when a widget is constructed, either as a specific Style instance or as a dictionary."
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "metadata": {},
+ "outputs": [],
+ "source": [
+ "b3 = Button(description='Styled button', style=dict(\n",
+ " font_style='italic',\n",
+ " font_weight='bold',\n",
+ " font_variant=\"small-caps\",\n",
+ " text_color='red',\n",
+ " text_decoration='underline'\n",
+ "))\n",
+ "b3"
+ ]
+ },
  {
  "cell_type": "markdown",
  "metadata": {},

ipywidgets/widgets/widget_bool.py

@@ -6,13 +6,34 @@
 Represents a boolean using a widget.
 """
 
-from .widget_description import DescriptionWidget
+from .widget_description import DescriptionStyle, DescriptionWidget
 from .widget_core import CoreWidget
 from .valuewidget import ValueWidget
-from .widget import register
+from .widget import register, widget_serialization
+from .trait_types import Color, InstanceDict
 from traitlets import Unicode, Bool, CaselessStrEnum
 
 
+@register
+class CheckboxStyle(DescriptionStyle, CoreWidget):
+ """Checkbox widget style."""
+ _model_name = Unicode('CheckboxStyleModel').tag(sync=True)
+ background = Unicode(None, allow_none=True, help="Background specifications.").tag(sync=True)
+
+
+@register
+class ToggleButtonStyle(DescriptionStyle, CoreWidget):
+ """ToggleButton widget style."""
+ _model_name = Unicode('ToggleButtonStyleModel').tag(sync=True)
+ font_family = Unicode(None, allow_none=True, help="Toggle button text font family.").tag(sync=True)
+ font_size = Unicode(None, allow_none=True, help="Toggle button text font size.").tag(sync=True)
+ font_style = Unicode(None, allow_none=True, help="Toggle button text font style.").tag(sync=True)
+ font_variant = Unicode(None, allow_none=True, help="Toggle button text font variant.").tag(sync=True)
+ font_weight = Unicode(None, allow_none=True, help="Toggle button text font weight.").tag(sync=True)
+ text_color = Color(None, allow_none=True, help="Toggle button text color").tag(sync=True)
+ text_decoration = Unicode(None, allow_none=True, help="Toggle button text decoration.").tag(sync=True)
+
+
 class _Bool(DescriptionWidget, ValueWidget, CoreWidget):
  """A base class for creating widgets that represent booleans."""
  value = Bool(False, help="Bool value").tag(sync=True)
@@ -42,6 +63,8 @@ class Checkbox(_Bool):
  _view_name = Unicode('CheckboxView').tag(sync=True)
  _model_name = Unicode('CheckboxModel').tag(sync=True)
  indent = Bool(True, help="Indent the control to align with other controls with a description.").tag(sync=True)
+ style = InstanceDict(CheckboxStyle, help="Styling customizations").tag(sync=True, **widget_serialization)
+
 
 
 @register
@@ -69,6 +92,7 @@ class ToggleButton(_Bool):
  button_style = CaselessStrEnum(
  values=['primary', 'success', 'info', 'warning', 'danger', ''], default_value='',
  help="""Use a predefined styling for the button.""").tag(sync=True)
+ style = InstanceDict(ToggleButtonStyle, help="Styling customizations").tag(sync=True, **widget_serialization)
 
 
 @register

ipywidgets/widgets/widget_button.py

@@ -22,7 +22,13 @@ class ButtonStyle(Style, CoreWidget):
  """Button style widget."""
  _model_name = Unicode('ButtonStyleModel').tag(sync=True)
  button_color = Color(None, allow_none=True, help="Color of the button").tag(sync=True)
- font_weight = Unicode(help="Button text font weight.").tag(sync=True)
+ font_family = Unicode(None, allow_none=True, help="Button text font family.").tag(sync=True)
+ font_size = Unicode(None, allow_none=True, help="Button text font size.").tag(sync=True)
+ font_style = Unicode(None, allow_none=True, help="Button text font style.").tag(sync=True)
+ font_variant = Unicode(None, allow_none=True, help="Button text font variant.").tag(sync=True)
+ font_weight = Unicode(None, allow_none=True, help="Button text font weight.").tag(sync=True)
+ text_color = Unicode(None, allow_none=True, help="Button text color.").tag(sync=True)
+ text_decoration = Unicode(None, allow_none=True, help="Button text decoration.").tag(sync=True)
 
 
 @register

ipywidgets/widgets/widget_string.py

@@ -6,15 +6,50 @@
 Represents a unicode string using a widget.
 """
 
-from .widget_description import DescriptionWidget
+from .widget_description import DescriptionStyle, DescriptionWidget
 from .valuewidget import ValueWidget
-from .widget import CallbackDispatcher, register
+from .widget import CallbackDispatcher, register, widget_serialization
 from .widget_core import CoreWidget
-from .trait_types import TypedTuple
+from .trait_types import Color, InstanceDict, TypedTuple
 from traitlets import Unicode, Bool, Int
 from warnings import warn
 
 
+class _StringStyle(DescriptionStyle, CoreWidget):
+ """Text input style widget."""
+ _model_name = Unicode('StringStyleModel').tag(sync=True)
+ background = Unicode(None, allow_none=True, help="Background specifications.").tag(sync=True)
+ font_size = Unicode(None, allow_none=True, help="Text font size.").tag(sync=True)
+ text_color = Color(None, allow_none=True, help="Text color").tag(sync=True)
+
+
+@register
+class LabelStyle(_StringStyle):
+ """Label style widget."""
+ _model_name = Unicode('LabelStyleModel').tag(sync=True)
+ font_family = Unicode(None, allow_none=True, help="Label text font family.").tag(sync=True)
+ font_style = Unicode(None, allow_none=True, help="Label text font style.").tag(sync=True)
+ font_variant = Unicode(None, allow_none=True, help="Label text font variant.").tag(sync=True)
+ font_weight = Unicode(None, allow_none=True, help="Label text font weight.").tag(sync=True)
+ text_decoration = Unicode(None, allow_none=True, help="Label text decoration.").tag(sync=True)
+
+
+@register
+class TextStyle(_StringStyle):
+ """Text input style widget."""
+ _model_name = Unicode('TextStyleModel').tag(sync=True)
+
+@register
+class HTMLStyle(_StringStyle):
+ """HTML style widget."""
+ _model_name = Unicode('HTMLStyleModel').tag(sync=True)
+
+@register
+class HTMLMathStyle(_StringStyle):
+ """HTML with math style widget."""
+ _model_name = Unicode('HTMLMathStyleModel').tag(sync=True)
+
+
 class _String(DescriptionWidget, ValueWidget, CoreWidget):
  """Base class used to create widgets that represent a string."""
 
@@ -24,7 +59,7 @@ class _String(DescriptionWidget, ValueWidget, CoreWidget):
  # the text, not the bottom margin. See the last paragraph of
  # https://www.w3.org/TR/CSS2/visudet.html#leading
  placeholder = Unicode('\u200b', help="Placeholder text to display when nothing has been typed").tag(sync=True)
-
+ style = InstanceDict(_StringStyle).tag(sync=True, **widget_serialization)
 
  def __init__(self, value=None, **kwargs):
  if value is not None:
@@ -33,18 +68,19 @@ def __init__(self, value=None, **kwargs):
 
  _model_name = Unicode('StringModel').tag(sync=True)
 
-
 @register
 class HTML(_String):
  """Renders the string `value` as HTML."""
  _view_name = Unicode('HTMLView').tag(sync=True)
  _model_name = Unicode('HTMLModel').tag(sync=True)
+ style = InstanceDict(HTMLStyle).tag(sync=True, **widget_serialization)
 
 @register
 class HTMLMath(_String):
  """Renders the string `value` as HTML, and render mathematics."""
  _view_name = Unicode('HTMLMathView').tag(sync=True)
  _model_name = Unicode('HTMLMathModel').tag(sync=True)
+ style = InstanceDict(HTMLMathStyle).tag(sync=True, **widget_serialization)
 
 
 @register
@@ -56,6 +92,7 @@ class Label(_String):
  """
  _view_name = Unicode('LabelView').tag(sync=True)
  _model_name = Unicode('LabelModel').tag(sync=True)
+ style = InstanceDict(LabelStyle).tag(sync=True, **widget_serialization)
 
 
 @register
@@ -66,6 +103,7 @@ class Textarea(_String):
  rows = Int(None, allow_none=True, help="The number of rows to display.").tag(sync=True)
  disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
  continuous_update = Bool(True, help="Update the value as the user types. If False, update on submission, e.g., pressing Enter or navigating away.").tag(sync=True)
+ style = InstanceDict(TextStyle).tag(sync=True, **widget_serialization)
 
 @register
 class Text(_String):
@@ -74,6 +112,7 @@ class Text(_String):
  _model_name = Unicode('TextModel').tag(sync=True)
  disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
  continuous_update = Bool(True, help="Update the value as the user types. If False, update on submission, e.g., pressing Enter or navigating away.").tag(sync=True)
+ style = InstanceDict(TextStyle).tag(sync=True, **widget_serialization)
 
  def __init__(self, *args, **kwargs):
  super().__init__(*args, **kwargs)

packages/base/src/widget_style.ts

@@ -5,6 +5,11 @@ import { assign } from './utils';
 
 import { WidgetModel, WidgetView, DOMWidgetView } from './widget';
 
+/**
+ * Three functions to deal with some CSS attributes
+ * to make them easier to use.
+ */
+
 export class StyleModel extends WidgetModel {
  defaults(): Backbone.ObjectHash {
  const Derived = this.constructor as typeof StyleModel;

packages/controls/src/widget_bool.ts

@@ -1,11 +1,77 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import { DOMWidgetView } from '@jupyter-widgets/base';
+
 import { CoreDescriptionModel } from './widget_core';
 
-import { DescriptionView } from './widget_description';
+import { DescriptionStyleModel, DescriptionView } from './widget_description';
 
-import { DOMWidgetView } from '@jupyter-widgets/base';
+export class CheckboxStyleModel extends DescriptionStyleModel {
+ defaults(): Backbone.ObjectHash {
+ return {
+ ...super.defaults(),
+ _model_name: 'CheckboxStyleModel',
+ };
+ }
+
+ public static styleProperties = {
+ ...DescriptionStyleModel.styleProperties,
+ background: {
+ selector: '',
+ attribute: 'background',
+ default: null as any,
+ },
+ };
+}
+
+export class ToggleButtonStyleModel extends DescriptionStyleModel {
+ defaults(): Backbone.ObjectHash {
+ return {
+ ...super.defaults(),
+ _model_name: 'ToggleButtonStyleModel',
+ };
+ }
+
+ public static styleProperties = {
+ ...DescriptionStyleModel.styleProperties,
+ font_family: {
+ selector: '',
+ attribute: 'font-family',
+ default: '',
+ },
+ font_size: {
+ selector: '',
+ attribute: 'font-size',
+ default: '',
+ },
+ font_style: {
+ selector: '',
+ attribute: 'font-style',
+ default: '',
+ },
+ font_variant: {
+ selector: '',
+ attribute: 'font-variant',
+ default: '',
+ },
+ font_weight: {
+ selector: '',
+ attribute: 'font-weight',
+ default: '',
+ },
+ text_color: {
+ selector: '',
+ attribute: 'color',
+ default: '',
+ },
+ text_decoration: {
+ selector: '',
+ attribute: 'text-decoration',
+ default: '',
+ },
+ };
+}
 
 export class BoolModel extends CoreDescriptionModel {
  defaults(): Backbone.ObjectHash {
@@ -23,6 +89,7 @@ export class CheckboxModel extends CoreDescriptionModel {
  return {
  ...super.defaults(),
  indent: true,
+ style: null,
  _view_name: 'CheckboxView',
  _model_name: 'CheckboxModel',
  };
@@ -183,6 +250,7 @@ export class ToggleButtonModel extends BoolModel {
  tooltip: '',
  icon: '',
  button_style: '',
+ style: null,
  };
  }
 }

packages/controls/src/widget_button.ts

@@ -23,11 +23,41 @@ export class ButtonStyleModel extends StyleModel {
  attribute: 'background-color',
  default: null as any,
  },
+ font_family: {
+ selector: '',
+ attribute: 'font-family',
+ default: '',
+ },
+ font_size: {
+ selector: '',
+ attribute: 'font-size',
+ default: '',
+ },
+ font_style: {
+ selector: '',
+ attribute: 'font-style',
+ default: '',
+ },
+ font_variant: {
+ selector: '',
+ attribute: 'font-variant',
+ default: '',
+ },
  font_weight: {
  selector: '',
  attribute: 'font-weight',
  default: '',
  },
+ text_color: {
+ selector: '',
+ attribute: 'color',
+ default: '',
+ },
+ text_decoration: {
+ selector: '',
+ attribute: 'text-decoration',
+ default: '',
+ },
  };
 }