Version: 2.4

Layout Widgets

Accordions `dtl-fluent-accordion`

The accordion is a UI component used to display and organize content in a collapsible manner, allowing users to expand or collapse sections of content as needed. It consists of multiple sections or panels, with a title for each section and its associated content displayed in the body of the panel. When a user clicks on the title of a panel, the content of that panel is expanded, upon clicking again, it is collapsed.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-accordion"
  },
  "items": [],
  "config": {
    "accordions": [
      {
        "header": "Accordion",
        "content": []
      }
    ]
  }
}

Inputs

Key for accordions remembering cache

Key: storedAccordionsActiveIndex

Name: Key for accordions remembering cache

Description: A unique identifier that the application uses to store and retrieve the cached accordion data.

Default: ""

Disable lazy loading

Key: disableLazy

Name: Disable lazy loading

Description: Disables lazy loading of accordion content. Content is rendered immediately instead of after accordion selection.

Default: false

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-accordion/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen disable lazy — gen-disable-lazy.json

Disable lazy loading: Disables lazy loading of accordion content. Content is rendered immediately instead of after accordion selection.

{
  "type": "object",
  "title": "Accordions — Disable lazy loading",
  "description": "Disable lazy loading: Disables lazy loading of accordion content. Content is rendered immediately instead of after accordion selection.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-accordion",
        "disableLazy": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen stored accordions active index — gen-stored-accordions-active-index.json

Key for accordions remembering cache: A unique identifier that the application uses to store and retrieve the cached accordion data.

{
  "type": "object",
  "title": "Accordions — Key for accordions remembering cache",
  "description": "Key for accordions remembering cache: A unique identifier that the application uses to store and retrieve the cached accordion data.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-accordion",
        "storedAccordionsActiveIndex": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Anchor `dtl-fluent-anchor`

The widget inserts an HTML <div> with a specified ID into the DOM and automatically scrolls to it when the page loads. This is useful for directing users to a specific section of a webpage upon loading.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-anchor"
  },
  "items": [],
  "config": {}
}

Inputs

Key: scrollId

Name: ID

Description: On an anchor with the selected ID, it will be automatically scrolled down in the form after it is opened, if the URL used to open the form contains this ID as a parameter.
Example: .../dashboard/9134d5eb-944c-4d09-ba62-b9be6458208e#SCROLL_TARGET_1

Default: ""

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-anchor/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen scroll id — gen-scroll-id.json

ID: On an anchor with the selected ID, it will be automatically scrolled down in the form after it is opened, if the URL used to open the form contains this ID as a parameter. Example: .../dashboard/9134d

{
  "type": "object",
  "title": "Anchor — ID",
  "description": "ID: On an anchor with the selected ID, it will be automatically scrolled down in the form after it is opened, if the URL used to open the form contains this ID as a parameter. Example: .../dashboard/9134d",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-anchor",
        "scrollId": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Back button `tsm-button-back`

The back button element is used for returning to the previous page upon clicking.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "tsm-button-back"
  }
}

Inputs

Label

Key: label

Name: Label

Default: ""

Router link within the application

Key: routerLink

Name: Router link within the application

Description: The router link where the user will be navigated to upon clicking the button. For example "/ordering/order-type". If you wish to only redirect the user to the previous page, leave this option empty.

Default: ""

Keyboard shortcut

Key: hotkey

Name: Keyboard shortcut

Description: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.

Default: null

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-button-back/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen hotkey — gen-hotkey.json

Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.

{
  "type": "object",
  "title": "Back button — Keyboard shortcut",
  "description": "Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "tsm-button-back",
        "hotkey": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen label — gen-label.json

Demonstrates widget.label = "top" on tsm-button-back.

{
  "type": "object",
  "title": "Back button — Label",
  "description": "Demonstrates widget.label = \"top\" on tsm-button-back.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "tsm-button-back",
        "label": "top"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen router link — gen-router-link.json

Router link within the application: The router link where the user will be navigated to upon clicking the button. For example "/ordering/order-type". If you wish to only redirect the user to the previous page, leave this option empty.

{
  "type": "object",
  "title": "Back button — Router link within the application",
  "description": "Router link within the application: The router link where the user will be navigated to upon clicking the button. For example \"/ordering/order-type\". If you wish to only redirect the user to the previous page, leave this option empty.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "tsm-button-back",
        "routerLink": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Button bar `dtl-fluent-bar`

The button bar component creates a section which you can open by clicking on it. Inside the section you can put additional content such as a Text item, Password field or a Checkbox. These items are only visible when the section is opened. You can add a custom text in the button bar label - for example "More", or "Click to view". There are other customizable options such as a tooltip or a CSS class.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-bar"
  },
  "items": []
}

Inputs

Disable lazy loading

Key: disableLazy

Name: Disable lazy loading

Description: Disables lazy loading of the bar content. The inner widgets and their forms are instantiated immediately and remain alive even when the bar is closed (validation keeps running).

Default: false

Icon

Key: icon

Name: Icon

Default: "pi pi-chevron-down"

Icon position

Key: iconPos

Name: Icon position

Default: "right"

Button Appearance

Key: buttonAppearance

Name: Button Appearance

Description: Appearance defines the type of graphical design of the button.

Default: "p-button"

Button Severity

Key: buttonSeverity

Name: Button Severity

Description: Severity defines the button's color design.

Default: "p-button-secondary"

Dismissable on outside click

Key: dismissable

Name: Dismissable on outside click

Description: When enabled, the panel closes when clicking outside of it.

Default: false

Close on content click

Key: closeOnContentClick

Name: Close on content click

Description: When enabled, the panel closes on any click inside its content, regardless of what was clicked.

Default: false

Button label

Key: label

Name: Button label

Default: "__expr:injectAndTranslateDefault(translationShared.shared.more)"

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-bar/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen button appearance — gen-button-appearance.json

Button Appearance: Appearance defines the type of graphical design of the button.

{
  "type": "object",
  "title": "Button bar — Button Appearance",
  "description": "Button Appearance: Appearance defines the type of graphical design of the button.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-bar",
        "buttonAppearance": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen button severity — gen-button-severity.json

Button Severity: Severity defines the button's color design.

{
  "type": "object",
  "title": "Button bar — Button Severity",
  "description": "Button Severity: Severity defines the button's color design.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-bar",
        "buttonSeverity": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen disable lazy — gen-disable-lazy.json

Disable lazy loading: Disables lazy loading of the bar content. The inner widgets and their forms are instantiated immediately and remain alive even when the bar is closed (validation keeps running).

{
  "type": "object",
  "title": "Button bar — Disable lazy loading",
  "description": "Disable lazy loading: Disables lazy loading of the bar content. The inner widgets and their forms are instantiated immediately and remain alive even when the bar is closed (validation keeps running).",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-bar",
        "disableLazy": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen dismissable — gen-dismissable.json

Dismissable on outside click: When enabled, the panel closes when clicking outside of it.

{
  "type": "object",
  "title": "Button bar — Dismissable on outside click",
  "description": "Dismissable on outside click: When enabled, the panel closes when clicking outside of it.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-bar",
        "dismissable": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen icon pos — gen-icon-pos.json

Demonstrates widget.iconPos = "p-icon-search" on dtl-fluent-bar.

{
  "type": "object",
  "title": "Button bar — Icon position",
  "description": "Demonstrates widget.iconPos = \"p-icon-search\" on dtl-fluent-bar.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-bar",
        "iconPos": "p-icon-search"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen icon — gen-icon.json

Demonstrates widget.icon = "p-icon-search" on dtl-fluent-bar.

{
  "type": "object",
  "title": "Button bar — Icon",
  "description": "Demonstrates widget.icon = \"p-icon-search\" on dtl-fluent-bar.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-bar",
        "icon": "p-icon-search"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Card `dtl-fluent-card`

The card component presents information in a compact, organized manner, and is commonly used to display information such as product detail or profiles.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-card"
  },
  "items": []
}

Inputs

Card Title

Key: header

Name: Card Title

Default: null

Card title URL link

Key: headerLink

Name: Card title URL link

Default: null

External link

Key: headerTarget

Name: External link

Description: Opens external link in a new tab

Default: false

Icon

Key: headerIconClass

Name: Icon

Default: null

Color highlight

Key: cardType

Name: Color highlight

Default: null

Color background highlight

Key: cardColor

Name: Color background highlight

Default: null

Remove card styling

Key: disableCard

Name: Remove card styling

Default: false

Control buttons

Key: buttonsOnHover

Name: Control buttons

Default: false

Enable action button

Key: activeButton

Name: Enable action button

Default: false

Disable maximize button

Key: disableMaximize

Name: Disable maximize button

Default: false

Disable minimize button

Key: disableMinimize

Name: Disable minimize button

Default: false

Minimized by default

Key: minimizedByDefault

Name: Minimized by default

Default: false

Fullscreen

Key: fullscreen

Name: Fullscreen

Default: false

Disable fullscreen close

Key: disableFullscreenClose

Name: Disable fullscreen close

Default: false

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-card/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen card color — gen-card-color.json

Demonstrates widget.cardColor = "exampleValue" on dtl-fluent-card.

{
  "type": "object",
  "title": "Card — Color background highlight",
  "description": "Demonstrates widget.cardColor = \"exampleValue\" on dtl-fluent-card.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-card",
        "cardColor": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen card type — gen-card-type.json

Demonstrates widget.cardType = "exampleValue" on dtl-fluent-card.

{
  "type": "object",
  "title": "Card — Color highlight",
  "description": "Demonstrates widget.cardType = \"exampleValue\" on dtl-fluent-card.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-card",
        "cardType": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen header icon class — gen-header-icon-class.json

Demonstrates widget.headerIconClass = "tsm-custom-class" on dtl-fluent-card.

{
  "type": "object",
  "title": "Card — Icon",
  "description": "Demonstrates widget.headerIconClass = \"tsm-custom-class\" on dtl-fluent-card.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-card",
        "headerIconClass": "tsm-custom-class"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen header link — gen-header-link.json

Demonstrates widget.headerLink = "exampleValue" on dtl-fluent-card.

{
  "type": "object",
  "title": "Card — Card title URL link",
  "description": "Demonstrates widget.headerLink = \"exampleValue\" on dtl-fluent-card.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-card",
        "headerLink": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen header target — gen-header-target.json

External link: Opens external link in a new tab

{
  "type": "object",
  "title": "Card — External link",
  "description": "External link: Opens external link in a new tab",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-card",
        "headerTarget": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen header — gen-header.json

Demonstrates widget.header = "exampleValue" on dtl-fluent-card.

{
  "type": "object",
  "title": "Card — Card Title",
  "description": "Demonstrates widget.header = \"exampleValue\" on dtl-fluent-card.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-card",
        "header": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Clone `dtl-fluent-clone`

The special component to allow duplication of a form section to a different place. Use "Clone key" attribute of an object to mark the object with custom key (for example "productDetail") and then use the key in this component configuration. This is intended to position parts of the form in different sections based on the form usage. Typically this is the case of Detail form within listings or on a seperate page.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-clone"
  },
  "items": []
}

Inputs

Clone key

Key: cloneKey

Name: Clone key

Description: The key for copying of content into the clone component

Default: ""

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-clone/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen clone key — gen-clone-key.json

Clone key: The key for copying of content into the clone component

{
  "type": "object",
  "title": "Clone — Clone key",
  "description": "Clone key: The key for copying of content into the clone component",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-clone",
        "cloneKey": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Content `dtl-fluent-content`

The content component is used to embed text created with the Editor component(see Editor description).

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-content"
  },
  "config": {
    "html": ""
  }
}

Inputs

Content

Key: html

Name: Content

Description: The content which will be displayed in the component. It is inputted using the editor.

Default: null

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-content/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen html — gen-html.json

Content: The content which will be displayed in the component. It is inputted using the editor.

{
  "type": "object",
  "title": "Content — Content",
  "description": "Content: The content which will be displayed in the component. It is inputted using the editor.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-content",
        "html": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Delimited inline `dtl-fluent-delimited`

The delimited inline layout renders child items next to each other and inserts a configurable separator only between adjacent non-empty values. It is useful for compact readonly combinations such as user / group pairs.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-delimited"
  },
  "config": {
    "delimiter": "/"
  },
  "items": []
}

Inputs

Delimiter

Key: delimiter

Name: Delimiter

Description: Separator rendered between inline items when both adjacent values are non-empty.

Default: "/"

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-delimited/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen delimiter — gen-delimiter.json

Delimiter: Separator rendered between inline items when both adjacent values are non-empty.

{
  "type": "object",
  "title": "Delimited inline — Delimiter",
  "description": "Delimiter: Separator rendered between inline items when both adjacent values are non-empty.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-delimited",
        "delimiter": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

External content `dtl-fluent-iframe`

External content(iframe) is to embed external content into the current page. This makes it possible to view content from another source without leaving the current page. For example, an iframe can be used to display a map or a video from another website. The content can be interacted with within the iframe just as if it was being viewed on its own page.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-iframe"
  },
  "items": []
}

Inputs

Title

Key: title

Name: Title

Default: ""

Source URL

Key: src

Name: Source URL

Default: ""

Hide title

Key: notitle

Name: Hide title

Default: false

Height (px)

Key: height

Name: Height (px)

Default: ""

Width (px)

Key: width

Name: Width (px)

Default: ""

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-iframe/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen height — gen-height.json

Demonstrates widget.height = "exampleValue" on dtl-fluent-iframe.

{
  "type": "object",
  "title": "External content — Height (px)",
  "description": "Demonstrates widget.height = \"exampleValue\" on dtl-fluent-iframe.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-iframe",
        "height": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen src — gen-src.json

Demonstrates widget.src = "exampleValue" on dtl-fluent-iframe.

{
  "type": "object",
  "title": "External content — Source URL",
  "description": "Demonstrates widget.src = \"exampleValue\" on dtl-fluent-iframe.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-iframe",
        "src": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen width — gen-width.json

Demonstrates widget.width = "exampleValue" on dtl-fluent-iframe.

{
  "type": "object",
  "title": "External content — Width (px)",
  "description": "Demonstrates widget.width = \"exampleValue\" on dtl-fluent-iframe.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-iframe",
        "width": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Fieldset `dtl-fluent-fieldset`

The fieldset component is used to group related form controls or content into a single visually identifiable unit. It can be used to provide context and improve the overall organization of a form.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "items": [],
  "widget": {
    "type": "dtl-fluent-fieldset"
  },
  "config": {}
}

Inputs

Legend (title)

Key: legend

Name: Legend (title)

Default: ""

Disable legend

Key: disableLegendForEmptyAndReadonly

Name: Disable legend

Description: Tick the checkbox if you wish to turn off the legend if readonly mode is enabled and the component does not contain any data.

Default: false

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-fieldset/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen disable legend for empty and readonly — gen-disable-legend-for-empty-and-readonly.json

Disable legend: Tick the checkbox if you wish to turn off the legend if readonly mode is enabled and the component does not contain any data.

{
  "type": "object",
  "title": "Fieldset — Disable legend",
  "description": "Disable legend: Tick the checkbox if you wish to turn off the legend if readonly mode is enabled and the component does not contain any data.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-fieldset",
        "disableLegendForEmptyAndReadonly": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen legend — gen-legend.json

Demonstrates widget.legend = "exampleValue" on dtl-fluent-fieldset.

{
  "type": "object",
  "title": "Fieldset — Legend (title)",
  "description": "Demonstrates widget.legend = \"exampleValue\" on dtl-fluent-fieldset.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-fieldset",
        "legend": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Html `dtl-fluent-html`

The Html component is used to embed plain html in a section which is then rendered.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-html"
  }
}

Inplace `dtl-fluent-inplace`

The form inplace component is a UI element that allows for in-place editing of data within a form. At first the data is in read-only mode intended for viewing, but edit mode can be entered by clicking on the edit icon. Afterwards changes can be made to the data and modifications saved or discarded by buttons.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-inplace"
  },
  "items": []
}

Inputs

Clone key

Key: cloneKey

Name: Clone key

Description: The key for copying of content into the clone component

Default: null

Disable autofocus

Key: disableAutofocus

Name: Disable autofocus

Description: Disable autofocus on the first input in the form

Default: false

Save on click outside

Key: saveOnClickOutside

Name: Save on click outside

Description: By default the form is reset, by enabling this the form is saved instead.

Default: false

Display field borders even in readonly mode

Key: alwaysShowBorders

Name: Display field borders even in readonly mode

Description: Displays field borders even in readonly mode. Fields will look editable but remain non-editable (readonly). This setting applies only in readonly mode; in edit mode, no changes are applied.

Default: false

Disable count is single child

Key: disableCountIsSingleChild

Name: Disable count is single child

Default: false

Script

Key: scriptCode

Name: Script

Default: ""

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-inplace/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen always show borders — gen-always-show-borders.json

Display field borders even in readonly mode: Displays field borders even in readonly mode. Fields will look editable but remain non-editable (readonly). This setting applies only in readonly mode; in edit mode, no changes are applied.

{
  "type": "object",
  "title": "Inplace — Display field borders even in readonly mode",
  "description": "Display field borders even in readonly mode: Displays field borders even in readonly mode. Fields will look editable but remain non-editable (readonly). This setting applies only in readonly mode; in edit mode, no changes are applied.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-inplace",
        "alwaysShowBorders": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen clone key — gen-clone-key.json

Clone key: The key for copying of content into the clone component

{
  "type": "object",
  "title": "Inplace — Clone key",
  "description": "Clone key: The key for copying of content into the clone component",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-inplace",
        "cloneKey": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen disable autofocus — gen-disable-autofocus.json

Disable autofocus: Disable autofocus on the first input in the form

{
  "type": "object",
  "title": "Inplace — Disable autofocus",
  "description": "Disable autofocus: Disable autofocus on the first input in the form",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-inplace",
        "disableAutofocus": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen disable count is single child — gen-disable-count-is-single-child.json

Demonstrates widget.disableCountIsSingleChild = true on dtl-fluent-inplace.

{
  "type": "object",
  "title": "Inplace — Disable count is single child",
  "description": "Demonstrates widget.disableCountIsSingleChild = true on dtl-fluent-inplace.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-inplace",
        "disableCountIsSingleChild": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen save on click outside — gen-save-on-click-outside.json

Save on click outside: By default the form is reset, by enabling this the form is saved instead.

{
  "type": "object",
  "title": "Inplace — Save on click outside",
  "description": "Save on click outside: By default the form is reset, by enabling this the form is saved instead.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-inplace",
        "saveOnClickOutside": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen script code — gen-script-code.json

Demonstrates widget.scriptCode = "exampleValue" on dtl-fluent-inplace.

{
  "type": "object",
  "title": "Inplace — Script",
  "description": "Demonstrates widget.scriptCode = \"exampleValue\" on dtl-fluent-inplace.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-inplace",
        "scriptCode": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Labeled row `dtl-fluent-labeled-row`

The labeled row layout renders a form-style row with its own label on the left and arbitrary child content on the right. It is intended for wrapping a single widget or a nested inline composition such as user / group values.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-labeled-row"
  },
  "items": []
}

Layout `dtl-fluent-columns`

The 12-column layout is a popular layout design pattern that is used to divide a user interface into 12 equal-width columns. The 12-column layout is a flexible design pattern that can be used to create a wide range of layouts, from simple one-column designs to more complex multi-column layouts. It provides a simple and effective way to divide a user interface into manageable sections, and helps to ensure that the layout is consistent and scalable across different screen sizes and devices. The number 12 is the most easily divisible among reasonably small numbers; it's possible to have 12, 6, 4, 3, 2 or 1 evenly spaced columns. This gives designers tremendous flexibility over a layout.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "items": [],
  "config": {
    "columns": [
      {
        "width": 6
      },
      {
        "width": 6
      }
    ]
  },
  "widget": {
    "type": "dtl-fluent-columns"
  }
}

Inputs

Enable sticky header

Key: enableStickyHeader

Name: Enable sticky header

Description: Used only for page forms. If enabled, the header will be sticky. It will be visible even when the user scrolls down the page.

Default: false

Border

Key: bordered

Name: Border

Description: Tick the checkbox if you wish the component wrapper to have a border.

Default: ""

Background

Key: colored

Name: Background

Description: Tick the checkbox if you wish the wrapper of the component to have a background color. Afterwards select the color

Default: ""

Page layout

Key: config.pageLayout

Name: Page layout

Description: A special layout option. Required if you use the layout as the main layout of the page.

Enable internal paddings

Key: config.innerPageLayout

Name: Enable internal paddings

Description: Enable internal paddings.

grid CSS class

Key: gridStyle

Name: grid CSS class

Default: ""

grid CSS class

Key: config.gridStyle

Name: grid CSS class

Description: The CSS class used to change or modification of the grid layout.

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-columns/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen bordered — gen-bordered.json

Border: Tick the checkbox if you wish the component wrapper to have a border.

{
  "type": "object",
  "title": "Layout — Border",
  "description": "Border: Tick the checkbox if you wish the component wrapper to have a border.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-columns",
        "bordered": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen colored — gen-colored.json

Background: Tick the checkbox if you wish the wrapper of the component to have a background color. Afterwards select the color

{
  "type": "object",
  "title": "Layout — Background",
  "description": "Background: Tick the checkbox if you wish the wrapper of the component to have a background color. Afterwards select the color",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-columns",
        "colored": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen enable sticky header — gen-enable-sticky-header.json

Enable sticky header: Used only for page forms. If enabled, the header will be sticky. It will be visible even when the user scrolls down the page.

{
  "type": "object",
  "title": "Layout — Enable sticky header",
  "description": "Enable sticky header: Used only for page forms. If enabled, the header will be sticky. It will be visible even when the user scrolls down the page.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-columns",
        "enableStickyHeader": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen grid style — gen-grid-style.json

Demonstrates widget.gridStyle = "exampleValue" on dtl-fluent-columns.

{
  "type": "object",
  "title": "Layout — grid CSS class",
  "description": "Demonstrates widget.gridStyle = \"exampleValue\" on dtl-fluent-columns.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-columns",
        "gridStyle": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Panel `dtl-fluent-panel`

The panel component is a container component that can be used to group and organize other components within a section that has it's own header. It can be manually or programatically collapsed and it's properties can be changed such as the header.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-panel"
  },
  "items": []
}

Inputs

Panel title

Key: title

Name: Panel title

Default: ""

Panel Implicit state

Key: collapsed

Name: Panel Implicit state

Default: false

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-panel/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen collapsed — gen-collapsed.json

Demonstrates widget.collapsed = true on dtl-fluent-panel.

{
  "type": "object",
  "title": "Panel — Panel Implicit state",
  "description": "Demonstrates widget.collapsed = true on dtl-fluent-panel.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-panel",
        "collapsed": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Section `dtl-fluent-section`

The section component is similiar to the panel component(see it's description) with the main difference that it does not have a header.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "items": [],
  "widget": {
    "type": "dtl-fluent-section"
  }
}

Inputs

Show bottom border of inputs

Key: inputBordersShowing

Name: Show bottom border of inputs

Description: Show bottom border of inputs even if form is in read-only state (only works for inputs with the title position set to "Top")

Default: false

Compact Mode

Key: compactMode

Name: Compact Mode

Description: Compact Mode

Default: false

Clone key

Key: cloneKey

Name: Clone key

Default: ""

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-section/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen clone key — gen-clone-key.json

Demonstrates widget.cloneKey = "exampleValue" on dtl-fluent-section.

{
  "type": "object",
  "title": "Section — Clone key",
  "description": "Demonstrates widget.cloneKey = \"exampleValue\" on dtl-fluent-section.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "section",
        "cloneKey": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen compact mode — gen-compact-mode.json

Compact Mode: Compact Mode

{
  "type": "object",
  "title": "Section — Compact Mode",
  "description": "Compact Mode: Compact Mode",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "section",
        "compactMode": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen input borders showing — gen-input-borders-showing.json

Show bottom border of inputs: Show bottom border of inputs even if form is in read-only state (only works for inputs with the title position set to "Top")

{
  "type": "object",
  "title": "Section — Show bottom border of inputs",
  "description": "Show bottom border of inputs: Show bottom border of inputs even if form is in read-only state (only works for inputs with the title position set to \"Top\")",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "section",
        "inputBordersShowing": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Splitter `dtl-fluent-panel-splitter`

The splitter element is used to visually separate and organize form fields into distinct sections or columns. It is represented by a horizontal or vertical line that can be resized by dragging its handle to adjust the amount of space allocated to each section. It is commonly used in forms with multiple columns or sections to provide users with a clear visual separation between different parts of the form, improving its readability and usability. It can also be customized with different styles and colors using CSS classes to match the overall design of the form.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-panel-splitter"
  },
  "items": [],
  "config": {
    "first": [],
    "second": []
  }
}

Inputs

Layout

Key: layout

Name: Layout

Description: The direction of the layout. Can either be horizontal or vertical.

Default: "horizontal"

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-panel-splitter/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen layout — gen-layout.json

Layout: The direction of the layout. Can either be horizontal or vertical.

{
  "type": "object",
  "title": "Splitter — Layout",
  "description": "Layout: The direction of the layout. Can either be horizontal or vertical.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-panel-splitter",
        "layout": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

SVG `dtl-fluent-svg`

A SVG component is used for displaying scalable vector graphics. It allows for the creation of vector-based graphics that can be scaled up or down without losing quality or clarity. The SVG component is particularly useful for creating interactive and dynamic visualizations, such as charts and graphs, which can be customized and animated based on user interaction or data changes.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-svg"
  },
  "items": []
}

Tabs `dtl-fluent-tab`

The tabs component allows for organizing content into separate tabs or pages. Each tab typically has a label or title, and when a user clicks on a tab, the content associated with that tab is displayed. The tab component is useful for breaking up large amounts of content into smaller, more manageable chunks, and it provides a way for users to easily navigate between different sections of the content.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-tab"
  },
  "items": [],
  "config": {
    "tabs": [
      {
        "header": "Tab 1",
        "content": []
      },
      {
        "header": "Tab 2",
        "content": []
      }
    ]
  }
}

Inputs

Disable lazy loading

Key: disableLazy

Name: Disable lazy loading

Description: Disables lazy loading of tab content. Content is rendered immediately instead of after tab selection.

Default: false

Enable scrollable tabs

Key: scrollable

Name: Enable scrollable tabs

Description: Allows tab headers to scroll when they overflow the available width.

Default: true

Key for tabs remembering cache

Key: storedTabsActiveIndex

Name: Key for tabs remembering cache

Description: A unique identifier that the application uses to store and retrieve the cached tab data.

Default: null

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-tab/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen disable lazy — gen-disable-lazy.json

Disable lazy loading: Disables lazy loading of tab content. Content is rendered immediately instead of after tab selection.

{
  "type": "object",
  "title": "Tabs — Disable lazy loading",
  "description": "Disable lazy loading: Disables lazy loading of tab content. Content is rendered immediately instead of after tab selection.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-tab",
        "disableLazy": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen scrollable — gen-scrollable.json

Enable scrollable tabs: Allows tab headers to scroll when they overflow the available width.

{
  "type": "object",
  "title": "Tabs — Enable scrollable tabs",
  "description": "Enable scrollable tabs: Allows tab headers to scroll when they overflow the available width.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-tab",
        "scrollable": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen stored tabs active index — gen-stored-tabs-active-index.json

Key for tabs remembering cache: A unique identifier that the application uses to store and retrieve the cached tab data.

{
  "type": "object",
  "title": "Tabs — Key for tabs remembering cache",
  "description": "Key for tabs remembering cache: A unique identifier that the application uses to store and retrieve the cached tab data.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-tab",
        "storedTabsActiveIndex": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Text hint `tsm-text-hint`

The Text hint component is used to embed text inside a form using an Rich text editor serving as a hint or documentation to the user. An icon can be placed infront of the text symbolizing the type of the hint - ex. informational or warning.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "tsm-text-hint"
  },
  "items": []
}

Inputs

Content

Key: content

Name: Content

Description: The content which will be displayed in the component. It is inputted using the editor.

Default: null

Severity

Key: severity

Name: Severity

Description: Severity defines the color of the text and places the corresponding icon infront of the text unless an Optional icon in specified, in which case that one is used

Default: null

Optional icon

Key: customIconCssClass

Name: Optional icon

Description: This is the full icon class string to show the icon. Example: p-icon-check

Default: ""

Additional CSS class

Key: customTextCssClass

Name: Additional CSS class

Description: You can use an additional CSS class to customize the appearance of the component. Examples: text-2xl bg-red-500 flex w-full gap-2 flex-col p-4

Default: ""

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-text-hint/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen content — gen-content.json

Content: The content which will be displayed in the component. It is inputted using the editor.

{
  "type": "object",
  "title": "Text hint — Content",
  "description": "Content: The content which will be displayed in the component. It is inputted using the editor.",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "tsm-text-hint",
        "content": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen custom icon css class — gen-custom-icon-css-class.json

Optional icon: This is the full icon class string to show the icon. Example: p-icon-check

{
  "type": "object",
  "title": "Text hint — Optional icon",
  "description": "Optional icon: This is the full icon class string to show the icon. Example: p-icon-check",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "tsm-text-hint",
        "customIconCssClass": "tsm-custom-class"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen custom text css class — gen-custom-text-css-class.json

Additional CSS class: You can use an additional CSS class to customize the appearance of the component. Examples: text-2xl bg-red-500 flex w-full gap-2 flex-col p-4

{
  "type": "object",
  "title": "Text hint — Additional CSS class",
  "description": "Additional CSS class: You can use an additional CSS class to customize the appearance of the component. Examples: text-2xl bg-red-500 flex w-full gap-2 flex-col p-4",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "tsm-text-hint",
        "customTextCssClass": "tsm-custom-class"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen severity — gen-severity.json

Severity: Severity defines the color of the text and places the corresponding icon infront of the text unless an Optional icon in specified, in which case that one is used

{
  "type": "object",
  "title": "Text hint — Severity",
  "description": "Severity: Severity defines the color of the text and places the corresponding icon infront of the text unless an Optional icon in specified, in which case that one is used",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "tsm-text-hint",
        "severity": "exampleValue"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Toolbar `dtl-fluent-toolbar`

Toolbar

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-toolbar"
  },
  "items": []
}

tSM Control `tsm-control`

tSM Control - used for positioning static form-field components.

Widget Or Layout: unknown

Value:

{
  "type": "tsm-control",
  "id": "",
  "widget": {
    "type": "tsm-control"
  }
}

Wizard `dtl-fluent-steps`

The steps component functions as a versatile wizard that guides users through a multi-step process. It organizes the steps with clear labels, allowing users to easily navigate through the process. With its intuitive interface, users can track their progress, move forward or backward, and complete complex tasks in a manageable manner. The component adjusts dynamically to accommodate varying numbers of steps, ensuring a seamless user experience.

Widget Or Layout: unknown

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-steps"
  },
  "items": [],
  "config": {
    "steps": [
      {
        "header": "Step 1",
        "content": []
      },
      {
        "header": "Step 2",
        "content": []
      }
    ]
  }
}

Inputs

Button "Back"

Key: backButton

Name: Button "Back"

Description: Button "Back"

Default: false

Button "Next"

Key: nextButton

Name: Button "Next"

Description: Button "Next"

Default: false

Hide wizard step numbers

Key: stepsNumberHidden

Name: Hide wizard step numbers

Description: Hide wizard step numbers

Default: false

Disable step validations

Key: disableStepValidations

Name: Disable step validations

Description: Disable step validations

Default: false

Next steps disabled (all steps after the next one are not accessible)

Key: disableNextSteps

Name: Next steps disabled (all steps after the next one are not accessible)

Description: Next steps disabled (all steps after the next one are not accessible)

Default: false

Default step

Key: activeIndex

Name: Default step

Description: Default step

Default: 0

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-steps/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen active index — gen-active-index.json

Default step: Default step

{
  "type": "object",
  "title": "Wizard — Default step",
  "description": "Default step: Default step",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-steps",
        "activeIndex": 1
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen back button — gen-back-button.json

Button "Back": Button "Back"

{
  "type": "object",
  "title": "Wizard — Button \"Back\"",
  "description": "Button \"Back\": Button \"Back\"",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-steps",
        "backButton": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen disable next steps — gen-disable-next-steps.json

Next steps disabled (all steps after the next one are not accessible): Next steps disabled (all steps after the next one are not accessible)

{
  "type": "object",
  "title": "Wizard — Next steps disabled (all steps after the next one are not accessible)",
  "description": "Next steps disabled (all steps after the next one are not accessible): Next steps disabled (all steps after the next one are not accessible)",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-steps",
        "disableNextSteps": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen disable step validations — gen-disable-step-validations.json

Disable step validations: Disable step validations

{
  "type": "object",
  "title": "Wizard — Disable step validations",
  "description": "Disable step validations: Disable step validations",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-steps",
        "disableStepValidations": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen next button — gen-next-button.json

Button "Next": Button "Next"

{
  "type": "object",
  "title": "Wizard — Button \"Next\"",
  "description": "Button \"Next\": Button \"Next\"",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-steps",
        "nextButton": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen steps number hidden — gen-steps-number-hidden.json

Hide wizard step numbers: Hide wizard step numbers

{
  "type": "object",
  "title": "Wizard — Hide wizard step numbers",
  "description": "Hide wizard step numbers: Hide wizard step numbers",
  "properties": {
    "field": {
      "type": "layout",
      "title": "Field",
      "widget": {
        "type": "dtl-fluent-steps",
        "stepsNumberHidden": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Accordions dtl-fluent-accordion​

Inputs​

Examples​

Anchor dtl-fluent-anchor​

Inputs​

Examples​

Back button tsm-button-back​

Inputs​

Examples​

Button bar dtl-fluent-bar​

Inputs​

Examples​

Card dtl-fluent-card​

Inputs​

Examples​

Clone dtl-fluent-clone​

Inputs​

Examples​

Content dtl-fluent-content​

Inputs​

Examples​

Delimited inline dtl-fluent-delimited​

Inputs​

Examples​

External content dtl-fluent-iframe​

Inputs​

Examples​

Fieldset dtl-fluent-fieldset​

Inputs​

Examples​

Html dtl-fluent-html​

Inplace dtl-fluent-inplace​

Inputs​

Examples​

Labeled row dtl-fluent-labeled-row​

Layout dtl-fluent-columns​

Inputs​

Examples​

Panel dtl-fluent-panel​

Inputs​

Examples​

Section dtl-fluent-section​

Inputs​

Examples​

Splitter dtl-fluent-panel-splitter​

Inputs​

Examples​

SVG dtl-fluent-svg​

Tabs dtl-fluent-tab​

Inputs​

Examples​

Text hint tsm-text-hint​

Inputs​

Examples​

Toolbar dtl-fluent-toolbar​

tSM Control tsm-control​

Wizard dtl-fluent-steps​

Inputs​

Examples​

Accordions `dtl-fluent-accordion`

Inputs

Examples

Anchor `dtl-fluent-anchor`

Inputs

Examples

Back button `tsm-button-back`

Inputs

Examples

Button bar `dtl-fluent-bar`

Inputs

Examples

Card `dtl-fluent-card`

Inputs

Examples

Clone `dtl-fluent-clone`

Inputs

Examples

Content `dtl-fluent-content`

Inputs

Examples

Delimited inline `dtl-fluent-delimited`

Inputs

Examples

External content `dtl-fluent-iframe`

Inputs

Examples

Fieldset `dtl-fluent-fieldset`

Inputs

Examples

Html `dtl-fluent-html`

Inplace `dtl-fluent-inplace`

Inputs

Examples

Labeled row `dtl-fluent-labeled-row`

Layout `dtl-fluent-columns`

Inputs

Examples

Panel `dtl-fluent-panel`

Inputs

Examples

Section `dtl-fluent-section`

Inputs

Examples

Splitter `dtl-fluent-panel-splitter`

Inputs

Examples

SVG `dtl-fluent-svg`

Tabs `dtl-fluent-tab`

Inputs

Examples

Text hint `tsm-text-hint`

Inputs

Examples

Toolbar `dtl-fluent-toolbar`

tSM Control `tsm-control`

Wizard `dtl-fluent-steps`

Inputs

Examples