Атрибут 'autoposition' не применяется между JsPanels - PullRequest
Новая
       4

Атрибут 'autoposition' не применяется между JsPanels

0 голосов
/ 14 апреля 2020

Я начинаю использовать JsPanel в проекте на работе, и у меня есть некоторые сомнения по поводу того, почему «автоматическое расположение» не применяется между некоторыми панелями.

У меня есть 4 панели : A, B, C и D.

Панель A: 

jsPanel.create({
    id:          'A',
    theme:       'primary',
    headerTitle: 'A panel',
    position:    { my: 'left-top',
                   at: 'left-top',
                   offsetX: '0px',
                   offsetY: '0px',
                   autoposition: 'down'
                 },
    contentSize: '450 250',
    content:     '<p> Test test test</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Are you sure?');
    }
});

Панель B: 

jsPanel.create({
    id:          'B',
    theme:       'primary',
    headerTitle: 'B panel',
    position:    { my: 'center-top',
                   at: 'center-top',
                   offsetX: '0px',
                   offsetY: '0px',
                   autoposition: 'down'
                 },
    contentSize: '450 250',
    content:     '<p> Test test test</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Are you sure?');
    }
});

C Панель:

* Панель 1014 *

D: 

jsPanel.create({
    id:          'D',
    theme:       'primary',
    headerTitle: 'D panel',
    position:    { my: 'left-top',
                   at: 'left-bottom',
                   of: '#A',
                   autoposition: 'up'
                 },
    contentSize: '450 250',
    content:     '<p>Test test test</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Are you sure?');
    }
});

Чтение документации опции 'position' , в частности атрибута 'autoposition' , говорит, что вы можете установите значение, чтобы добавить промежуток между панелями, чтобы они не накапливались друг на друге:

«вниз» для панелей, расположенных «слева-сверху», «по центру» или «вправо» -top 'для обоих my: и at: установка автопозиции на' down 'автоматически добавит вертикальное смещение вниз к каждому elmt, чтобы они не накапливались друг на друге. Удаление jsPanel автоматически переместит оставшуюся панель в тот же стек.

'вверх' для панелей, расположенных с использованием 'left-bottom', 'center-bottom' или 'right-bottom' для обоих my: и at: установка автопозиции в положение «вверх» автоматически добавит вертикальное смещение вверх к каждому вяжущему, чтобы они не накапливались друг на друге. Удаление jsPanel автоматически переместит оставшуюся панель в тот же стек.

, но для меня она не применяется. Я пытался удалить autoposition в A или D , но безрезультатно.

Panels

Так что же я делаю не так или что я неправильно понял?

С уважением.

- Правка 1:

Я достиг разделения, добавив: 

offsetY: '8px',

до panel D но я думаю, что это не правильное решение ...

1 Ответ

0 голосов
/ 15 апреля 2020

Я нашел проблему. Это было недоразумение с позициями. Видя пример номер 5 , который добавляет панели одну под другой, позиции: 

my: 'right-top',
at: 'right-top',

, а затем вы устанавливаете: 

autoposition: 'down',

Так что на панели DI пришлось изменить: 

position:    { my: 'left-top',
               at: 'left-bottom',
               of: '#A',
               autoposition: 'up'
             },

на 

position:    { my: 'left-top',
               at: 'left-top',
               of: '#A',
               autoposition: 'down',
               offsetY: 4px
             },

offsetY необязательно. По умолчанию JsPanel добавляет 4px разделение, но если вы посмотрите на изображение, горизонтальное разделение будет 4px + 4px , поэтому я добавляю 4 дополнительных пикселя, чтобы визуально соответствовать горизонтальное разделение с вертикальным разделением.

С уважением!

...