formheaderview.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module table/ui/colorinputview
  7. */
  8. import View from '../view';
  9. import '../../theme/components/formheader/formheader.css';
  10. export default class FormHeaderView extends View {
  11. constructor( locale, options = {} ) {
  12. super( locale );
  13. const bind = this.bindTemplate;
  14. /**
  15. * The label of the header.
  16. *
  17. * @readonly
  18. * @member {String} #label
  19. */
  20. this.set( 'label', options.label || '' );
  21. /**
  22. * An additional CSS class added to the {@link #element}.
  23. *
  24. * @observable
  25. * @member {String} #class
  26. */
  27. this.set( 'class', options.class || null );
  28. /**
  29. * A collection of header items.
  30. *
  31. * @readonly
  32. * @member {module:ui/viewcollection~ViewCollection}
  33. */
  34. this.children = this.createCollection();
  35. const label = new View( locale );
  36. label.setTemplate( {
  37. tag: 'span',
  38. attributes: {
  39. class: [
  40. 'ck',
  41. 'ck-form__header__label'
  42. ]
  43. },
  44. children: [
  45. { text: bind.to( 'label' ) }
  46. ]
  47. } );
  48. this.children.add( label );
  49. this.setTemplate( {
  50. tag: 'div',
  51. attributes: {
  52. class: [
  53. 'ck',
  54. 'ck-form__header',
  55. bind.to( 'class' )
  56. ]
  57. },
  58. children: this.children
  59. } );
  60. }
  61. }