Panel.Heading изменение цвета - PullRequest
Новая
       8

Panel.Heading изменение цвета

0 голосов
/ 20 февраля 2019

У меня есть эта часть кода: 

<Panel>
  <Panel.Heading>
    <Panel.Title toggle>
      Hello
    </Panel.Title>
  </Panel.Heading>
  <Panel.Collapse>
    <Panel.Body>
      Really wide body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </Panel.Body>
  </Panel.Collapse>
</Panel>

Я хочу изменить цвет Panel.Heading, но нет документов по этому элементу.Кто-нибудь знает, как это сделать?Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Чтобы изменить цвет заголовка для панели, вы можете установить bsStyle реквизит Panel, например, следующим образом: 

<Panel bsStyle="primary">
  <Panel.heading>
  ...

Это установит цвет верхней частипанель, основанная на цветовых стилях Bootstrap.

Значения, которые можно использовать для bsStyle:

  • default
  • primary
  • success
  • info
  • warning
  • danger

Вот песочница с кодом это демонстрирует это.

Трудно найти документацию для этого, потому что react-bootstrap (и reactstrap) теперь используют Bootstrap v4.Panel был частью Bootstrap v3, но теперь заменен на Card.Копаясь в некоторых старых версиях react-bootstrap (в частности, в их bs3-dev ответвлении ), вы можете посмотреть на , как они тогда использовали Panel.

Вы заметите, что в изолированную программную среду кода нам нужно добавить некоторые старые версии зависимостей (bootstrap в 3.4.1 и react-bootstrap в 0.32.1).

Надеюсь, это поможет!

0 голосов
/ 20 февраля 2019

Не знакомы с реакции-начальной загрузкой, но просто стиль с CSS?or style = {{backgroundColor: "anyColor"}}

...