widget_layout.py 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. # Copyright (c) Jupyter Development Team.
  2. # Distributed under the terms of the Modified BSD License.
  3. """Contains the Layout class"""
  4. from traitlets import Unicode, Instance, CaselessStrEnum, validate
  5. from .widget import Widget, register
  6. from .._version import __jupyter_widgets_base_version__
  7. CSS_PROPERTIES=['inherit', 'initial', 'unset']
  8. @register
  9. class Layout(Widget):
  10. """Layout specification
  11. Defines a layout that can be expressed using CSS. Supports a subset of
  12. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
  13. When a property is also accessible via a shorthand property, we only
  14. expose the shorthand.
  15. For example:
  16. - ``flex-grow``, ``flex-shrink`` and ``flex-basis`` are bound to ``flex``.
  17. - ``flex-wrap`` and ``flex-direction`` are bound to ``flex-flow``.
  18. - ``margin-[top/bottom/left/right]`` values are bound to ``margin``, etc.
  19. """
  20. _view_name = Unicode('LayoutView').tag(sync=True)
  21. _view_module = Unicode('@jupyter-widgets/base').tag(sync=True)
  22. _view_module_version = Unicode(__jupyter_widgets_base_version__).tag(sync=True)
  23. _model_name = Unicode('LayoutModel').tag(sync=True)
  24. # Keys
  25. align_content = CaselessStrEnum(['flex-start', 'flex-end', 'center', 'space-between',
  26. 'space-around', 'space-evenly', 'stretch'] + CSS_PROPERTIES, allow_none=True, help="The align-content CSS attribute.").tag(sync=True)
  27. align_items = CaselessStrEnum(['flex-start', 'flex-end', 'center',
  28. 'baseline', 'stretch'] + CSS_PROPERTIES, allow_none=True, help="The align-items CSS attribute.").tag(sync=True)
  29. align_self = CaselessStrEnum(['auto', 'flex-start', 'flex-end',
  30. 'center', 'baseline', 'stretch'] + CSS_PROPERTIES, allow_none=True, help="The align-self CSS attribute.").tag(sync=True)
  31. bottom = Unicode(None, allow_none=True, help="The bottom CSS attribute.").tag(sync=True)
  32. border = Unicode(None, allow_none=True, help="The border CSS attribute.").tag(sync=True)
  33. display = Unicode(None, allow_none=True, help="The display CSS attribute.").tag(sync=True)
  34. flex = Unicode(None, allow_none=True, help="The flex CSS attribute.").tag(sync=True)
  35. flex_flow = Unicode(None, allow_none=True, help="The flex-flow CSS attribute.").tag(sync=True)
  36. height = Unicode(None, allow_none=True, help="The height CSS attribute.").tag(sync=True)
  37. justify_content = CaselessStrEnum(['flex-start', 'flex-end', 'center',
  38. 'space-between', 'space-around'] + CSS_PROPERTIES, allow_none=True, help="The justify-content CSS attribute.").tag(sync=True)
  39. justify_items = CaselessStrEnum(['flex-start', 'flex-end', 'center'] + CSS_PROPERTIES,
  40. allow_none=True, help="The justify-items CSS attribute.").tag(sync=True)
  41. left = Unicode(None, allow_none=True, help="The left CSS attribute.").tag(sync=True)
  42. margin = Unicode(None, allow_none=True, help="The margin CSS attribute.").tag(sync=True)
  43. max_height = Unicode(None, allow_none=True, help="The max-height CSS attribute.").tag(sync=True)
  44. max_width = Unicode(None, allow_none=True, help="The max-width CSS attribute.").tag(sync=True)
  45. min_height = Unicode(None, allow_none=True, help="The min-height CSS attribute.").tag(sync=True)
  46. min_width = Unicode(None, allow_none=True, help="The min-width CSS attribute.").tag(sync=True)
  47. overflow = Unicode(None, allow_none=True, help="The overflow CSS attribute.").tag(sync=True)
  48. overflow_x = CaselessStrEnum(['visible', 'hidden', 'scroll', 'auto'] + CSS_PROPERTIES, allow_none=True, help="The overflow-x CSS attribute (deprecated).").tag(sync=True)
  49. overflow_y = CaselessStrEnum(['visible', 'hidden', 'scroll', 'auto'] + CSS_PROPERTIES, allow_none=True, help="The overflow-y CSS attribute (deprecated).").tag(sync=True)
  50. order = Unicode(None, allow_none=True, help="The order CSS attribute.").tag(sync=True)
  51. padding = Unicode(None, allow_none=True, help="The padding CSS attribute.").tag(sync=True)
  52. right = Unicode(None, allow_none=True, help="The right CSS attribute.").tag(sync=True)
  53. top = Unicode(None, allow_none=True, help="The top CSS attribute.").tag(sync=True)
  54. visibility = CaselessStrEnum(['visible', 'hidden']+CSS_PROPERTIES, allow_none=True, help="The visibility CSS attribute.").tag(sync=True)
  55. width = Unicode(None, allow_none=True, help="The width CSS attribute.").tag(sync=True)
  56. object_fit = CaselessStrEnum(['contain', 'cover', 'fill', 'scale-down', 'none'], allow_none=True, help="The object-fit CSS attribute.").tag(sync=True)
  57. object_position = Unicode(None, allow_none=True, help="The object-position CSS attribute.").tag(sync=True)
  58. grid_auto_columns = Unicode(None, allow_none=True, help="The grid-auto-columns CSS attribute.").tag(sync=True)
  59. grid_auto_flow = CaselessStrEnum(['column','row','row dense','column dense']+ CSS_PROPERTIES, allow_none=True, help="The grid-auto-flow CSS attribute.").tag(sync=True)
  60. grid_auto_rows = Unicode(None, allow_none=True, help="The grid-auto-rows CSS attribute.").tag(sync=True)
  61. grid_gap = Unicode(None, allow_none=True, help="The grid-gap CSS attribute.").tag(sync=True)
  62. grid_template_rows = Unicode(None, allow_none=True, help="The grid-template-rows CSS attribute.").tag(sync=True)
  63. grid_template_columns = Unicode(None, allow_none=True, help="The grid-template-columns CSS attribute.").tag(sync=True)
  64. grid_template_areas = Unicode(None, allow_none=True, help="The grid-template-areas CSS attribute.").tag(sync=True)
  65. grid_row = Unicode(None, allow_none=True, help="The grid-row CSS attribute.").tag(sync=True)
  66. grid_column = Unicode(None, allow_none=True, help="The grid-column CSS attribute.").tag(sync=True)
  67. grid_area = Unicode(None, allow_none=True, help="The grid-area CSS attribute.").tag(sync=True)
  68. @validate('overflow_x', 'overflow_y')
  69. def _validate_overflows(self, proposal):
  70. if proposal.value is not None:
  71. import warnings
  72. warnings.warn("Layout properties overflow_x and overflow_y have been deprecated and will be dropped in a future release. Please use the overflow shorthand property instead", DeprecationWarning)
  73. return proposal.value
  74. class LayoutTraitType(Instance):
  75. klass = Layout
  76. def validate(self, obj, value):
  77. if isinstance(value, dict):
  78. return super(LayoutTraitType, self).validate(obj, self.klass(**value))
  79. else:
  80. return super(LayoutTraitType, self).validate(obj, value)