Использование `href` в dbc.Button каким-то образом сбрасывает стиль CSS — Dash Python

Gon_F 1

Всем привет. Я пытаюсь использовать dbc.Button , чтобы разрешить многостраничную навигацию по моему приложению, используя свойство href= , которое имеет dbc.Button (в отличие от html.Button , у которого его нет) .

Я задаю стиль всем своим кнопкам, но заметил, что при использовании href приводит к потере некоторых свойств стиля, и я не могу найти способ предотвратить срабатывание этого изменения.

Есть ли способ предотвратить любые изменения стиля, которые href любит вызывать для кнопок?

Скриншот моего приложения:

Снимок экрана 2021-06-10 в 8.33.00 PM1042×448 22,3 КБ

приложение = тире. Dash()

button_special_style = {‘семейство шрифтов’: ‘медная пластина’, ‘размер шрифта’: ‘20px’}

app.layout = html.Div (дети = [

 html.Div(дети=[
    
    html.Div("Мои кнопки:"),
            
    html.Div(id="Buttons", children=[dbc.Button("Простая, простая кнопка", className='regular-button', style={'font-size':'20px'}),
        
                                     dbc.Button("Со стилем", className='стильная-кнопка', style=button_special_style,
                                                 #href="/button1_clicked"
                                               ),
                                                
                                     dbc.Button("Href удаление некоторого стиля", className='stylish-button', style=button_special_style,
                                                href="/button2_clicked"
                                               ),
                                     dbc.Button("Со стилем", className='стильная-кнопка', style=button_special_style,
                                                 #href="/button3_clicked"
                                               ),
                                     dbc.
 
 Button("Href удаление некоторого стиля", className='stylish-button', style=button_special_style,
                                                href="/button4_clicked"
                                               )
                                               ],
                                           
             стиль = {'отображение':'flex',
                    «верхнее поле»: «20 пикселей»,
                    «флекс»: «1 0 50 пикселей»}
            ),
    
],
         style={'border': '5px сплошной оранжевый',
                «высота»: «200 пикселей», «ширина»: «500 пикселей»,
                'отображение': 'flex', 'направление flex': 'столбец',
                'фон':'белый'}
        ),

])

, если имя == ‘ основной ’:
app.run_server(debug=True)

Гон_Ф

12 июня 2021 г. , 20:05 2

Есть ли у кого-нибудь идеи о том, как можно запретить href изменять любые атрибуты стиля dbc.Button ?

ЭннМариВ 3

Привет @Gon_F

Попробуйте включить таблицу стилей Bootstrap. Например:

 app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

Дополнительную информацию см. в разделе Quickstart — dbc docs

Gon_F 4

Привет, ЭннМари. Спасибо за предложение!

Сейчас я использую app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) , и я вижу, что он удаляет все причудливые стили CSS, которые раньше были у кнопок по умолчанию.

Теперь все кнопки выглядят точно так же, что очень хорошо, но теперь все они немного отличаются — знаете ли вы, есть ли простой способ повторно применить стиль по умолчанию, который каждый dbc.Button до применения к нему href ?

Снимок экрана 2021-06-13 в 7.31.22 PM1032×468 27 КБ

AnnMarieW 5

Привет @Gon_F. Похоже, он сохраняет CSS, который был определен в параметре стиля , который представляет собой размер шрифта и семейство шрифтов. Остальное - это форматирование Bootstrap, и вы можете изменить его, как описано здесь: Кнопка - dbc docs

Я не уверен, что вы определили в своем className='regular-button' и className='stylish-button' , но они не похожи на классы Bootstrap.

Гон_Ф 6

( className='regular-button' и className='stylish-button'

на самом деле не указывают ни на какой css, они просто настроены для облегчения понимания кода)

В этом случае , кажется, что нужно сделать, это повторно применить базовый стиль, который имеет dbc.Button , поскольку потенциально десятки небольших настроек стиля, вероятно, были потеряны после применения app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) , и я не знаю, как вернуть их все обратно.

Можно ли каким-либо образом извлечь стиль базового dbc.Button и вручную установить его в приложении Dash в виде style={} ?

ЭннМариВ

14 июня 2021 г., 00:24 7

Конечно, вы можете использовать инструменты разработчика браузера, чтобы проверить кнопку и увидеть CSS. Или вы можете посмотреть на саму таблицу стилей Bootstrap. https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css

Более того, вы можете выбрать другую тему со стилем, который вам нравится, тогда вам не придется возиться с пользовательским CSS — плюс это может помочь вам добиться согласованности дизайна в вашем приложении.

Вы можете найти другие темы здесь или получить краткий обзор тем в dash-bootstrap-components здесь: Theme explorer — dbc docs

Button — UIkit

Легко создавать красивые кнопки, которые бывают разных стили.

Чтобы применить этот компонент, добавьте .uk-button класс и модификатор, такой как .uk-button-default , на элемент или

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

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

Класс Описание
.uk-кнопка-по умолчанию Стиль кнопки по умолчанию.
.uk-кнопка-основной Указывает основное действие.
.uk-кнопка-вторичный Указывает на важное действие.
.uk-кнопка-опасность Указывает на опасное или негативное действие.
.uk-кнопка-текст Применяет типографский стиль.
.uk-кнопка-ссылка 		Применяет простой стиль ссылки.
 <кнопка>
  • Предварительный просмотр
  • Разметка
  •

Добавьте класс .uk-button-small или .uk-button-large к кнопке, чтобы сделать ее меньше или больше.

 <кнопка>
  • Предварительный просмотр
  • Разметка
  •

Добавьте класс . uk-width-1-1 из компонента Width, и кнопка займет всю ширину.

Пример

  • Предварительный просмотр
  • Разметка

Чтобы создать группу кнопок, добавьте .uk-button-group класса в элемент

вокруг кнопок. Вот и все! Дополнительная разметка не требуется.

 <дел>
    <кнопка>
    <кнопка>
    <кнопка>
  • Предварительный просмотр
  • Разметка
  •  <дел>
    <дел>