Text style

Сложный элемент управления для настройки стиля текста в элементах Diagram

Использование

{
    type: "textStyle",

    hidden?: boolean, // по умолчанию false
    disabled?: boolean, // по умолчанию false

    css?: string,
    width?: string | number | "content", // по умолчанию "content"
    height?: string | number | "content", // по умолчанию "content"
    padding?: string | number, // по умолчанию "0 16px"

    label?: string,
    labelAlignment?: "left" | "right" | "center", // по умолчанию "left"
    align?: "start" | "center" | "end" | "between" | "around" | "evenly", // по умолчанию "between"
    compact?: boolean, // по умолчанию false

    // Служебные свойства
    $properties?: object
}

Описание

Базовые свойства

• type - (обязательно) тип элемента управления. Укажите значение "textStyle"
• hidden - (опционально) определяет, скрыт ли элемент управления. По умолчанию — false
• disabled - (опционально) определяет, включен (false) или отключен (true) элемент управления. По умолчанию — false
• css - (опционально) добавляет стилевые классы к элементу управления
• width - (опционально) ширина элемента управления. По умолчанию — "content"
• height - (опционально) высота элемента управления. По умолчанию — "content"
• padding - (опционально) задает отступы для содержимого внутри группы элементов управления. По умолчанию — "0 16px"
• label - (опционально) задает подпись для элемента управления
• labelAlignment - (опционально) определяет положение подписи. По умолчанию — "left"
• align - (опционально) задает выравнивание элементов управления внутри группы. По умолчанию — "between"
• compact - (опционально) задает компактный режим, убирает отступы и рамку. По умолчанию — false

Служебные свойства

• $properties - (опционально) позволяет переопределить значения базовых элементов управления внутри сложного элемента управления. Вы можете настроить следующие элементы элемента управления Text style на основе базовых элементов управления:
  • fontSize - (combo) задает размер шрифта
  • lineHeight - (input) задает высоту строки
  • fontColor - (colorpicker) задает цвет шрифта
  • fontWeight - (toggle) задает насыщенность шрифта
  • fontStyle - (toggle) задает стиль шрифта

Пример

const editor= new dhx.DiagramEditor("editor_container", {
    type: "mindmap",
    view: {
        editbar: {
            properties: {
                $shape: [
                    {
                        type: "textStyle",
                        label: "Text style",
                        $properties: {
                            fontSize: {
                                value: 20,
                                options: [
                                    { id: 10, value: "10px" },
                                    { id: 20, value: "20px" },
                                    { id: 30, value: "30px" },
                                    { id: 40, value: "40px" }
                                ]
                            }
                        }
                    }
                ]
            }
        }
    }
});