Tabs and icons basic questions

  • Hello everyone,

    I am new to html/css.

    I have read the documentation of UIkit but can't seem to figure out how to display an icon in the content area.

    I would also like to create two tabs, each one of them having some text (attachment pic). Tabs should have links like example.com/tabs#tab1 and example.com/tabs#tab2

    Could someone point me to the right direction?

    Thanks in advance.

  • Hi again,


    You can read about the Tabs in "Tabs" Part of Core Documentation in UIkit2. But you also must read the "Switcher" Documentation https://getuikit.com/v2/docs/s…r.html#switcher-with-tabs

    here is the example:

    Code
    1.  <ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
    2. <li><a href="">Tab1</a></li>
    3. <li><a href="">Tab2</a></li>
    4. </ul>
    5. <ul id="my-id" class="uk-switcher uk-margin">
    6. <li>some Text</li>
    7. <li>some more Text</li>
    8. </ul>

    an this is the result:


    HAVE FUN :) STEFFEN

  • Code
    1.  <ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
    2. <li><a href="">Tab1</a></li>
    3. <li><a href="">Tab2</a></li>
    4. </ul>
    5. <ul id="my-id" class="uk-switcher uk-margin">
    6. <li>some Text</li>
    7. <li>some more Text</li>
    8. </ul>

    Thanks for the script.

    How to make so that no two tabs and for example five or six?

  • Oh, I figured it out. ^^


  • Here is the code of whatsapp button with opening live chat in web whatsapp
    The page opens in a new browser tab

    Code
    1. <li><a href="https://api.whatsapp.com/send?phone=my phone number" target="_blank" class="uk-icon-hover uk-icon-small uk-icon-whatsapp"></a></li>

    Maybe someone will be useful on the website :)

  • Code
    1. </p><i class="uk-icon-phone uk-icon-small uk-text-success"></i> <a href="tel:+7 777 777 7777" class="d-none d-lg-block header_tel">+7 (777) 777 777</a>

    And here is the code active links to phone numbers opening the app URL:Tel Protocol you on site :)