Как сделать скин-бар заголовка в PrimeFaces

Question

На странице демонстрации PrimeFaces есть простая строка заголовка, которая вписывается в актуальную тему. Я имею в виду текст «Добро пожаловать в PrimeFaces» на этой странице: http://www.primefaces.org/showcase/ui/home.jsf

Это не кнопка и не какой-либо адаптивный элемент управления, это тематическое текстовое поле или строка заголовка.

Я много искал, но мне не удалось найти простой компонент

, который мог бы генерировать такой результат.

Кто-нибудь может мне помочь, как сделать такой элемент в PrimeFaces?

Answer 1

Здесь вы можете найти код xhtml для страницы приветствия - home.xhtml(home.jsf): http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/ui/home.xhtml?r=5567

Как вы можете видеть, строка заголовка представляет собой простой тег <h1> с некоторыми css:

<h1 class="title ui-widget-header ui-corner-all">Welcome to PrimeFaces ShowCase</h1>

Там вы можете найти весь сайт / проект Primefaces, а также файлы CSS, но лучше реализовать ваш CSS ...

Answer 2

Вы можете использовать для этого тег <p:toolbar>. Хотя его основное использование заключается в группировании нескольких материалов, но оно дает эффект искомой строки заголовка.

<p:toolbar>
   <p:toolbarGroup align="left">
       <p:outputLabel value="Welcome!!" />
   </p:toolbarGroup>
</p:toolbar>

Вы можете окружить тег <p:outputLabel> другими тегами, такими как <h1>, <p> с помощью CSS, чтобы придать больший эффект.