CODEWITHSUNDEEP
cxjs
Arun Nair
Arun Nair

Reputation: 33

CX JS - Inserting html to title property of window

Is it possible to insert html content to the title of a window component in CX instead of a string? I need to customise the contents of my window title.

Upvotes: 3

Views: 90

Answers (2)

Sasha
Sasha

Reputation: 97

Another option is to use the header property. This way you can also create custom content placeholders within the 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>

Upvotes: 1

Marko
Marko

Reputation: 5454

It is. Here is an example on how to put additional buttons in the 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

Upvotes: 3

Related Questions