Bootsfaces - Accordion: измените стрелки на глифы и добавьте субтитры - PullRequest
Новая
       67

Bootsfaces - Accordion: измените стрелки на глифы и добавьте субтитры

1 голос
/ 11 октября 2019

Обычный Аккордеон Bootstrap будет выглядеть так:

Код: 

<b:accordion>
  <b:panel id="panel1" title="Item 1">Content 1</b:panel>
  <b:panel id="panel2" title="Item 2">Content 2</b:panel>
  <b:panel id="panel3" title="Item 3">Content 3</b:panel>
</b:accordion>

Изображение

Accordion

Как я могу изменить стрелки здесь на глификоны?

Кроме того, я пытаюсь изменить, добавить к названию субтитры следующим образом: Title with subtitle in accordion

Какиеотлично работает в html, так как я могу просто добавить его в <div class="panel-heading">, но я понятия не имею, как мне это сделать с помощью bootsfaces ...

1 Ответ

3 голосов
/ 15 октября 2019

Значок

См. Мой комментарий к первой части вашего вопроса. Значок уже является символом Glyph: 

.panel-heading a.panel-title-link:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
}

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

body .panel-heading a.panel-title-link:after {
    content: "\e114"; // Change the icon here
}

Добавление префикса к правилу body сделает его более конкретным.

См. Также:

Заголовок

Заголовок демонстрируется в витрине: https://showcase.bootsfaces.net/layout/Accordion.jsf

Однако разметка JSF, которую они показывают, является неверной . Это на самом деле: 

<b:panel id="panel3">Content 3
  <f:facet name="heading">
    <h:outputText value="Panel heading with a facet in place of a title " />
    <b:badge style="margin-left:10px" value="since version 0.4" />
  </f:facet>
  <f:facet name="footer">
    Footer of panel 3
  </f:facet>
<b:panel>

См .: https://github.com/TheCoder4eu/BootsFacesWeb/blob/master/src/main/webapp/layout/Accordion.xhtml

Вы можете использовать заголовки там, но вы столкнетесь с проблемой, она будет заключена в атрибут якоря, что приведет к недопустимымHTML. Также положение иконки будет неправильным. Если вы хотите найти правильное решение, попробуйте , отправив запрос функции , или, если можете, создайте его и отправьте запрос на извлечение.

...