cxjs - CX JS - 将 html 插入窗口的标题属性

Question

是否可以在 CX 中将 html 内容插入到窗口组件的标题而不是字符串？我需要自定义窗口标题的内容。

Answer 1

这是。以下是有关如何在标题中放置其他按钮的示例：

import { Button, FlexRow, Heading, HtmlElement, Window } from "cx/widgets";

export const App = (
  <cx>
    <div>
      <Window bodyStyle="padding: 1rem">
        <FlexRow putInto="header" spacing align="center">
          <Heading level={4}>My Title</Heading>
          <div style="flex: 1" />
          <Button mod="hollow" icon="search" />
        </FlexRow>
        Window Contents
      </Window>
    </div>
  </cx>
);

https://fiddle.cxjs.io/?f=oydjHF84

Answer 2

另一种选择是使用该header属性。这样，您还可以在标题中创建自定义内容占位符：

    <Window
        header={(
            <cx>
                <FlexRow align="center" style="width: 100%;">
                    <span>Title</span>
                    <div style="flex: 1 1 0%" />
                    <ContentPlaceholder name="header-tools" />
                </FlexRow>
            </cx>
        )}
    >
        <LookupField 
            putInto="header-tools"
            style="width: 220px;"   
            mod="header-tool"             
            value-bind="classificationId" 
            options-bind="classifications"
        />
        Window content
    </Window>