Heading

Last updated on August 02, 2024.

Element: <ins-heading>

Defines a divider element with text label option.

Complete Example

Code Snippet

<ins-heading 
  label="Label" 
  level=6 max-length="20" 
  background-color="#ffffff" 
  editable
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-heading>

Default State

Code Snippet

<ins-heading></ins-heading>

Code Snippet

<ins-heading label="Sample Label" background-color="#f1f1f1"></ins-heading>

Events

Code Snippet

<ins-heading 
  id="eventEl" 
  name="Sample Heading" 
  label="Label" 
  level=6 max-length="20" 
  background-color="#ffffff" editable>
</ins-heading>

<script>
  var field = document.getElementById('eventEl');
  field.addEventListener('insChange', event => {
    var event = event.detail;
    console.log("Heading field event", event);
    alert("Heading field name: " + event.name + "\nOld Value: " + event.old_label + "\nNew Value: " +  event.new_label);
  });
</script>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string	""	any	Defines the label of the checkbox card
name	string	""	any	Defines the name of the edit input field
level	integer	6	1 - 6	Defines the html "h-tag" to be used for the label (ie. h1, h2, ...)
background-color	string	#ffffff	Any CSS color syntax	Shows the edit icon on hover & allow edit functionality
without-line	boolean	false	true, false	Disabled the line display / border
editable	boolean	false	true, false	Shows the edit icon on hover & allow edit functionality
max-length	string	""	any	Defines the edit input field's character max-length

Events

EVENT	OBJECT	DESCRIPTION
insChange	name,old_label,new_label	Emits the label name, old and new value

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.