CoreElements (Sutil)

CoreElements Module

Namespace: Sutil
Assembly: Sutil.dll

The core SutilElements required for building DOM, setting attributes, parsing HTML, managing resources etc.

Types

Type	Description
EventModifier
InputEvent

Functions and values

Function or value	Description
`addClass name` Full Usage: `addClass name` Parameters: name : `string` Returns: `SutilElement`	name : `string` Returns: `SutilElement`
`attr (name, value)` Full Usage: `attr (name, value)` Parameters: name : `string` value : `obj` Returns: `SutilElement`	name : `string` value : `obj` Returns: `SutilElement`
`autofocus` Full Usage: `autofocus` Returns: `SutilElement`	Returns: `SutilElement`
`class' n` Full Usage: `class' n` Parameters: n : `'a` Returns: `SutilElement`	n : `'a` Returns: `SutilElement`
`disposeOnUnmount ds` Full Usage: `disposeOnUnmount ds` Parameters: ds : `IDisposable list` Returns: `SutilElement`	Dispose all given items when the parent `SutilElement` is unmounted. Each item should implement `System.IDisposable`. See also: Core.unsubscribeOnUnmount ds : `IDisposable list` Returns: `SutilElement`
`el tag xs` Full Usage: `el tag xs` Parameters: tag : `string` xs : `SutilElement seq` Returns: `SutilElement`	tag : `string` xs : `SutilElement seq` Returns: `SutilElement`
`elns ns tag xs` Full Usage: `elns ns tag xs` Parameters: ns : `string` tag : `string` xs : `SutilElement seq` Returns: `SutilElement`	ns : `string` tag : `string` xs : `SutilElement seq` Returns: `SutilElement`
`exclusive f` Full Usage: `exclusive f` Parameters: f : `SutilElement` Returns: `SutilElement`	Remove all existing DOM children before constructing the given `SutilElement` f : `SutilElement` Returns: `SutilElement`
`for' n` Full Usage: `for' n` Parameters: n : `'a` Returns: `SutilElement`	n : `'a` Returns: `SutilElement`
`fragment elements` Full Usage: `fragment elements` Parameters: elements : `SutilElement seq` Returns: `SutilElement`	A collection of `SutilElement`s as a single `SutilElement`. This is useful when we have a collection of `SutilElements` that we don't want to wrap in their own containing DOM element. Compare with Core.nothing. elements : `SutilElement seq` Returns: `SutilElement` Example https://sutil.dev/#documentation-html
`headEmbedScript source` Full Usage: `headEmbedScript source` Parameters: source : `string` Returns: `SutilElement`	source : `string` Returns: `SutilElement`
`headScript url` Full Usage: `headScript url` Parameters: url : `string` Returns: `SutilElement`	url : `string` Returns: `SutilElement`
`headStylesheet url` Full Usage: `headStylesheet url` Parameters: url : `string` Returns: `SutilElement`	url : `string` Returns: `SutilElement`
`headTitle title` Full Usage: `headTitle title` Parameters: title : `string` Returns: `SutilElement`	title : `string` Returns: `SutilElement`
`hookContext hook` Full Usage: `hookContext hook` Parameters: hook : `BuildContext -> unit` Returns: `SutilElement`	Provides a hook for the build context. If you need to use this, please log an issue in the github repo for Sutil :-) hook : `BuildContext -> unit` Returns: `SutilElement`
`hookElement hook` Full Usage: `hookElement hook` Parameters: hook : `HTMLElement -> unit` Returns: `SutilElement`	Provides a hook for the parent `HTMLElement`. This can be used, for example, to mount a React component. See https://sutil.dev/#documentation-hosting-react This will throw an `InvalidCastException` if the parent node is not an `HTMLElement` hook : `HTMLElement -> unit` Returns: `SutilElement`
`hookParent hook` Full Usage: `hookParent hook` Parameters: hook : `Node -> unit` Returns: `SutilElement`	Provides a hook for the parent DOM Node hook : `Node -> unit` Returns: `SutilElement`
`host` Full Usage: `host` Returns: `(HTMLElement -> unit) -> SutilElement`	Backwards compatibility. Obsolete Returns: `(HTMLElement -> unit) -> SutilElement`
`html text` Full Usage: `html text` Parameters: text : `string` Returns: `SutilElement`	Raw html that will be parsed and added as a child of the parent element text : `string` Returns: `SutilElement`
`id' n` Full Usage: `id' n` Parameters: n : `'a` Returns: `SutilElement`	n : `'a` Returns: `SutilElement`
`inject elements element` Full Usage: `inject elements element` Parameters: elements : `SutilElement seq` element : `SutilElement` Returns: `SutilElement`	Merge these `SutilElement`s with another `SutilElement`. elements : `SutilElement seq` element : `SutilElement` Returns: `SutilElement`
`keyedEl tag key init update` Full Usage: `keyedEl tag key init update` Parameters: tag : `string` key : `string` init : `SutilElement seq` update : `SutilElement seq` Returns: `SutilElement`	tag : `string` key : `string` init : `SutilElement seq` update : `SutilElement seq` Returns: `SutilElement`
`listenToResize dispatch` Full Usage: `listenToResize dispatch` Parameters: dispatch : `HTMLElement -> unit` Returns: `SutilElement`	dispatch : `HTMLElement -> unit` Returns: `SutilElement`
`nothing` Full Usage: `nothing` Returns: `SutilElement`	An empty element. This could be considered the `unit` value for a `SutilElement`. It is very similar in effect `fragment []`, since neither will add any HTMLElements. The main difference is that `nothing` will make no changes at all to the DOM, while `fragment` will create an internal `SutilGroup` that is registered on the parent element as a property. Returns: `SutilElement`
`on event fn options` Full Usage: `on event fn options` Parameters: event : `string` fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`	event : `string` fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`
`onClick fn options` Full Usage: `onClick fn options` Parameters: fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`	fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`
`onCustomEvent event fn options` Full Usage: `onCustomEvent event fn options` Parameters: event : `string` fn : `CustomEvent<'T> -> unit` options : `EventModifier list` Returns: `SutilElement`	event : `string` fn : `CustomEvent<'T> -> unit` options : `EventModifier list` Returns: `SutilElement`
`onElementReady fn options` Full Usage: `onElementReady fn options` Parameters: fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`	fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`
`onHide fn options` Full Usage: `onHide fn options` Parameters: fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`	fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`
`onInput fn options` Full Usage: `onInput fn options` Parameters: fn : `InputEvent -> unit` options : `EventModifier list` Returns: `SutilElement`	fn : `InputEvent -> unit` options : `EventModifier list` Returns: `SutilElement`
`onKeyDown fn options` Full Usage: `onKeyDown fn options` Parameters: fn : `KeyboardEvent -> unit` options : `EventModifier list` Returns: `SutilElement`	fn : `KeyboardEvent -> unit` options : `EventModifier list` Returns: `SutilElement`
`onKeyboard event fn options` Full Usage: `onKeyboard event fn options` Parameters: event : `string` fn : `KeyboardEvent -> unit` options : `EventModifier list` Returns: `SutilElement`	event : `string` fn : `KeyboardEvent -> unit` options : `EventModifier list` Returns: `SutilElement`
`onMount fn options` Full Usage: `onMount fn options` Parameters: fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`	fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`
`onMouse event fn options` Full Usage: `onMouse event fn options` Parameters: event : `string` fn : `MouseEvent -> unit` options : `EventModifier list` Returns: `SutilElement`	event : `string` fn : `MouseEvent -> unit` options : `EventModifier list` Returns: `SutilElement`
`onMouseMove fn options` Full Usage: `onMouseMove fn options` Parameters: fn : `MouseEvent -> unit` options : `EventModifier list` Returns: `SutilElement`	fn : `MouseEvent -> unit` options : `EventModifier list` Returns: `SutilElement`
`onShow fn options` Full Usage: `onShow fn options` Parameters: fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`	fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`
`onUnmount fn options` Full Usage: `onUnmount fn options` Parameters: fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`	fn : `Event -> unit` options : `EventModifier list` Returns: `SutilElement`
`postProcess f view` Full Usage: `postProcess f view` Parameters: f : `SutilEffect -> SutilEffect` view : `SutilElement` Returns: `SutilElement`	f : `SutilEffect -> SutilEffect` view : `SutilElement` Returns: `SutilElement`
`postProcessElements f view` Full Usage: `postProcessElements f view` Parameters: f : `HTMLElement -> unit` view : `SutilElement` Returns: `SutilElement`	f : `HTMLElement -> unit` view : `SutilElement` Returns: `SutilElement`
`removeClass name` Full Usage: `removeClass name` Parameters: name : `string` Returns: `SutilElement`	name : `string` Returns: `SutilElement`
`setProperty key value` Full Usage: `setProperty key value` Parameters: key : `string` value : `'T` Returns: `SutilElement`	Set a property on the parent DOM Node key : `string` value : `'T` Returns: `SutilElement`
`setValue` Full Usage: `setValue` Returns: `string -> 'a -> SutilElement`	Backwards compatibility. Obsolete Returns: `string -> 'a -> SutilElement`
`style cssAttrs` Full Usage: `style cssAttrs` Parameters: cssAttrs : `(string * obj) seq` Returns: `SutilElement`	cssAttrs : `(string * obj) seq` Returns: `SutilElement`
`styleAppend cssAttrs` Full Usage: `styleAppend cssAttrs` Parameters: cssAttrs : `(string * obj) seq` Returns: `SutilElement`	cssAttrs : `(string * obj) seq` Returns: `SutilElement`
`subscribe source handler` Full Usage: `subscribe source handler` Parameters: source : `IObservable<'T>` handler : `BuildContext -> 'T -> unit` Returns: `SutilElement`	source : `IObservable<'T>` handler : `BuildContext -> 'T -> unit` Returns: `SutilElement`
`subscribeOnMount f` Full Usage: `subscribeOnMount f` Parameters: f : `unit -> unit -> unit` Returns: `SutilElement`	f : `unit -> unit -> unit` Returns: `SutilElement`
`toggleClass name` Full Usage: `toggleClass name` Parameters: name : `string` Returns: `SutilElement`	name : `string` Returns: `SutilElement`
`type' n` Full Usage: `type' n` Parameters: n : `'a` Returns: `SutilElement`	n : `'a` Returns: `SutilElement`
`unclass n` Full Usage: `unclass n` Parameters: n : `'a` Returns: `SutilElement`	n : `'a` Returns: `SutilElement`
`unclass' n` Full Usage: `unclass' n` Parameters: n : `'a` Returns: `SutilElement`	n : `'a` Returns: `SutilElement`
`unsubscribeOnUnmount ds` Full Usage: `unsubscribeOnUnmount ds` Parameters: ds : `(unit -> unit) list` Returns: `SutilElement`	Call each function of type `(unit -> unit)` when the element is unmounted ds : `(unit -> unit) list` Returns: `SutilElement`

CoreElements Module

Types

Functions and values

Example