@boikom
@boikom
Forum Replies Created
-
AuthorPosts
-
admin
KeymasterHi Peter,
In order to style the DateTimePicker, please refer to: https://www.htmlelements.com/docs/datetimepicker-css/. The documentation tutorial will help you to learn which CSS variables can be used for styling the Web Component.
Please, let us know if you have additional questions.
Best Regards,
B. Markov
SmartHtmlElements Team
https://www.htmlelements.comKeymasterHi Mike,
The Menu demo page issue is resolved.
Thank you very much for the feedback!
Best regards,
Boyko Markov
Smart HTML Elements Team
https://www.htmlelements.comKeymasterHi Mike,
Thank you for your feedback. We will resolve this issue as soon as possible.
Best Regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.comKeymasterThank you, Dimitar.
KeymasterHi Mike,
This can be achieved by setting the checkboxes attribute to the smart-menu and checkable and check-mode=”checkbox” to the particular smart-menu-items-group. You can see this in action in the “Menu labels” section of the Overview demo.
Best Regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.comKeymasterHi john1987,
in order to control the visibility of the scroll buttons inside the header section of the element you simply need to changed the <b>overview</b> property to ‘hidden’. When you want to see the buttons again just set the value of the property back to it’s default value ‘auto’. Here’s how to do it:<script> window.onload = function () { var tabs = document.querySelector('smart-tabs'); tabs.addEventListener('mouseenter', function (event) { this.overflow = 'auto'; }); tabs.addEventListener('mouseleave', function (event) { this.overflow = 'hidden'; }); } </script> </head> <body> <smart-tabs> <smart-tab-item label="TAB 1">Content 1</smart-tab-item> <smart-tab-item label="TAB 2">Content 2</smart-tab-item> <smart-tab-item label="TAB 3">Content 3</smart-tab-item> <smart-tab-item label="TAB 4">Content 4</smart-tab-item> <smart-tab-item label="TAB 5">Content 5</smart-tab-item> <smart-tab-item label="TAB 6">Content 6</smart-tab-item> <smart-tab-item label="TAB 7">Content 7</smart-tab-item> <smart-tab-item label="TAB 8">Content 8</smart-tab-item> <smart-tab-item label="TAB 9">Content 9</smart-tab-item> <smart-tab-item label="TAB 10">Content 10</smart-tab-item> <smart-tab-item label="TAB 11">Content 11</smart-tab-item> </smart-tabs> </body>If you have further questions feel free to ask.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.comKeymasterHi john1987,
To achieve this behavior, you can set pointer-events: none; to this particular item.
This will disable the interaction with it.
Best Regards,
Ivailo
Smart HTML Elements Team
https://www.htmlelements.comKeymasterHi AL,
Please try using smart-gauge configured as follows:<smart-gauge analog-display-type="fill" digital-display digital-display-position="center" start-angle="0" end-angle="180" min="1" max="500" value="2" logarithmic-scale show-ranges ranges='[{ "startValue": "1", "endValue": "20", "className": "calm" }, { "startValue": "200", "endValue": "500", "className": "danger" }]'></smart-gauge>You can style the “calm” and “danger” zones as follows:
<style type="text/css"> .calm { fill: darkseagreen; } .danger { fill: crimson; } </style>Best Regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.comKeymasterHi Aleksandar,
You can do so by calling the update method, i.e.:
document.querySelector('smart-list-box').update(0, 'Order 1 (sold)');
Best Regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.comKeymasterThank you Dimitar!. I have gone astray 🙂 it is my mistake.
This is greate But I have another question. How can I update one particular item?
For example I want to change the “Order 1” to “Order 1 (sold)”.
–Aleksandar LaskinKeymasterHi Ivailo,
Maybe I will spend more time to search how to make this style change. This doc is very useful! Thanks!
Now I have another question. Can I make it this with some toggle button or something? Becouse I want to change text of the button of in one case and in another to be different.
–Aleksandar LaskinKeymasterHi Christopher,
Thank you for this example. I will use this native way.
–Aleksandar LaskinKeymasterHi Aleksandar,
If you want to change button’s background color and color, please, set the following CSS variables:--smart-background-color: #55719e; --smart-color: white;More information about button’s CSS styling can be found here:
https://www.htmlelements.com/docs/button-css/
Best Regards,
Ivailo
SmartElements Team
http://www.htmlelements.comKeymasterHi Aleksandar,
Here is how to set the dataSource property as an attribute:
<smart-list-box data-source='["Order 1", "Order 4"]'></smart-list-box>
Note that when setting properties as attributes, they have to be in dash-case (not in CamelCase), i.e. data-source, not dataSource.
Best Regards,
Dimitar
SmartElements Team
http://www.htmlelements.comKeymasterHi pcng618,
In order to change the content of the Tooltip dynamically you need to set the innerHTML property of the Tooltip instance. To change it when clicking on a button you have to bind to it’s click event and simply set the new content to the innerHTML property of the Tooltip. Here’s an example:<head> <script> window.onload = function () { var tooltip = document.querySelector('smart-tooltip'); document.getElementById('myButton').addEventListener('click', function (event) { document.getElementById('tooltip').innerHTML = 'The button is clicked !'; }) } </script> </head> <body> <smart-button id="myButton"></smart-button> <smart-tooltip id="tooltip" selector="myButton">Some Random Text</smart-tooltip> </body>Best Regards,
Christopher
SmartElements Team
http://www.htmlelements.com -
AuthorPosts