如何使Xpages中的部分看起来像这样

我很困惑。在公园里有一个不错的区域。看起来是这样的：

我创建了一个新的db，将主题设置为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>

说得好。看起来是这样的：

---

如果从文档中粘贴此代码，是否有效？如果确实如此，则需要将标准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-->

数据在这里。。。。
这里有更多的数据。。。。

注意，XPages扩展库中的“Widget容器”控件（xe:widgetContainer）大致相当于OneUI节控件。您可以在扩展库演示应用程序中看到：XPagesExt.nsf/OneUI_WidgetContainer.xsp 使用该控件而不是xp:section控件设计页面可能更合适

此外，在您链接到的OneUI 3文档中，在页面右侧，页面向下25%，有一个主题下拉列表，您可以在其中选择“默认”或“gen2”。 您要求的行为看起来像“gen2”行为（看起来像OneUI 2）， 而您的屏幕截图看起来更接近“默认”（OneUI 3）行为。

---

您可能需要研究如何启用gen2外观。

正如Maire所指出的，小部件容器控件使用以下代码实现您想要的功能：

<xe:widgetContainer id="widgetContainer1"
    titleBarText="Section Header" collapsible="true"
    style="width: 300px;">
    <xe:this.dropDownNodes>
        <xe:basicLeafNode label="test1"></xe:basicLeafNode>
        <xe:basicLeafNode label="test2"></xe:basicLeafNode>
        <xe:basicLeafNode label="test3"></xe:basicLeafNode>
    </xe:this.dropDownNodes>
    More data here...
</xe:widgetContainer>

这里有更多数据。。。

但正如她所指出的，您发布的外观是针对Gen2主题的，它没有在XPages中实现。所以你得到的是：

---

将代码粘贴到源代码中，然后查看页面时，它是什么样子的。因为我们在谈论前端，所以图片会有所帮助。