Page 59 – Smart UI Components

@boikom

Forum Replies Created

Viewing 9 posts - 871 through 879 (of 879 total)

← 1 2 3 … 57 58 59

Author

Posts
June 19, 2018 at 7:47 am in reply to: Disable some of the Accordion items #98897

admin
Keymaster

Hi 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.com

June 15, 2018 at 12:47 pm in reply to: Gauge with big range amplitude #98889
admin
Keymaster
Hi 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.com
May 16, 2018 at 11:26 am in reply to: set items internally #98855

admin
Keymaster

Hi 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.com

May 16, 2018 at 6:09 am in reply to: set items internally #98854

admin
Keymaster

Thank 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 Laskin

May 16, 2018 at 6:00 am in reply to: How to change the text color #98853

admin
Keymaster

Hi 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 Laskin

May 16, 2018 at 5:42 am in reply to: Dynamic change content of Tooltip #98852

admin
Keymaster

Hi Christopher,
Thank you for this example. I will use this native way.
–Aleksandar Laskin

May 15, 2018 at 1:41 pm in reply to: How to change the text color #98851
admin
Keymaster
Hi 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.com
May 15, 2018 at 12:57 pm in reply to: set items internally #98850

admin
Keymaster

Hi 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.com

May 15, 2018 at 8:24 am in reply to: Dynamic change content of Tooltip #98843
admin
Keymaster
Hi 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
Author

Posts

Viewing 9 posts - 871 through 879 (of 879 total)

← 1 2 3 … 57 58 59