Products

[admin]

Hi guerlloy,
Thank you for your detailed feedback. This issue will be resolved in the next release of Smart HTML Elements.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com/

[admin]

As the theme file is:

body[theme="dark-red"] {
 	--smart-primary-rgb: 221, 44, 0;
    --smart-primary: rgba(var(--smart-primary-rgb), 1);
    --smart-background: #242424; /* The theme background color. The background color appears behind scrollable content.*/
    --smart-background-color: #fff; /* Text color on top of a background background */
    --smart-surface: #333; /* The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus. */
    --smart-surface-color: #fff; /* Text color on top of a surface surface */
    --smart-disabled: #535353; /* The theme primary color in disabled state. */
    --smart-disabled-color: #fff; /* Text color on top of a theme background in disabled state */
    --smart-border: #464646; /* The theme background border color */
    --smart-editor-selection: var(--smart-primary);
    --smart-editor-selection-color: var(--smart-primary-color);
    --smart-ui-state-hover: #444;
    --smart-ui-state-color-hover: #fff;
    --smart-ui-state-border-hover: #444;
    --smart-ui-state-active: var(--smart-primary);
    --smart-ui-state-color-active: var(--smart-primary-color);
    --smart-ui-state-border-active: var(--smart-primary);
    --smart-ui-state-focus: #555;
    --smart-ui-state-color-focus: #fff;
    --smart-ui-state-border-focus: #555;
    --smart-ui-state-selected: rgba(var(--smart-primary-rgb), .1);
    --smart-ui-state-color-selected: var(--smart-primary);
    --smart-ui-state-border-selected: rgba(var(--smart-primary-rgb), .1);
    --smart-alternation-index0-color: var(--smart-surface-color); /* Alternation color for index0 */
    --smart-alternation-index0-border: var(--smart-surface); /* Alternation border color for index0 */
    --smart-alternation-index0-background: var(--smart-surface); /* Alternation background color for index0 */
    --smart-alternation-index1-color: #111; /*Alternation color for index1 */
    --smart-alternation-index1-border: #9BBB59; /* Alternation border color for index1 */
    --smart-alternation-index1-background: #9BBB59; /* Alternation background color for index1 */
    --smart-alternation-index2-color: #fff; /*Alternation color for index2 */
    --smart-alternation-index2-border: #FC3752; /* Alternation border color for index2 */
    --smart-alternation-index2-background: #FC3752; /* Alternation background color for index2 */
    --smart-scroll-bar-background: #3E3E42;
    --smart-scroll-bar-border: #3E3E42;
    --smart-scroll-bar-thumb-background: #686868;
    --smart-scroll-bar-thumb-border: #686868;
    --smart-scroll-bar-thumb-background-hover: #9E9E9E;
    --smart-scroll-bar-thumb-border-hover: #9E9E9E;
    --smart-scroll-bar-thumb-background-active: #444;
    --smart-scroll-bar-thumb-border-active: #444;
    --smart-scroll-bar-button-background: #3E3E42;
    --smart-scroll-bar-button-border: #3E3E42;
    --smart-scroll-bar-button-color: #999999;
    --smart-scroll-bar-button-background-hover: #3E3E42;
    --smart-scroll-bar-button-border-hover: #3E3E42;
    --smart-scroll-bar-button-color-hover: var(--smart-primary);
    --smart-scroll-bar-button-background-active: #3E3E42;
    --smart-scroll-bar-button-border-active: #3E3E42;
    --smart-scroll-bar-button-color-active: var(--smart-primary);
}

it expects a theme attribute set to the document’s body tag.
Hope this helps you.
Best Regards,
Boyko

[admin]

Hi edwardsmarkf,
As per https://www.htmlelements.com/docs/accordion-api/, we do not have API for showing/hiding accordion items.
We will consider adding additional properties of accordion items in future releases.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Gerhard Seemann,
You can try:

grid.appearance.placeholder = "some text";

Best Regards,
Peter
Smart UI Team
https://www.htmlelements.com

[admin]

Hi,
The icons of the components and other external resources such as images(.png, .jpg, etc) will not be loaded in the codepen examples.
Regards,
Peter
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,
The accordion is a layout type of component, similar to tabs. It does not have ui virtualization as its purpose is different. For your scenario, we think you will need a custom component or a different type at least.
P.s. please, do not post links to third party websites on the forum as we will need to remove them.
Regards,
Peter

[admin]

Hi Arthur Charnier,
The next version is expected to be released the last week of June.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hello Arthur Charnier,
Thank you for your feedback. This functionality will be available to Smart.Table in the next version of Smart HTML Elements.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi,
The binding as shown in the online samples and docs is to array. A native JS API such as fetch, or XMLHttpRequest can be used for AJAX calls, and then on load you can bind to Array.
Regards,
Peter
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,
We do not have built-in API for scrolling in the Accordion. scrollIntoView as a browser API is an option(https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView).
Regards,
Peter
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,
Whether you can collapse all or expand all items depends on the value of the expandMode property of the Accordion component. In some modes such as the default you, there is always at least one opened Accordion item. You need to set the expandMode to “multiple” in order to expand all or collapse all.
Regards,
Peter
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,
yes that helped. Thank you a lot!
Best regards,
Gerhard

[admin]

Hi Gerhard,
With mapping, you can use:

var data = [
  {text1: 'abcde', object: {num1: 123}},
  {text1: 'abcde', object: {num1: 123}},
  {text1: 'abcde', object: {num1: 123}},
  {text1: 'abcde', object: {num1: 123}},
  {text1: 'abcde', object: {num1: 123}}
];
Smart('#grid', class {
                    get properties() {
                        return {
                            dataSource: new Smart.DataAdapter({
                                mapChar: '.',
                                dataSource: data,
                                dataFields: [
                                    {name: 'text1', dataType: 'string'},
                                    {name: 'num1', map: 'object.num1', dataType: 'number'}
                                ]
                            }),
                            columns: [
                                { label: 'Text 1', dataField: 'text1' },
                                { label: 'Number', dataField: 'num1' },
                            ]
                        }
                    }
                });

Hope this helps.
Regards,
Peter
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Peter,
thank you! Now I can define it like that. But it doesn’t solve my mapping problem.
https://codepen.io/captaingerhard/pen/WNQLzyQ?editors=0010
Is the attribute ‘map’ wrong, too?
 
Regards,
Gerhard

[admin]

Hi Gerhard,
You can use this:

   dataSource: new Smart.DataAdapter({
                                dataSource: data,
                                dataFields: [
                                    {name: 'text1', dataType: 'string'},
                                    {name: 'object', dataType: 'string'}
                                ]
                            }),
                            columns: [
                                { label: 'Text 1', dataField: 'text1' },
                                { label: 'Object', dataField: 'object' },
                            ]

Regards,
Peter
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts