menu
0.11.5
Render Element
Element that defers content rendering to a provided function / promise.
Module
import '@capitec/omni-components/render-element';
content_copy
import { OmniRenderElement } from "@capitec/omni-components-react/render-element";
content_copy
Lit Template
HTML Element Instance
HTML String

Properties

Name Attribute Type Description
renderer  
RenderFunction | undefined
Renderer function
data data 
object | Promise<object> | undefined
Data associated with the component.
dir dir 
string
Used to set the base direction of text for display
lang lang 
string
Used to identify the language of text content on the web

Types

Name Type
RenderResult
TemplateResult | typeof nothing | HTMLElement | string
RenderFunction
(...data: unknown[]) => RenderResult | Promise<RenderResult>

Slots

Name Description
loading_indicator
Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called

Theme Variables

Name Description
--omni-theme-primary-color
Theme primary color.
--omni-theme-primary-hover-color
Theme primary hover color.
--omni-theme-primary-active-color
Theme primary active color.
--omni-theme-accent-color
Theme accent color.
--omni-theme-accent-hover-color
Theme accent hover color.
--omni-theme-accent-active-color
Theme accent active color.
--omni-theme-background-color
Theme background color.
--omni-theme-background-hover-color
Theme background hover color.
--omni-theme-background-active-color
Theme background active color.
--omni-theme-font-color
Theme font color.
--omni-theme-disabled-border-color
Theme disabled border color.
--omni-theme-disabled-background-color
Theme disabled background color.
--omni-theme-error-font-color
Theme disabled background color.
--omni-theme-error-border-color
Theme error border color.
--omni-theme-hint-font-color
Theme hint font color.
--omni-theme-inactive-color
Theme inactive color.
--omni-theme-box-shadow-color
Theme inactive color.
--omni-theme-font-family
Theme font family.
--omni-theme-font-size
Theme font size.
--omni-theme-font-weight
Theme font weight.
--omni-theme-border-radius
Theme border radius.
--omni-theme-border-width
Theme border width.
--omni-theme-box-shadow
Theme box shadow.

Component Variables

Name Description
--omni-render-element-loading-indicator-width
Loading Indicator width