Пользовательский Интерфейс

У компонента SpreadSheet достаточно сложный интерфейс. В этом руководстве вы найдете полезные советы по настройке внешнего вида SpreadSheet в соответствии с вашими пожеланиями и требованиями.

Структура тулбара

Тулбар состоит из блоков, кнопки внутри блоков сгруппированы по функциям. Организация блоков задается в коллекции "buttons".

Тулбар по умолчанию содержит только один ряд кнопок. Чтобы создать тулбар с несколькими рядами блоков, используйте коллекцию "toolbar".

Ниже детально рассмотрены обе коллекции.

Настройка коллекции "buttons"

Определение положения кнопок

Коллекция "buttons" - это объект данных, в котором ключ - это название блока, а значение - это массив с названиями кнопок.

По умолчанию тулбар содержит 4 блока с кнопками:

  • "Undo" - Отменить/Восстановить
  • "Font" - все операции со шрифтом и цветом
  • "Align" - операции выравнивания, переноса текста и объединения ячеек
  • "Format" - настройки формата чисел
webix.ui({
   view:"spreadsheet",
   buttons: {
       "undo": ["undo","redo"],
       "font": ["font-family","font-size","font-weight","font-style",
            "text-decoration","color","background","borders"],
       "align": ["text-align","vertical-align","wrap","span"],
       "format": ["format"]
   }
});

Вы можете добавить новый блок с нужным названием или скрыть название (проставив символ "$" перед названием).

Также вы можете перевести названия всех кнопок и элементов на нужный вам язык с помощью локали Spreadsheet.

Вы можете изменять кнопки и добавлять новые кнопки типов htmlbutton, image или icon.

Создание кнопок с текстом

Чтобы добавить кнопку с текстом, необходимо поместить объект с конфигурацией кнопки (включая ее название) в соответствующий блок свойства buttons:

webix.ui({
   view:"spreadsheet",
   buttons: {
       "undo": ["undo","redo"],
        ...
       "My Block": [
           {   view: "button", name: "a", width: 40, label: "New button" }, 
           ...
       ]
    }
});

Related sample:  Text buttons

Создание кнопок с иконками

Чтобы ваша новая кнопка соответствовала общему виду SpreadSheet, следуйте рекомендациям ниже:

  • задайте ширину кнопки равную 40px
  • используйте "webix_ssheet_button_icon" как часть имени класса элемента icon
  • в качестве background-image используйте простые иконки с прозрачным фоном и цветом #787878

Пример создания кнопки с иконкой ниже:

webix.ui({
   view:"spreadsheet",
   buttons: {
       "undo": ["undo","redo"],
       ...
       "Insert": [
        {
           view: "button", name: "insert-image", width: 40,
           label: "<span class='webix_ssheet_button_icon icon_image'></span>",
           tooltip: "Insert image", click: insertImage
         }
       ]
   }
});

Related sample:  Icon buttons

Группировка кнопок

Если количество кнопок превышает ширину тулбара, вы может их сгруппировать. Для этого добавьте на тулбар кнопку с иконкой и прикрепите к ней выпадающее меню. Поместите все нужные кнопки в список выпадающего меню.

Описанная структура представлена в коде ниже:

webix.ui({
   view:"spreadsheet",
   buttons: {
       "undo": ["undo","redo"],
       ...
       "$other": [
          {},
          {
            view: "button",  name: "a", width: 40,
            label: "<span class='webix_ssheet_button_icon icon_other'></span>",
            tooltip: "Other options", popup: $$("mypopup")
          }
       ]
   }
});

Related sample:  Additional buttons

Выпадающее меню

Выпадающее меню с иконками

Для создания выпадающего меню с иконками, поместите компонент "ssheet-icons" в тело компонента datasuggest:

webix.ui({
   id: "mypopup",
   view: "datasuggest",
   body:{
       view: "ssheet-icons",
       xCount:3,
       yCount:1,
       tooltip: {
           template: "#title#"
       }
   },
   data: [
       {id: "insert_image", css: "bar_chart", title: "Bar"},
       {id: "insert_chart", css: "line_chart",  title: "Line"},
       {id: "insert_column", css: "pie_chart", title: "Pie"}
   ]
});

Компонент "ssheet-icons" основан на DataView, поэтому вы можете задать лейаут для иконок, используя свойства xCount и yCount.

Свойство css в элементах данных определяет правила CSS, где вы можете задать фоновое изображение для кнопки:

.bar_chart{
   background: url("images/bar-chart.svg");
}

Related sample:  Icon buttons in popup

Стилизация иконок в выпадающем меню

Стиль кнопок в выпадающем меню должен совпадать со стилем остальных кнопок тулбара. Чтобы достичь этого, следуйте рекомендациям ниже:

  • используйте "webix_ssheet_button_icon" как часть имени класса элемента icon
  • в качестве background-image используйте простые иконки с прозрачным фоном и цветом #787878

Выпадающее меню с названиями кнопок

Чтобы прикрепить выпадающее меню к кнопке на тулбаре, задайте ей свойство popup.

webix.ui({
   view:"spreadsheet",
   buttons: {
       ...
       "$other": [
           { view: "button", popup: $$("mypopup"),...}
       ]
   }
});

Также вы можете вызвать метод show() и передать элемент кнопки DOM, чтобы показать выпадающее меню как в примере:

$$("mypopup").show($$("mybutton").$view);

Related sample:  Additional buttons

Выпадающее меню со списком

Для создания выпадающего меню со списком используйте компонент "ssheet-suggest". Компонент основан на ContextMenu, что позволит вам добавлять в него подменю и разделители:

webix.ui({
   id: "mypopup",
   view: "ssheet-suggest",
   template: "<span class='webix_ssheet_button_icon #icon#'></span> #value#",
   data:[
       { id: "insert_image", icon: "image", value: "Insert image"},
       { id: "insert_chart", icon: "chart",  value: "Insert chart"},
       { $template: "Separator" },
       { id: "insert_column", icon: "column", value: "Insert column"},
       { id: "insert_row", icon: "row",  value: "Insert row"}
   ]
});

Выпадающее меню с формой

Чтобы прикрепить выпадающее меню с формой к кнопке на тулбаре, выполните следующие условия:

  • используйте только нижние границы
  • установите плейсхолдеры
  • для стилизации с помощью CSS используйте "webix_ssheet_suggest", для списков формы задайте padding:0
  • для цветовой палитры используйте компонент "ssheet-colorpicker"

Чтобы границы всех контролов внутри выпадающего меню отображались корректно, вы можете использовать компонент "ssheet-form-popup" вместо "popup", а для саджестов "ssheet-form-suggest":

webix.ui({
   id: "mypopup",
   view: "ssheet-form-popup",
   body: {
       view: "form",
       borderless: true,
       elements:[
            {view: "text", placeholder: "Name",...},
            {view: "richselect", label: "Type", placeholder: "Select", suggest:{
               view:  "ssheet-form-suggest",
               data:["Area","Bar","Line"]
            }},
            {view: "ssheet-colorpicker", label: "Color"}
      ]
   }
});

Related sample:  Popup with Form

Диалоговые окна

Элементы в диалоговом окне SpreadSheet работают по тем же правилам, что и элементы выпадающего меню. Для создания диалогового окна вместо компонента "ssheet-dialog" рекомендуется использовать компонент window.

Компонент "ssheet-dialog" применяет стили к хедеру и добавляет три кнопки: иконка "Закрыть окно" в верхнем правом углу диалогового окна и две кнопки внизу (Отменить and Сохранить).

Чтобы задать заголовок окну, используйте свойство head.

webix.ui({
   id: "mydialog",
   view: "ssheet-dialog",
   head: "Editor",
   body: {
       view: "form",
       elements:[
           ...
       ]
   }
});

Related sample:  Dialog

Настройки иконки "Закрыть окно"

Чтобы задать фон для иконки, используйте "webix_ssheet_hide_icon".

.webix_ssheet_hide_icon{
   background: url("images/edit.svg");
}

Диалоговое окно запускает событие onHideClick по клику на иконку:

on:{
   onHideClick: function(){
       // клик на иконку 
       this.hide();
   }
}

Кнопки Отменить и Сохранить

Кнопки содержатся в компоненте "ssheet-dialog" и их не нужно добавлять отдельно. Если вы хотите убрать их, задайте значение false свойству buttons:

view: "ssheet-dialog",
buttons: false,

Названия кнопок заданы в локали SpreadSheet:

webix.i18n.spreadsheet.labels.cancel = "Cancel";
webix.i18n.spreadsheet.labels.save = "Save";

Диалоговое окно запускает события onCancelClick и onSaveClick по клику на соответствующую кнопку.

Таблица

Кроме контролов, вы можете добавить в диалоговое окно любой компонент, например таблицу. Чтобы получить соответствующий внешний вид таблицы, рекомендуется использовать "ssheet-dialog-table".

webix.ui({
    id: "mydialog",
    view: "ssheet-dialog",
    head: "Editor",
    body: {
        cols:[
            {
                view: "ssheet-dialog-table", autowidth: true, autoheight:1,autoConfig:true,
                data:[
                    {id: 1, name: "Range1", range: "A3:C8"},
                    {id: 2, name: "Range2", range: "D3:F8"}
                ]
            },
            {
                view: "form",
                elements:[
                    ...
        ]}
    ]}
});

Related sample:  DataTable in Dialog

Настройка коллекции "toolbar"

Пользовательский тулбар задается с помощью коллекции "toolbar" и позволяет настраивать ширину и высоту кнопок, устанавливать отступы и разделители между блоками кнопок.

Принцип работы с кнопками в коллекции "toolbar" такой же, как и в коллекции "buttons".

Основные правила при работе с пользовательским тулбаром:

  • элементы тулбара помещаются в объект toolbar
  • тулбар строится по принципу лейаута, т.е. состоит из строк и столбцов, что позволяет создавать несколько уровней кнопок
  • пользовательская кнопка должна включать свойство $button с именем кнопки в качестве значения
  • отступы кнопкам задаются с помощью свойств padding и margin
  • названия для блоков кнопок задаются компонентом ssheet-bar-title с помощью template
  • размер кнопок по умолчанию можно изменить используя свойства width и height
  • разделитель между компонентами можно добавить с помощью ssheet-separator
 toolbar: [
    {
        rows:[
          {
            margin: 2,
            cols: [
                {$button: "undo"},
                {$button: "redo"}
            ]
          },
          {},
          {template: "Undo/Redo", view: "ssheet-bar-title", height: 24}
        ]
    },
    {view: "ssheet-separator"},
    {
        rows:[
           {
             margin: 2,
             cols:[
                {$button: "font-family", width: 167},
                {$button: "font-size", width: 90}
             ]
           },
           ...
        ]
    },
    ...
]

Related sample:  Custom toolbar

Полный список элементов тулбара

Код со всеми элементами тулбара приведен в отдельной статье.

Наверх
If you have not checked yet, be sure to visit site of our main product Webix easy javascript framework and page of web spreadsheet product.