JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Buttons › basic usage

Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 21, 2020 at 4:24 pm #100705
    admin
    Keymaster

    I am using web components with Lit-Element.   In my index.html I have included the css
    <div>

    <div>  <link rel=”stylesheet” href=”../node_modules/smart-webcomponents-community/source/styles/smart.default.css” type=”text/css” /></div>

    </div>
    <div></div>
    <div>In one of my components I have imported the module for smart-button</div>
    <div>
    <div>

    <div>   import {smartButton} from ‘smart-webcomponents-community/source/modules/smart.button.js’;</div>

    <div>
    <div>
    <div>I have included the button in my template
    <smart-button @click=”${this.handleClick.bind(this)}”>Click me</smart-button></div>
    </div>
    <div>This is a screen shot of what appears</div>
    <div></div>
    </div>
    </div>
    </div>
    <div>It doesn’t look to me like the component is firing.   The onClick works, but the lack of styling makes me think that the component is not loading.   I use parcel, and when I run it does not complain about any missing dependencies.</div>
    <div></div>
    <div>Any ideas?</div>
    <div></div>
    <div></div>

    April 21, 2020 at 4:41 pm #100706
    admin
    Keymaster

    I got a reference to the button and inspected it in the console and it is indeed instantiated.   So it looks like I just need to dive into the style and theme settings as it is not applying any style whatsoever.   I expected the default look to match what is in the docs, but I guess not?  Anyway, if you see anything I am missing please let me know.
    We are very much looking to buy because we want the tree,  but I need to confirm the basic usage first.
     
    Thanks

    April 21, 2020 at 5:21 pm #100707
    admin
    Keymaster

    I just noticed that in the documentation for smart.button is says:

    “To initialize a button element the user has to include the following files to the head of the page:
    …
    smart.element.js – the base class
    …
    “

    What does it mean that I need to include the base class?  If I have <my-element> and inside that I want to use <smart-button>…  Does <my-element> need to extend smart.elements.js?    That can’t be right…  Do I just need to reference it from my index.html?  I will try that.
     

    April 21, 2020 at 5:24 pm #100708
    admin
    Keymaster

    …hmm the docs seem to be off a little.  In the doc for smart-button it says
    “Note how <b>smart.element.js</b> and <b>webcomponents.min.js</b> are declared before everything else. This is mandatory for all custom elements.”
    But the screen shot does not include them at all.

    April 21, 2020 at 5:30 pm #100709
    admin
    Keymaster

    Hi,
    These files are included in the button module.
    smart.button.js in modules is a bundle of the necessary files, one of which is smart.element.js. You may look at the online samples, too.
    As far as I see you’re using it with Lit Element which creates a Shadow DOM, then you should add the smart.default.css within that Shadow DOM. Otherwise, as the shadow dom is isolated, that will not allow the outside CSS to style elements in the shadow dom.
    Regards,
    Boyko

    April 21, 2020 at 6:07 pm #100710
    admin
    Keymaster

    Aha! Yes thank you that sounds very likely.
     
     
     
     

    April 21, 2020 at 6:30 pm #100711
    admin
    Keymaster

    Well it looks like I have a long day ahead of me.  I am following the instructions from lit-element on sharing styles but so far no joy.
    https://lit-element.polymer-project.org/guide/styles#sharing-styles
    Thanks for getting me facing in the right direction.

    April 21, 2020 at 8:50 pm #100712
    admin
    Keymaster

    IO am not having any luck getting the smart-button in shadowDom picking up shared styles using the method described here:
    https://lit-element.polymer-project.org/guide/styles#sharing-styles
    What is the ‘smart’ preferred method? or are they not intended to be used in shadowDom?

    April 22, 2020 at 5:56 am #100713
    admin
    Keymaster

    We support Shadow DOM. Smart is one of the first Web Components libraries and can be used for building Web Components.
    To use Smart with LitElement, you can use this approach:
    import { LitElement, html, css } from ‘lit-element’;
    Smart.EnableShadowDOM = true;
    export class SuperElement extends LitElement {
    static get styles() {
    return css`
    `;
    }
    render() {
    return html`
    <link rel="stylesheet" type="text/css" href="https://htmlelements.com/demos/source/styles/smart.default.css"&gt;
    <smart-button>Click me</smart-button>
    `;
    }
    }
    customElements.define(‘super-element’, SuperElement);
    Regards,
    Boyko

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.