Products

[admin]

Hi velocitytoo,
Thank you for your feedback. We constantly try to improve our components.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi velocitytoo,
DockingLayout items represent Windows with Tabs. So in order to change the content of a DockingLayout item there’s a method called update that accepts three arguments:

• index – represents the numeric index of the TabItem which content should be changed.
• label – is a string and represents the Label of the TabItem that will be displayed in the Tab bar
• content – is a string with the new content that will be added inside the TabItem.

Here’s an example:

const dockingLayout = document.querySelector('smart-docking-layout'),
 dockingLayoutItems = dockinglayout.items;
//Passing 'undefined' as a second argument will ignore the label and replace only the content of the target TabItem
dokcingLayoutItems[0].update(0, undefined, 'This text will be the new content for the first Tab inside the first LayoutPanel of the DockingLayout');

The update method is the same as in SmartTabs component. Here’s a link to the Tabs API.
Another approach on changing the content is to directly set the ‘content’ property of the desired TabItem. In order to do so you have to get a reference to the TabItem. This can be accomplished by calling the getter ‘items’ on the LayoutPanel. By doing so you will get a list of all present TabItems inside it. Here’s an example:

const dockingLayout = document.querySelector('smart-docking-layout'),
 firstLayoutPanel = dockinglayout.items[0];
//First TabItem inside the LayoutPanel
firstLayoutPanel.items[0].content = 'The New content of the first TabItem inside the LayoutPanel';

Unfortunately the tabPosition being reset when re-docking the item is an issue that will be fixed in our next release.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Nice to hear this will be added to the next release. I can image a floatable LayoutPanel boolean field or some such to enable this capability. Using the stateChange event is not really an answer due to the limited information provided in that event, and it would be very awkward anyway for an end user to float a LayoutPanel then have it ‘magically’ redock somewhere outside of their control/input.
You have a great element here in the Docking Layout, but it appears to still need a significant amount of work to get it ready for custom Production environments. Please keep up the good work and continue to improve this element.

[admin]

Using the tabPosition: 'hidden' setting successfully hides the tab bar when the docking LayoutPanel is first shown. However, if the LayoutPanel is then dragged and docked to another position in the Docking Layout, the tab bar is again (incorrectly) shown. Is there any way to permanently disable the tab bar in a LayoutPanel from displaying? The reason we are trying to do this is because we will only ever have a single tab within the LayoutPanel, so showing the tab bar wastes space and is unnecessary. I tried adding content directly to the LayoutPanel using a content field, but that does not work, so it appears that the only way to add content to a LayoutPanel is to create a LayoutPanelItem in the LayoutPanel’s items field, then setting content there? Is there any other way to have content inside a LayoutPanel and completely and permanently disable the LayoutPanel’s tab bar?

[admin]

Hi velocitytoo,
Disabling the floating of a LayoutPanel is currently not available but it will be added to our next release. You can follow our releases here or in our social media pages.
However, you can bind to the stateChange event and execute your custom code inside the handler when an item has been floated. You can remove the floated item from the DOM or dock it back inside if you wish via the API methods. Also you can get a list of all the items that are currently inside the DokcingLayout from the items getter. You can read more about it here API.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi velocitytoo,
These are included as part of our commercial package. It also includes the non-minified sources for easier debugging.
Best Regards,
Boyko Markov
Smart HTML Elements Team
https://www.htmlelements.com

[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.

[Author]

Posts