Class FlatCardStyle

A clean, modern card style with subtle borders and rounded corners.

Example

const style = new FlatCardStyle({
  borderRadius: 8,
  showShadow: true
});

const card = new CardPanel({
  style,
  title: { text: 'My Card' },
  body: { width: 300, height: 200 }
});

Hierarchy (View Summary)

BaseCardStyle
- FlatCardStyle

Index

Constructors

constructor

Methods

drawBackground drawDragStrip drawFooter drawTitleBar getBorderInsets getContentPadding getDragStripHeight getFooterHeight getTitleBarHeight

Constructors

constructor

new FlatCardStyle(config?: FlatCardStyleConfig): FlatCardStyle
Parameters
- config: FlatCardStyleConfig = {}
Returns FlatCardStyle
Overrides BaseCardStyle.constructor
- Defined in components/card-panel/flat-card-style.ts:62

Methods

drawBackground

drawBackground(
    graphics: Graphics,
    width: number,
    height: number,
    colors: CardThemeColors,
): void
Draw the card background (borders, shadows, main bg)
Parameters
- graphics: Graphics
  Graphics object to draw into
- width: number
  Total card width
- height: number
  Total card height
- colors: CardThemeColors
  Theme colors to use
Returns void
Overrides BaseCardStyle.drawBackground
- Defined in components/card-panel/flat-card-style.ts:77

drawDragStrip

drawDragStrip(
    graphics: Graphics,
    dims: CardSectionDimensions,
    colors: CardThemeColors,
): void
Draw the minimal drag strip (shown when draggable but no title)
Parameters
- graphics: Graphics
  Graphics object to draw into
- dims: CardSectionDimensions
  Position and dimensions for the drag strip
- colors: CardThemeColors
  Theme colors to use
Returns void
Overrides BaseCardStyle.drawDragStrip
- Defined in components/card-panel/flat-card-style.ts:150

drawFooter

drawFooter(
    graphics: Graphics,
    dims: CardSectionDimensions,
    colors: CardThemeColors,
): void
Draw the footer section
Parameters
- graphics: Graphics
  Graphics object to draw into
- dims: CardSectionDimensions
  Position and dimensions for the footer
- colors: CardThemeColors
  Theme colors to use
Returns void
Overrides BaseCardStyle.drawFooter
- Defined in components/card-panel/flat-card-style.ts:194

drawTitleBar

drawTitleBar(
    graphics: Graphics,
    dims: CardSectionDimensions,
    colors: CardThemeColors,
): void
Draw the title bar section
Parameters
- graphics: Graphics
  Graphics object to draw into
- dims: CardSectionDimensions
  Position and dimensions for the title bar
- colors: CardThemeColors
  Theme colors to use
Returns void
Overrides BaseCardStyle.drawTitleBar
- Defined in components/card-panel/flat-card-style.ts:114

getBorderInsets

getBorderInsets(): EdgeInsets
Get the border insets (how much space borders take from each side) Used to calculate content area positioning

Returns EdgeInsets
Overrides BaseCardStyle.getBorderInsets
- Defined in components/card-panel/flat-card-style.ts:243

getContentPadding

getContentPadding(): EdgeInsets
Get padding inside the content area

Returns EdgeInsets
Overrides BaseCardStyle.getContentPadding
- Defined in components/card-panel/flat-card-style.ts:248

getDragStripHeight

getDragStripHeight(): number
Get the height of the drag strip in pixels (shown when draggable but no title)

Returns number
Overrides BaseCardStyle.getDragStripHeight
- Defined in components/card-panel/flat-card-style.ts:235

getFooterHeight

getFooterHeight(): number
Get the default footer height in pixels

Returns number
Overrides BaseCardStyle.getFooterHeight
- Defined in components/card-panel/flat-card-style.ts:239

getTitleBarHeight

getTitleBarHeight(hasTitle: boolean): number
Get the height of the title bar in pixels
Parameters
- hasTitle: boolean
  Whether a title is set
Returns number
Overrides BaseCardStyle.getTitleBarHeight
- Defined in components/card-panel/flat-card-style.ts:231

Class FlatCardStyle

Example

Hierarchy (View Summary)

Index

Constructors

Methods

Constructors

constructor

Parameters

Returns FlatCardStyle

Methods

drawBackground

Parameters

Returns void

drawDragStrip

Parameters

Returns void

drawFooter

Parameters

Returns void

drawTitleBar

Parameters

Returns void

getBorderInsets

Returns EdgeInsets

getContentPadding

Returns EdgeInsets

getDragStripHeight

Returns number

getFooterHeight

Returns number

getTitleBarHeight

Parameters

Returns number

Settings

On This Page