Element
How to use the Element class of the bit Butil?
Usage
To use the browser Element features you need to just use the Bit.Butil namesapce and utilize its extension methods like this:
@using Bit.Butil
<div @ref="elementRef">Element</div>
@code {
private ElementReference elementRef;
var rect = await elementRef.GetBoundingClientRect();
}Methods
GetAttribute:
Retrieves the value of the named attribute from the current node and returns it as a string (MDN).
<div @ref="getAttributeElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitTextField @bind-Value="attributeName" Label="Attribute name" />
<BitButton OnClick="GetAttribute">GetAttribute</BitButton>
<div>Attribute: @currentAttribute</div>
@code {
private string? attributeName;
private string? currentAttribute;
private ElementReference getAttributeElementRef;
private async Task GetAttribute()
{
currentAttribute = await getAttributeElementRef.GetAttribute(attributeName!);
}
}GetAttributeNames:
Returns an array of attribute names from the current element (MDN).
<div @ref="getAttributeNamesElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetAttributeNames">GetAttributeNames</BitButton>
<div>Attribute names: @currentAttributeNames</div>
@code {
private string? currentAttributeNames;
private ElementReference getAttributeNamesElementRef;
private async Task GetAttributeNames()
{
var result = await getAttributeNamesElementRef.GetAttributeNames();
currentAttributeNames = string.Join(", ", result);
}
}GetBoundingClientRect:
Returns the size of an element and its position relative to the viewport (MDN).
<div @ref="getBoundingClientRectElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetBoundingClientRect">GetBoundingClientRect</BitButton>
<div>Bounding client rect: @currentBoundingClientRect</div>
@code {
private string? currentBoundingClientRect;
private ElementReference getBoundingClientRectElementRef;
private async Task GetBoundingClientRect()
{
var result = await getBoundingClientRectElementRef.GetBoundingClientRect();
currentBoundingClientRect = string.Join(", ",
$"Height: {result.Height}",
$"Width: {result.Width}",
$"X: {result.X}",
$"Y: {result.Y}"
);
}
}HasAttribute:
Returns a boolean value indicating if the element has the specified attribute or not (MDN).
<div @ref="hasAttributeElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitTextField @bind-Value="hasAttributeName" Label="Attribute name" />
<BitButton OnClick="GetHasAttribute">GetHasAttribute</BitButton>
<div>Has attribute: @hasAttribute</div>
@code {
private string? hasAttribute;
private string? hasAttributeName;
private ElementReference hasAttributeElementRef;
private async Task GetHasAttribute()
{
var result = await hasAttributeElementRef.HasAttribute(hasAttributeName!);
hasAttribute = result.ToString();
}
}HasAttributes:
Returns a boolean value indicating if the element has one or more HTML attributes present (MDN).
<div @ref="hasAttributesElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetHasAttributes">GetHasAttributes</BitButton>
<div>Has attributes: @hasAttributes</div>
@code {
private string? hasAttributes;
private ElementReference hasAttributesElementRef;
private async Task GetHasAttributes()
{
var result = await hasAttributesElementRef.HasAttributes();
hasAttributes = result.ToString();
}
}SetPointerCapture:
Designates a specific element as the capture target of future pointer events (MDN).
HasPointerCapture:
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID (MDN).
ReleasePointerCapture:
Releases (stops) pointer capture that was previously set for a specific pointer event (MDN).
RequestPointerLock:
Allows to asynchronously ask for the pointer to be locked on the given element (MDN).
<div @ref="requestPointerLockExampleCode"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="@(() => requestPointerLockElementRef.RequestPointerLock())">
RequestPointerLock
</BitButton>
@code {
private ElementReference requestPointerLockExampleCode;
}RequestFullScreen:
Asynchronously asks the browser to make the element fullscreen (MDN).
<div @ref="requestFullScreenElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="RequestFullScreen">RequestFullScreen</BitButton>
@code {
private ElementReference requestFullScreenElementRef;
private async Task RequestFullScreen()
{
var options = new FullScreenOptions() { NavigationUI = FullScreenNavigationUI.Show };
await requestFullScreenElementRef.RequestFullScreen(options);
}
}Matches:
Returns a boolean value indicating whether or not the element would be selected by the specified selector string (MDN).
<div @ref="matchesElementRef"
id="target"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitTextField @bind-Value="selector" Label="Selector" Style="max-width: 18.75rem;" />
<BitButton OnClick="Matches">Matches</BitButton>
<div>Matches: @matches</div>
@code {
private string? matches;
private string? selector = "#target";
private ElementReference matchesElementRef;
private async Task Matches()
{
var result = await matchesElementRef.Matches(selector!);
matches = result.ToString();
}
}Scroll:
Scrolls to a particular set of coordinates inside a given element (MDN).
<div @ref="scrollElementRef"
style="max-width:6rem;
max-height:6rem;
color: white;
overflow: auto;
background: dodgerblue;">
<div style="height: 10rem; width: 10rem;">Element</div>
</div>
<BitNumberField @bind-Value="scrollY" Label="Scroll Y" Mode="BitSpinButtonMode.Inline" />
<BitNumberField @bind-Value="scrollX" Label="Scroll X" Mode="BitSpinButtonMode.Inline" />
<BitChoiceGroup @bind-Value="scrollBehavior"
Label="Scroll behavior"
TItem="BitChoiceGroupOption<ScrollBehavior>" TValue="ScrollBehavior">
<BitChoiceGroupOption Text="Auto" Value="ScrollBehavior.Auto" />
<BitChoiceGroupOption Text="Instant" Value="ScrollBehavior.Instant" />
<BitChoiceGroupOption Text="Smooth" Value="ScrollBehavior.Smooth" />
</BitChoiceGroup>
<BitButton OnClick="Scroll">Scroll</BitButton>
@code {
private float scrollX = 0;
private float scrollY = 100;
private ScrollBehavior scrollBehavior;
private ElementReference scrollElementRef;
private async Task Scroll()
{
var scrollOptions = new ScrollToOptions()
{
Top = scrollY,
Left = scrollX,
Behavior = scrollBehavior
};
await scrollElementRef.Scroll(scrollOptions);
}
}ScrollBy:
Scrolls an element by the given amount (MDN).
<div @ref="scrollByElementRef"
style="max-width:6rem;
max-height:6rem;
color: white;
overflow: auto;
background: dodgerblue;">
<div style="height: 10rem; width: 10rem;">Element</div>
</div>
<BitNumberField @bind-Value="scrollByY" Label="ScrollBy Y" Mode="BitSpinButtonMode.Inline" />
<BitNumberField @bind-Value="scrollByX" Label="ScrollBy X" Mode="BitSpinButtonMode.Inline" />
<BitChoiceGroup @bind-Value="scrollByBehavior"
Label="Scroll behavior"
TItem="BitChoiceGroupOption<ScrollBehavior>" TValue="ScrollBehavior">
<BitChoiceGroupOption Text="Auto" Value="ScrollBehavior.Auto" />
<BitChoiceGroupOption Text="Instant" Value="ScrollBehavior.Instant" />
<BitChoiceGroupOption Text="Smooth" Value="ScrollBehavior.Smooth" />
</BitChoiceGroup>
<BitButton OnClick="ScrollBy">ScrollBy</BitButton>
@code {
private float scrollByX = 0;
private float scrollByY = 156;
private ScrollBehavior scrollByBehavior;
private ElementReference scrollByElementRef;
private async Task ScrollBy()
{
var scrollByOptions = new ScrollByToOptions()
{
Top = scrollByY,
Left = scrollByX,
Behavior = scrollByBehavior
};
await scrollByElementRef.ScrollBy(scrollByOptions);
}
}ScrollIntoView:
Scrolls the page until the element gets into the view (MDN).
<div @ref="scrollIntoViewElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitChoiceGroup @bind-Value="inlineScrollPosition"
Label="Inline scroll position"
TItem="BitChoiceGroupOption<ScrollLogicalPosition>" TValue="ScrollLogicalPosition">
<BitChoiceGroupOption Text="Start" Value="ScrollLogicalPosition.Start" />
<BitChoiceGroupOption Text="Center" Value="ScrollLogicalPosition.Center" />
<BitChoiceGroupOption Text="End" Value="ScrollLogicalPosition.End" />
<BitChoiceGroupOption Text="Nearest" Value="ScrollLogicalPosition.Nearest" />
</BitChoiceGroup>
<BitChoiceGroup @bind-Value="blockScrollPosition"
Label="Block scroll position"
TItem="BitChoiceGroupOption<ScrollLogicalPosition>" TValue="ScrollLogicalPosition">
<BitChoiceGroupOption Text="Start" Value="ScrollLogicalPosition.Start" />
<BitChoiceGroupOption Text="Center" Value="ScrollLogicalPosition.Center" />
<BitChoiceGroupOption Text="End" Value="ScrollLogicalPosition.End" />
<BitChoiceGroupOption Text="Nearest" Value="ScrollLogicalPosition.Nearest" />
</BitChoiceGroup>
<BitChoiceGroup @bind-Value="scrollIntoViewBehavior"
Label="ScrollIntoView behavior"
TItem="BitChoiceGroupOption<ScrollBehavior>" TValue="ScrollBehavior">
<BitChoiceGroupOption Text="Auto" Value="ScrollBehavior.Auto" />
<BitChoiceGroupOption Text="Instant" Value="ScrollBehavior.Instant" />
<BitChoiceGroupOption Text="Smooth" Value="ScrollBehavior.Smooth" />
</BitChoiceGroup>
<BitButton OnClick="ScrollIntoView">ScrollIntoView</BitButton>
@code {
private ScrollBehavior scrollIntoViewBehavior;
private ScrollLogicalPosition blockScrollPosition;
private ScrollLogicalPosition inlineScrollPosition;
private ElementReference scrollIntoViewElementRef;
private async Task ScrollIntoView()
{
var scrollOptions = new ScrollIntoViewOptions()
{
Inline = inlineScrollPosition,
Block = blockScrollPosition,
Behavior = scrollIntoViewBehavior
};
await scrollIntoViewElementRef.ScrollIntoView(scrollOptions);
}
}RemoveAttribute:
Removes the named attribute from the current node (MDN).
<div @ref="removeAttributeElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitTextField @bind-Value="removeAttributeName" Label="Attribute name" />
<BitButton OnClick="RemoveAttribute">RemoveAttribute</BitButton>
@code {
private string? removeAttributeName;
private ElementReference removeAttributeElementRef;
private async Task RemoveAttribute()
{
await removeAttributeElementRef.RemoveAttribute(removeAttributeName!);
}
}SetAttribute:
Sets the value of a named attribute of the current node (MDN).
<div @ref="setAttributeElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitTextField @bind-Value="setAttributeName" Label="Attribute name" />
<BitTextField @bind-Value="setAttributeValue" Label="Attribute value" />
<BitButton OnClick="SetAttribute">SetAttribute</BitButton>
@code {
private string? setAttributeName;
private string? setAttributeValue;
private ElementReference setAttributeElementRef;
private async Task SetAttribute()
{
await setAttributeElementRef.SetAttribute(setAttributeName!, setAttributeValue!);
}
}ToggleAttribute:
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element (MDN).
<div @ref="toggleAttributeElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitTextField @bind-Value="toggleAttributeName" Label="Attribute name" />
<BitCheckbox @bind-Value="toggleAttributeForce" Label="Force" />
<BitButton OnClick="ToggleAttribute">ToggleAttribute</BitButton>
@code {
private bool toggleAttributeForce;
private string? toggleAttributeName;
private ElementReference toggleAttributeElementRef;
private async Task ToggleAttribute()
{
await toggleAttributeElementRef.ToggleAttribute(toggleAttributeName!, toggleAttributeForce);
}
}SetAccessKey, GetAccessKey:
Gets/Sets a string representing the access key assigned to the element (MDN).
<div @ref="accessKeyElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitTextField @bind-Value="newAccessKeyValue" />
<BitButton OnClick="SetAccessKey">SetAccessKey</BitButton>
<BitButton OnClick="GetAccessKey">GetAccessKey</BitButton>
<div>Access key: @currentAccessKey</div>
@code {
private string? newAccessKey;
private string? currentAccessKey;
private ElementReference accessKeyElementRef;
private async Task SetAccessKey()
{
await accessKeyElementRef.SetAccessKey(newAccessKey!);
}
private async Task GetAccessKey()
{
currentAccessKey = await accessKeyElementRef.GetAccessKey();
}
}SetClassName, GetClassName:
Gets/Sets a string representing the class of the element (MDN).
<div @ref="classNameElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitTextField @bind-Value="newClassName" />
<BitButton OnClick="SetClassName">SetClassName</BitButton>
<BitButton OnClick="GetClassName">GetClassName</BitButton>
<div>ClassName: @currentClassName</div>
@code {
private string? newClassName;
private string? currentClassName;
private ElementReference classNameElementRef;
private async Task SetClassName()
{
await classNameElementRef.SetClassName(newClassName!);
}
private async Task GetClassName()
{
currentClassName = await classNameElementRef.GetClassName();
}
}GetClientHeight:
Returns a number representing the inner height of the element in px (MDN).
<div @ref="getClientHeightElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetClientHeight">GetClientHeight</BitButton>
<div>ClientHeight: @currentClientHeight</div>
@code {
private string? currentClientHeight;
private ElementReference getClientHeightElementRef;
private async Task GetClientHeight()
{
var result = await getClientHeightElementRef.GetClientHeight();
currentClientHeight = result.ToString();
}
}GetClientLeft:
Returns a number representing the width of the left border of the element in px (MDN).
<div @ref="getClientLeftElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetClientLeft">GetClientLeft</BitButton>
<div>ClientLeft: @currentClientLeft</div>
@code {
private string? currentClientLeft;
private ElementReference getClientLeftElementRef;
private async Task GetClientLeft()
{
var result = await getClientLeftElementRef.GetClientLeft();
currentClientLeft = result.ToString();
}
}GetClientTop:
Returns a number representing the width of the top border of the element in px (MDN).
<div @ref="getClientTopElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetClientTop">GetClientTop</BitButton>
<div>ClientTop: @currentClientTop</div>
@code {
private string? currentClientTop;
private ElementReference getClientTopElementRef;
private async Task GetClientTop()
{
var result = await getClientTopElementRef.GetClientTop();
currentClientTop = result.ToString();
}
}GetClientWidth:
Returns a number representing the inner width of the element in px (MDN).
<div @ref="getClientWidthElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetClientWidth">GetClientWidth</BitButton>
<div>ClientWidth: @currentClientWidth</div>
@code {
private string? currentClientWidth;
private ElementReference getClientWidthElementRef;
private async Task GetClientWidth()
{
var result = await getClientWidthElementRef.GetClientWidth();
currentClientWidth = result.ToString();
}
}SetId, GetId:
Gets/Sets a string representing the id of the element (MDN).
<div @ref="idElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitTextField @bind-Value="newId" />
<BitButton OnClick="SetId">SetId</BitButton>
<BitButton OnClick="GetId">GetId</BitButton>
<div>Id: @currentId</div>
@code {
private string? newId;
private string? currentId;
private ElementReference idElementRef;
private async Task SetId()
{
await idElementRef.SetId(newId!);
}
private async Task GetId()
{
currentId = await idElementRef.GetId();
}
}SetInnerHTML, GetInnerHTML:
Gets/Sets a string representing the markup of the element's content (MDN).
<div @ref="innerHTMLElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitTextField @bind-Value="newInnerHTML" />
<BitButton OnClick="SetInnerHTML">SetInnerHTML</BitButton>
<BitButton OnClick="GetInnerHTML">GetInnerHTML</BitButton>
<div>InnerHTML: @currentInnerHTML</div>
@code {
private string? newInnerHTML;
private string? currentInnerHTML;
private ElementReference innerHTMLElementRef;
private async Task SetInnerHTML()
{
await innerHTMLElementRef.SetInnerHTML(newInnerHTML!);
}
private async Task GetInnerHTML()
{
currentInnerHTML = await innerHTMLElementRef.GetInnerHTML();
}
}SetOuterHtml, GetOuterHtml:
Gets/Sets a string representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string (MDN).
<div @ref="outerHTMLElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetOuterHTML">GetOuterHTML</BitButton>
<div>OuterHTML: @currentOuterHTML</div>
@code {
private string? currentOuterHTML;
private ElementReference outerHTMLElementRef;
private async Task GetOuterHTML()
{
currentOuterHTML = await outerHTMLElementRef.GetOuterHTML();
}
}GetScrollHeight:
Returns a number representing the scroll view height of an element (MDN).
<div @ref="getScrollHeightElementRef"
style="max-width:6rem;
max-height:6rem;
color: white;
overflow: auto;
background: dodgerblue;">
<div style="height: 10rem; width: 10rem;">Element</div>
</div>
<BitButton OnClick="GetScrollHeight">GetScrollHeight</BitButton>
<div>ScrollHeight: @currentScrollHeight</div>
@code {
private string? currentScrollHeight;
private ElementReference getScrollHeightElementRef;
private async Task GetScrollHeight()
{
var result = await getScrollHeightElementRef.GetScrollHeight();
currentScrollHeight = result.ToString();
}
}GetScrollLeft:
A number representing the left scroll offset of the element (MDN).
<div @ref="getScrollLeftElementRef"
style="max-width:6rem;
max-height:6rem;
color: white;
overflow: auto;
background: dodgerblue;">
<div style="height: 10rem; width: 10rem;">Element</div>
</div>
<BitButton OnClick="GetScrollLeft">GetScrollLeft</BitButton>
<div>ScrollLeft: @currentScrollLeft</div>
@code {
private string? currentScrollLeft;
private ElementReference getScrollLeftElementRef;
private async Task GetScrollLeft()
{
var result = await getScrollLeftElementRef.GetScrollLeft();
currentScrollLeft = result.ToString();
}
}GetScrollTop:
A number representing number of pixels the top of the element is scrolled vertically (MDN).
<div @ref="getScrollTopElementRef"
style="max-width:6rem;
max-height:6rem;
color: white;
overflow: auto;
background: dodgerblue;">
<div style="height: 10rem; width: 10rem;">Element</div>
</div>
<BitButton OnClick="GetScrollTop">GetScrollTop</BitButton>
<div>ScrollTop: @currentScrollTop</div>
@code {
private string? currentScrollTop;
private ElementReference getScrollTopElementRef;
private async Task GetScrollTop()
{
var result = await getScrollTopElementRef.GetScrollTop();
currentScrollTop = result.ToString();
}
}GetScrollWidth:
Returns a number representing the scroll view width of the element (MDN).
<div @ref="getScrollWidthElementRef"
style="max-width:6rem;
max-height:6rem;
color: white;
overflow: auto;
background: dodgerblue;">
<div style="height: 10rem; width: 10rem;">Element</div>
</div>
<BitButton OnClick="GetScrollWidth">GetScrollWidth</BitButton>
<div>ScrollWidth: @currentScrollWidth</div>
@code {
private string? currentScrollWidth;
private ElementReference getScrollWidthElementRef;
private async Task GetScrollWidth()
{
var result = await getScrollWidthElementRef.GetScrollWidth();
currentScrollWidth = result.ToString();
}
}GetTagName:
Returns a string with the name of the tag for the given element (MDN).
<div @ref="getTagNameElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetTagName">GetTagName</BitButton>
<div>TagName: @currentTagName</div>
@code {
private string? currentTagName;
private ElementReference getTagNameElementRef;
private async Task GetTagName()
{
var result = await getTagNameElementRef.GetTagName();
currentTagName = result.ToString();
}
}IsContentEditable:
Returns a boolean value indicating whether or not the content of the element can be edited (MDN).
<div @ref="isContentEditableElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetIsContentEditable">GetIsContentEditable</BitButton>
<div>Is content editable: @isContentEditable</div>
@code {
private string? isContentEditable;
private ElementReference isContentEditableElementRef;
private async Task GetIsContentEditable()
{
var result = await isContentEditableElementRef.IsContentEditable();
isContentEditable = result.ToString();
}
}SetContentEditable, GetContentEditable:
Gets/Sets the contentEditable property, which specifies whether or not the element is editable (MDN).
<div @ref="contentEditableElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitChoiceGroup @bind-Value="newContentEditable"
Label="Content editable"
TItem="BitChoiceGroupOption<ContentEditable>" TValue="ContentEditable">
<BitChoiceGroupOption Text="Inherit" Value="ContentEditable.Inherit" />
<BitChoiceGroupOption Text="True" Value="ContentEditable.True" />
<BitChoiceGroupOption Text="False" Value="ContentEditable.False" />
<BitChoiceGroupOption Text="PlainTextOnly" Value="ContentEditable.PlainTextOnly" />
</BitChoiceGroup>
<BitButton OnClick="SetContentEditable">SetContentEditable</BitButton>
<BitButton OnClick="GetContentEditable">GetContentEditable</BitButton>
<div>ContentEditable: @currentContentEditable</div>
@code {
private string? currentContentEditable;
private ContentEditable newContentEditable;
private ElementReference contentEditableElementRef;
private async Task SetContentEditable()
{
await contentEditableElementRef.SetContentEditable(newContentEditable);
}
private async Task GetContentEditable()
{
var result = await contentEditableElementRef.GetContentEditable();
currentContentEditable = result.ToString();
}
}SetDir, GetDir:
Gets/Sets the text writing directionality of the content of the current element (MDN).
<div @ref="dirElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitChoiceGroup @bind-Value="newDir"
Label="Element direction"
TItem="BitChoiceGroupOption<ElementDir>" TValue="ElementDir">
<BitChoiceGroupOption Text="Inherit" Value="ElementDir.NotSet" />
<BitChoiceGroupOption Text="True" Value="ElementDir.Ltr" />
<BitChoiceGroupOption Text="False" Value="ElementDir.Rtl" />
<BitChoiceGroupOption Text="PlainTextOnly" Value="ElementDir.Auto" />
</BitChoiceGroup>
<BitButton OnClick="SetDir">SetDir</BitButton>
<BitButton OnClick="GetDir">GetDir</BitButton>
<div>Dir: @currentDir</div>
@code {
private ElementDir newDir;
private string? currentDir;
private ElementReference dirElementRef;
private async Task SetDir()
{
await dirElementRef.SetDir(newDir);
}
private async Task GetDir()
{
var result = await dirElementRef.GetDir();
currentDir = result.ToString();
}
}SetEnterKeyHint, GetEnterKeyHint:
Gets/Sets the enterKeyHint property, which is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards (MDN).
<input @ref="enterKeyHintElementRef" placeholder="Element"
style="width:6rem; height:6rem; background: dodgerblue;" />
<BitChoiceGroup @bind-Value="newEnterKeyHint"
Label="Enter key hint"
TItem="BitChoiceGroupOption<EnterKeyHint>" TValue="EnterKeyHint">
<BitChoiceGroupOption Text="NotSet" Value="EnterKeyHint.NotSet" />
<BitChoiceGroupOption Text="Enter" Value="EnterKeyHint.Enter" />
<BitChoiceGroupOption Text="Done" Value="EnterKeyHint.Done" />
<BitChoiceGroupOption Text="Go" Value="EnterKeyHint.Go" />
<BitChoiceGroupOption Text="Next" Value="EnterKeyHint.Next" />
<BitChoiceGroupOption Text="Previous" Value="EnterKeyHint.Previous" />
<BitChoiceGroupOption Text="Search" Value="EnterKeyHint.Search" />
<BitChoiceGroupOption Text="Send" Value="EnterKeyHint.Send" />
</BitChoiceGroup>
<BitButton OnClick="SetEnterKeyHint">SetEnterKeyHint</BitButton>
<BitButton OnClick="GetEnterKeyHint">GetEnterKeyHint</BitButton>
<div>EnterKeyHint: @currentEnterKeyHint</div>
@code {
private string? currentEnterKeyHint;
private EnterKeyHint newEnterKeyHint;
private ElementReference enterKeyHintElementRef;
private async Task SetEnterKeyHint()
{
await enterKeyHintElementRef.SetEnterKeyHint(newEnterKeyHint);
}
private async Task GetEnterKeyHint()
{
var result = await enterKeyHintElementRef.GetEnterKeyHint();
currentEnterKeyHint = result.ToString();
}
}SetHidden, GetHidden:
Gets/Sets the hidden property, which reflects the value of the element's hidden attribute (MDN).
SetInert, GetInert:
Gets/Sets the inert property, which reflects the value of the element's inert attribute. It is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events and events from assistive technologies (MDN).
<div @ref="inertElementRef"
style="max-width:6rem;
max-height:6rem;
color: white;
overflow: auto;
background: dodgerblue;">
<div style="height: 10rem; width: 10rem;">Element</div>
</div>
<BitCheckbox @bind-Value="newInert" Label="Inert" />
<BitButton OnClick="SetInert">SetInert</BitButton>
<BitButton OnClick="GetInert">GetInert</BitButton>
<div>Inert: @currentInert</div>
@code {
private bool newInert;
private string? currentInert;
private ElementReference inertElementRef;
private async Task SetInert()
{
await inertElementRef.SetInert(newInert);
}
private async Task GetInert()
{
var result = await inertElementRef.GetInert();
currentInert = result.ToString();
}
}SetInnerText, GetInnerText:
Gets/Sets the innerText property, which represents the rendered text content of a node and its descendants (MDN).
<div @ref="innerTextElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitTextField @bind-Value="newInnerText" />
<BitButton OnClick="SetInnerText">SetInnerText</BitButton>
<BitButton OnClick="GetInnerText">GetInnerText</BitButton>
<div>InnerText: @currentInnerText</div>
@code {
private string? newInnerText;
private string? currentInnerText;
private ElementReference innerTextElementRef;
private async Task SetInnerText()
{
await innerTextElementRef.SetInnerText(newInnerText!);
}
private async Task GetInnerText()
{
currentInnerText = await innerTextElementRef.GetInnerText();
}
}SetInputMode, GetInputMode:
Gets/Sets the inputMode property, which reflects the value of the element's inputmode attribute (MDN).
<input @ref="inputModeElementRef" placeholder="Element"
style="width:6rem; height:6rem; background: dodgerblue;" />
<BitChoiceGroup @bind-Value="newInputMode"
Label="Enter key hint"
TItem="BitChoiceGroupOption<InputMode>" TValue="InputMode">
<BitChoiceGroupOption Text="NotSet" Value="InputMode.NotSet" />
<BitChoiceGroupOption Text="Decimal" Value="InputMode.Decimal" />
<BitChoiceGroupOption Text="Email" Value="InputMode.Email" />
<BitChoiceGroupOption Text="None" Value="InputMode.None" />
<BitChoiceGroupOption Text="Numeric" Value="InputMode.Numeric" />
<BitChoiceGroupOption Text="Search" Value="InputMode.Search" />
<BitChoiceGroupOption Text="Tel" Value="InputMode.Tel" />
<BitChoiceGroupOption Text="Text" Value="InputMode.Text" />
<BitChoiceGroupOption Text="Url" Value="InputMode.Url" />
</BitChoiceGroup>
<BitButton OnClick="SetInputMode">SetInputMode</BitButton>
<BitButton OnClick="GetInputMode">GetInputMode</BitButton>
<div>InputMode: @currentInputMode</div>
@code {
private string? currentInputMode;
private InputMode newInputMode;
private ElementReference inputModeElementRef;
private async Task SetInputMode()
{
await inputModeElementRef.SetInputMode(newInputMode);
}
private async Task GetInputMode()
{
var result = await inputModeElementRef.GetInputMode();
currentInputMode = result.ToString();
}
}SetTabIndex, GetTabIndex:
Gets/Sets a number representing the position of the element in the tabbing order (MDN).
<div @ref="tabIndexElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitNumberField @bind-Value="newTabIndex" Mode="BitSpinButtonMode.Inline" />
<BitButton OnClick="SetTabIndex">SetTabIndex</BitButton>
<BitButton OnClick="GetTabIndex">GetTabIndex</BitButton>
<div>TabIndex: @currentTabIndex</div>
@code {
private double newTabIndex;
private string? currentTabIndex;
private ElementReference tabIndexElementRef;
private async Task SetTabIndex()
{
await tabIndexElementRef.SetTabIndex((int)newTabIndex);
}
private async Task GetTabIndex()
{
var result = await tabIndexElementRef.GetTabIndex();
currentTabIndex = result.ToString();
}
}GetOffsetHeight:
Returns the height of an element, including vertical padding and borders in px (MDN).
<div @ref="getOffsetHeightElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetOffsetHeight">GetOffsetHeight</BitButton>
<div>OffsetHeight: @currentOffsetHeight</div>
@code {
private string? currentOffsetHeight;
private ElementReference getOffsetHeightElementRef;
private async Task GetOffsetHeight()
{
var result = await getOffsetHeightElementRef.GetOffsetHeight();
currentOffsetHeight = result.ToString();
}
}GetOffsetLeft:
Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node (MDN).
<div @ref="getOffsetLeftElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetOffsetLeft">GetOffsetLeft</BitButton>
<div>OffsetLeft: @currentOffsetLeft</div>
@code {
private string? currentOffsetLeft;
private ElementReference getOffsetLeftElementRef;
private async Task GetOffsetLeft()
{
var result = await getOffsetLeftElementRef.GetOffsetLeft();
currentOffsetLeft = result.ToString();
}
}GetOffsetTop:
Returns the distance from the outer border of the current element (including its margin) to the top padding edge of the offsetParent, the closest positioned ancestor element (MDN).
<div @ref="getOffsetTopElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetOffsetTop">GetOffsetTop</BitButton>
<div>OffsetTop: @currentOffsetTop</div>
@code {
private string? currentOffsetTop;
private ElementReference getOffsetTopElementRef;
private async Task GetOffsetTop()
{
var result = await getOffsetTopElementRef.GetOffsetTop();
currentOffsetTop = result.ToString();
}
}GetOffsetWidth:
The layout width of an element in px (MDN).
<div @ref="getOffsetWidthElementRef"
style="width:6rem; height:6rem; background: dodgerblue;">
Element
</div>
<BitButton OnClick="GetOffsetWidth">GetOffsetWidth</BitButton>
<div>OffsetWidth: @currentOffsetWidth</div>
@code {
private string? currentOffsetWidth;
private ElementReference getOffsetWidthElementRef;
private async Task GetOffsetWidth()
{
var result = await getOffsetWidthElementRef.GetOffsetWidth();
currentOffsetWidth = result.ToString();
}
}Blur:
Removes keyboard focus from the currently focused element (MDN).
<input @ref="blurElementRef" placeholder="Element"
style="width:6rem; height:6rem; background: dodgerblue;" />
<BitButton OnClick="@(() => blurElementRef.Blur())">Blur</BitButton>
@code {
private ElementReference blurElementRef;
}Remove:
Removes the element from the children list of its parent (MDN).