Skip to main content

Develop with FastTrack

WindowCard

 

The WindowCard widget displays content inside a popover window. The window can be moved, resized, or closed. The widget can enclose the EntityRecord widget to display formatted data from a document.

WindowCard example rendering

This example shows the WindowCard widget displaying content from a form.

The WindowCard widget displays a form.

WindowCard Example Configuration

In this example, the WindowCard widget displays information in a popover container. The string value in the title prop is the title displayed in the header of the modal. The visible prop accepts a boolean value that determines when the WindowCard is rendered on the page. Additional props can control the WindowCard's sizing and open/minimize/close behavior. See WindowCard API.

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, WindowCard } from "ml-fasttrack";
  
function App() {
 
  return (
    <div className="App">
      <div ref={myRef}>
        <WindowCard                 
            title={"Status"}
            draggable={false}
            appendTo={myRef.current}
            visible={true}
            initialLeft={dimensions.width - 465}
        >
        {"User Details"}
        </WindowCard>
    </div>
  );
}
  
export default App;

WindowCard API

Prop 

Type 

Description 

title

ReactNode

Title of the window.

appendTo

null | HTMLElement

Defines the container to which the WindowCard will be appended. Defaults to the parent element. See the KendoReact WindowProps.

toggleDialog

function

Callback that fires when the close button in the title is clicked or the ESC key is pressed.

visible

boolean

Visibility of the window.

draggable

boolean

Specifies if the window will be draggable. See the KendoReact WindowProps.

resizable

boolean

Specifies if the window will be resizable. See the KendoReact WindowProps.

initialWidth

number

Specifies the initial width of the window. See the KendoReact WindowProps.

initialHeight

number

Specifies the initial height of the window. See the KendoReact WindowProps.

initialTop

number 

Specifies the initial top value of the window. See the KendoReact WindowProps.

initialLeft

number

Specifies the initial left value of the window. See the KendoReact WindowProps.

width

number

Specifies the width of the window. See the KendoReact WindowProps.

height

number

Specifies the height of the window. See the KendoReact WindowProps.

children

ReactNode

Content wrapped by the WindowCard widget displayed in the window.

stage

"DEFAULT" | "FULLSCREEN" | "MINIMIZED"

Controls the state of the window. See the KendoReact WindowProps.

maximizeButton

React.ComponentType<any>

Specifies if the window will render the maximize button. See the KendoReact WindowProps.

minimizeButton

React.ComponentType<any>

Specifies if the window will render the minimize button. See the KendoReact WindowProps.

restoreButton

React.ComponentType<any>

Specifies if the window will render the restore button. See the KendoReact WindowProps.

closeButton

React.ComponentType<any>

Specifies if the window will render the close button. See the KendoReact WindowProps.

onStageChange

(() => void)

Callback function triggered when the state of the window changes. See the KendoReact WindowProps.
In this section: