如何在Xpages中创建部分看起来像这样

Question

我很困惑.在oneUI 3文档页面中有一个很好的部分.它看起来像这样:

我创建一个新的数据库并将主题设置为3.0.2并输入下面的代码,它看起来不像我想要生成的.

如何使用OneUI文档重现我在那里看到的内容？

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:section id="section1" header="Header"
        headerStyle="lotusSectionHeader2">
    </xp:section>
</xp:view>

好点子.它看起来像这样:

Answer 1

如果您从文档中粘贴此代码，它会起作用吗？如果是这样，那么您需要将标准 html 元素移动到 xpage 元素。

    <!-- section is an HTML5 element. Use div if you are using HTML4. -->
<section class="lotusSection2">
<!-- header is an HTML5 element. Use div if you are using HTML4. -->
<header class="lotusSectionHeader"><div class="lotusInner"><a class="lotusArrow" role="button" aria-expanded="true" aria-controls="sectionBodyID" href="javascript:;" title="Collapse section"><img class="lotusTwistyOpen" src="../../css/images/blank.gif" alt="" aria-label="Collapse section" /><span class="lotusAltText">&#x25bc;</span></a><h2 class="lotusHeading"><a href="javascript:;">Section Header</a></h2><a class="lotusIcon lotusActionIcon" href="javascript:;" role="button" aria-haspopup="true" aria-owns="[menuID]"><img src="../../css/images/blank.gif" alt="" /><span class="lotusAltText">Actions</span></a></div></header>
<div id="sectionBodyID" class="lotusSectionBody">
<div class="lotusChunk">Data goes here....</div>
    <header class="lotusSubheader"><a class="lotusArrow" role="button" aria-expanded="true" aria-controls="subsectionID" href="javascript:;" title="Collapse section"><img class="lotusTwistyOpen" src="../../css/images/blank.gif" alt="" aria-label="Collapse section" /><span class="lotusAltText">&#x25bc;</span></a><h3 class="lotusHeading2"><a href="javascript:;">Subsection</a></h3></header>
    <div id="subsectionID" class="lotusSubsection">
More data goes here....
</div>
</div></section><!--end section-->