CX JS - 将 html 插入 window 的标题属性

Question

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

Answer 1

是的。这是一个关于如何在 header:

中放置额外按钮的示例

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 属性。这样您还可以在 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>

CX JS - 将 html 插入 window 的标题 属性

CX JS - Inserting html to title property of window

cxjs

CX JS - 将 html 插入 window 的标题属性