Как визуализировать CheckboxGroup (или любой другой элемент) нестандартным способом? - PullRequest
Новая
       17

Как визуализировать CheckboxGroup (или любой другой элемент) нестандартным способом?

0 голосов
/ 01 октября 2018

Bokeh отображает флажки следующим образом 

<div class="bk-bs-checkbox">
    <label>
        <input type="checkbox" value="0">
        Label text
    </label>
</div>

Но я бы хотел выбрать метку в зависимости от состояния ввода :focus, :disabled, :checked, ...

Поскольку родительского селектора CSS нет, что я могу сделать, чтобы сделать флажок нестандартным способом?Я хотел бы избежать JavaScript.Если флажок отображается как следующий код, его будет легче настроить: 

<div class="bk-bs-checkbox">
    <input type="checkbox" value="0">
    <label>
        Label text
    </label>
</div>

И я мог бы этот код CSS выбрать метку в зависимости от состояния флажка: 

.bk-bs-checkbox input[type="checkbox"]:disabled + label::after {
    background-color: red,
}

ЭтоЭто просто пример, показывающий один случай использования.

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

1 Ответ

0 голосов
/ 09 января 2019

Ну, наконец-то я нашел обходной путь, который не очень чистый, но он работает.По сути, я скрыл оригинальный элемент и создал свой собственный элемент управления.Я использовал JavaScript, как предложил @Gerard.

  1. Сначала мне нужно дождаться загрузки Bokeh Server.Все элементы должны быть уже отрендерены.Поэтому я применил обходной путь из этого ответа

  2. Затем я скрыл исходный элемент, сгенерированный bokeh, используя атрибут python css_classes и CSS-стиль display: none;

  3. Я создал элемент с помощью JavaScript (на самом деле я включил jQuery).Это можно сделать и с помощью шаблонов боке.В моем случае мне было удобнее, как это.Затем я добавил элемент перед исходным. 

    var new_cb = $('<div>', {
    class: 'abc-checkbox abc-checkbox-primary',
});
new_cb.append(
    $('<input>', {
        id: 'id_new_cb',
        type: 'checkbox'
    })
);
new_cb.append(
    $('<label>', {
        for: 'id_new_cb',
        text: 'Custom element'
    })
);
$('.original_cb').before(new_cb);

  4. Наконец, я добавил событие, чтобы вызвать событие для исходного скрытого элемента: 

    $('#id_new_cb').change(function() {
    if(this.checked) {
        $('.original_cb input').click();
    } else {
        $('.original_cb input').click();
    }
});

Нечто подобное можно сделать с остальными элементами.Это полезно, если вы просто хотите изменить пару элементов.Если нет, то это станет довольно громоздким.

...