Nevertheless! Party Metaphorically

    vj-top-bar

    1.0.2 • Public • Published

    vj-top-bar

    To use horizontal top header bar with logo & menu links

    Install

     npm install vj-top-bar -S
    

    Usage

    <!-- Image URL -->
        <vj-top-bar logo="https://cdn.pixabay.com/photo/2017/02/15/20/58/ekg-2069872_1280.png">
          <span class="logo-title" slot="logo_title">VJ-Topbar</span>
        </vj-top-bar>
     
    <!-- Empty logo -->
        <vj-top-bar logo="">
          <span class="logo-title" slot="logo_title">VJ-Topbar</span>
        </vj-top-bar>
        
    <!-- Relative path Image -->
        <vj-top-bar logo="./assets/images/eat_code.jpg">
          <span slot="logo_title">VJ-Topbar</span>
        </vj-top-bar>

    Logo Title

        <span slot="logo_title">VJ-Topbar</span>
    // To assign links & config attributes of vj-top-bar Web component
    const topBar = document.getElementsByTagName('vj-top-bar');
    if (topBar && topBar.length && topBar[0]) {
        const element = topBar[0];
        const config = {
            'bg-color': '#de6b6b'
        };
        element.setAttribute('config', JSON.stringify(config));
        element.setAttribute(
            'links',
            `${JSON.stringify([
            { address: '#grey', anchorText: 'Grey' },
            { address: '#red', anchorText: 'Red' },
            { address: '#blue', anchorText: 'Blue' }
            ])}`
        );
    }
    <script>
     
    </script>

    Attributes

    logo

    Accepts logo image in any one of the format (Url, relative path). Else default logo will be shown.

    config

    For configuring such as background-color of top-bar

    links

    For having menu links which expects an array of objects each object has address and anchorText properties

    License

    MIT © Srinivasan K K

    Install

    npm i vj-top-bar

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    34 kB

    Total Files

    5

    Last publish

    Collaborators

    • srinivasankk