6.10.94-stable
In this page
  1. Supported types
  2. ValueProps

<gui-value />

Displays any value using @greycat/sdk’s utils.stringify() function.

This is essentially a way to have a one-liner string for any kind of value.

Supported types

Strings

const el = document.createElement('gui-value');
el.value = "Hello, GreyCat!";

Numbers

const el = document.createElement('gui-value');
el.value = 3.1415;

core::time

const el = document.createElement('gui-value');
el.value = core.time.fromDate(new Date());

core::duration

const el = document.createElement('gui-value');
el.value = core.duration.from_hours(42);

Date (JavaScript)

const el = document.createElement('gui-value');
el.value = new Date();

core::Tuple

const el = document.createElement('gui-value');
el.value = core.Tuple.create(42, 'Hello world');

core::node

const el = document.createElement('gui-value');
el.value = greycat.default.createNode(1234n);

core::geo

const el = document.createElement('gui-value');
el.value = core.geo.fromLatLng(49.596362199828306, 6.1284562944968695);

Array

const el = document.createElement('gui-value');
el.value = [42, 'Hello world'];

Object

const el = document.createElement('gui-value');
el.value = { greycat: 'is a graph database', year: 2024 };

ValueProps

export interface GuiValueProps {
  value: unknown;
  /** overrides the display with this `text` */
  text?: string;
  /** whether or not to display the value as a link */
  linkify: boolean | ((value: unknown) => boolean);
  /** best-effort to make it short */
  tiny: boolean;
  /** overrides references name */
  name: string | undefined;
  dateFmt: Intl.DateTimeFormat | undefined;
  numFmt: Intl.NumberFormat | undefined;
  /** @deprecated don't use this */
  raw: boolean;
  /** optional user-defined data */
  data?: unknown;
  /** callback used when `linkify` is `true` */
  onClick: ClickHandler<unknown>;
}