Demos

[admin]

Thanks for writing and for the feedback. We will resolve the reported things.
The download currently includes a file that is combined from the files listed there. The individual files are included only in the commercial version.
To run the project you have to refer to smart.default.css and smart.elements.js and that’s all. Example: https://codepen.io/pen/?&editable=true Material is the default theme so you don’t need to set anything here. The quick usage examples are all included in the .zip.
Best Regards,
Boyko Markov

[admin]

Hi hansT,
You can manipulate(update or remove) accordion’s arrows, via updating the settings of .smart-arrow CSS class.
To change arrows position in the header you have to update the order, for example order:0 will set the arrow at the beginning of the accordion item’s header block.
If you want to remove the arrow – use display: none ;
To change the arrow with a different icon you have to manipulate it’s ::after pseudo-element.
Best Regards,
Ivailo Ivanov
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi pcng618,
The accordion has animation property. This property can be set to:
– ‘advanced’ (by default) – animations are enabled and the element has ripple effect on click
– ‘simple’ – animations are enabled, but ripple effect is disabled
– ‘none’ – animations are disabled
Best Regards,
Ivailo Ivanov
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi hansT,
To do this, you can use a template. Custom templates can be set via tooltipTemplate property. In the template, you can set various HTML content, including progress bar elements.
Here is an example of how to do this:

<template id="template">
        <smart-progress-bar value="50"></smart-progress-bar>
</template>
<smart-button id="button">Button</smart-button>
<smart-tooltip id="tooltip" selector="button" arrow tooltip-template="template"></smart-tooltip>

Best Regards,
Ivailo Ivanov
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hello hansT,
Here is how to set the width of the color ranges:

<style type="text/css">
    #needleGauge2 .jqx-range {
        width: 15px;
    }
</style>

We hope this solution is helpful to you.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi hansT,
To validate the user input this way, You have to use the following mask – “AA #### AA”(“A” matches A-Z letters, “#” matches digits).
Here is a snippet:
<smart-masked-text-box mask="AA #### AA"></smart-masked-text-box>
Best Regards,
Ivailo Ivanov
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi Michael20,
the open direction of the DropDownList custom element can be changed by setting the property dropDownPosition. There are several options available: ‘auto’, ‘top’, ‘bottom’, ‘overlay-top’, ‘overlay-center’, ‘overlay-bottom’, ‘center-bottom’, ‘center-top’. Check out the official API document for further details: API.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

This really helps, thanks.
Best regards,
Mike

[admin]

Thanks, Ivailo, it works!
Best regards,
Mike

[admin]

Hi Mike,
To do this, you just have to set element’s type property to “success”:
<smart-toast type="success">Successful operation!!!</smart-toast>
You can use several “type” options to style easily the element – “info”, “warning”, “success”, “error”, “mail”, “time”.
Best Regards,
Ivailo Ivanov
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi Michael20,
You can select an item in several ways:

• If you are initializing items declaratively inside your web page, you can set the selected attribute to the desired List Item element.
• By setting the selectedIndexes or selectedValues properties to the correposnding value.
• By calling the select method. This method accepts one argument – a List Item element instnace. You can get a reference to it by calling the getter items on the Combo Box element and filter out the item you desire.

Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi pcng618,
Yes, you can nest anything inside the center part of the Circular Progress Bar element. Here’s a demo of a ToggleButton element inside a Circular Progress Bar:
demo
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hello hansT,
To achieve this, please set the property precisionDigits, i.e.:
<smart-slider show-tooltip precision-digits="2"></smart-slider>
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi Michael20,
Yes, smart.listbox.js is also required in order to initialize a ComboBox custom element. All elements are coded to throw an error or a warning in the console in case of a missing reference or improper usage.

[admin]

Hi,
Thanks for the clarification. Am I correct that it also requires smart.listbox.js, because smart-drop-down-list requires it?
Best regards,
Mike

[Author]

Posts