Products

[admin]

Thanks, it works!

[admin]

Great, thank you, that worked!

[admin]

Hi velocitytoo,
the “pin” button in the header of the LayoutPanels acts as “autoHide” button when the item is docked inside the DockingLayout and as “dock” button when the item is autoHidden. Since these are the basic operations of the DockingLayout items it’s not possible to hide the button for them via the offical API of the element (using the headerButtons property). However you can still hide them using a simple CSS selector:

smart-docking-layout .smart-auto-hide-button {
    display: none;
}

You can event target specific LayoutPanels by their id (id must be explicitly set in the DockingLayout’s layout configuration) and hide the button only for them:

smart-docking-layout #itemA .smart-auto-hide-button {
    display: none;
}

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

[admin]

Hi velocitytoo,
The header of each LayoutPanel inside the DockingLayout can be repositioned via it’s headerPosition property to any of the following sides ‘top’, ‘bottom’, ‘left’, ‘right’ and ‘none’. Setting headerPosition: ‘none’ will hide the header of the item. headerPosition property is part of SmartWindow API.
The Tab Bar section of a LayoutPanel item can also be repositioned to become hidden thanks to the tabPosition property. Setting tabPosition property to ‘hidden’ will hide the Tab Bar section of the LayoutPanel. tabPosition property is part of the SmartTabs API. However tabPosition property of the LayoutPanels will reset when the item becomes autoHidden because of the nature of the autoHidden items which needs the Tab Bar section to be visible and positioned on the corresponding side.
Here’s an example:

    const smartDockingLayout = document.querySelector('smart-docking-layout')
    smartDockingLayout.layout = [
        {
            type: 'LayoutGroup',
            orientation: 'horizontal',
            items: [
                {
                    type: 'LayoutPanel',
                    label: 'Window A',
                    headerPosition: 'none',
                    tabPosition: 'hidden',
                    items: [{
                        id: 'itemA',
                        label: '#itemA',
                        content: 'Content of item with id "itemA"'
                    }]
                }
            ]
        }
    ];

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

[admin]

Hi petays,
Thanks for sharing this. We are sure it would be helpful to many.
Best Wishes,
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi petays,
At present, we do not have validation plug-in. We are working on such and it should be available soon.
Best Regards,
Smart HTML Elements TEam
https://www.htmlelements.com

[admin]

Hi petays,
There are two themes defined in the smart.default.css – Light(default) and Dark which is set with theme=’dark’.
<smart-button theme="dark" id="myButton">Click</smart-button>
Example: https://codepen.io/anon/pen/joNNBE?&editable=true
Best Wishes,
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

I decided to roll on my own type definitions to keep typescript compiler happy.
With a smart guy this kind of type definitions could be generated programmatically in no time!
It is a bit tedious and I feel a bit stupid doing this, but I feel it is easier for my eyes to do this way:

export interface MenuEvent extends CustomEvent {
    detail: SmartMenuItem;
}
export interface SmartMenu extends HTMLElement {
    locale: string;
}
export interface SmartMenuItem extends HTMLElement {
    item: any;
    label: any;
    value: any;
}
export interface SmartTextBox extends HTMLElement {
    locale: string;
    readonly: boolean;
    required: boolean;
    theme: string;
    value: string;
}
export interface SmartPasswordTextBox extends HTMLElement {
    locale: string;
    maxLength: number;
    minLength: number;
    passwordStrength: (password, allowedSymbols) => string;
    required: boolean;
    showPasswordIcon: boolean;
    showPasswordStrength: boolean;
    theme: string;
    tooltipArrow: boolean;
    value: string;
}
export interface SmartDropDownList extends HTMLElement {
    displayMember: string;
    locale: string;
    selectedIndexes: any[];     // array type?
    selectedValues: any[];      // array type?
    selectionMode: string;
    valueMember: string;
    clearItems();
    insert(position: number, value: any);
}

[admin]

Hi
Good to hear that you have not abandoned typescript totally.
It is indeed possible to use Smart HTML Elements with typescript using just one import:
import "@smarthtmlelements/smart-elements/source/smart.elements.js";
Only that I am missing intellisense and code completion as I can not use actual types but HTMLElement or nearest type from it if I believe that I can use it.
And can not Ctrl-click (jump) to object or method in question.
I have to copy every method that I use from your API or examples pages. It is a bit tedious but once I got all the words and have tested them to work things go quite smoothly 🙂
Overall I like custom tags very much as they make manipulating DOM elements really slick with only one instance to track and you can use DOM API for that.
IMO your framework has definitely a bright future as it matures a bit and is more feature complete.
Example: Smart HTML Elements with typescript without type definitions
P.S. I would love to have a preview button before submitting post with heavy formatting.

[admin]

Hi petays,
Thank you for writing.
We will consider adding Typescript definitions in the future versions. At present, we are focused on building the User Interface components and adding the missing features to the existing components.
Is not it possible to use the Framework without Typescript? We have tutorials like that one https://www.htmlelements.com/docs/create-angular-and-react-applications-with-shared-web-components/ which shows how to use a Custom Element from our framework within Angular & React projects which use Typescript. As for Type checking, all properties in our UI Components are Typed(int, float, date, string, bool) with built-in type checking at run-time i.e invalid values are handled by the framework.
Best regards,
Boyko Markov
https://www.htmlelements.com
Smart HTML Elements Team

[admin]

Hello hansT,
To achieve this, please enable the property inverted, as demonstrated in the following example: https://www.htmlelements.com/demos/slider/basic/ (the third and fourth smart-sliders).
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi hansT,
You can update tooltip’s strings by changing the value of messages property.
Also can be configured such a strings for more than one language. Via locale property you can switch between both used languages.
Please, refer to the following demo. It can be helpful for you:
https://www.htmlelements.com/demos/passwordtextbox/strength-localization/
Best Regards,
Ivailo Ivanov
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi hansT,
You can achieve this by setting precisionDigits property to 2.
<smart-tank precision-digits="2"></smart-tank>
Best Regards,
Ivailo Ivanov
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi hansT,
To achieve this, please set the filterMode property to ‘startsWith’.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hello hansT,
Please make use of the callback function format-function to achieve your requirement:

<script type="text/javascript">
    function progressValueFormatFunction(value) {
        return 'Progress label';
    }
</script>

<jqx-progress-bar value="50" show-progress-value format-function="progressValueFormatFunction"></jqx-progress-bar>
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts