search

antoniandre / wave-ui

A UI framework for Vue.js 3 (and 2) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
546 stars 41 forks source link

Add nav to w-tabs and w-toolbar similar to w-list #74

Closed Greendogo closed 2 years ago

Greendogo commented 2 years ago

This is fairly self explanatory, but I might want to use something horizontal as my navigation menu and using the "nav" property with Wave-UI is very simple with w-list.

antoniandre commented 2 years ago

Thank you for your request, it makes sense. But if you are only trying to have an inline navigation, I think w-list is still very tailored for that, and you can very easily apply a couple of CSS classes.

Based on the w-list nav example, I only added the classes w-flex and bd1 and it looks like what you are looking for.

<w-app id="app" block="block">
  <w-list class="w-flex bd1" :items="items" nav="nav" color="primary">
    <template #item="{ item }"><span>{{ item.label }}</span>
      <div class="spacer"></div>
      <w-icon class="ml2" md="md">{{ item.icon }}</w-icon>
    </template>
  </w-list>
</w-app>

Here is a demo for you: https://codepen.io/antoniandre/pen/dyVWbey?editors=1000

Hope it helps, please reopen if not solved. :)

Greendogo commented 2 years ago

This is great, can you add this to the List documentation here? https://antoniandre.github.io/wave-ui/w-list

Greendogo commented 2 years ago

@antoniandre :)

Greendogo commented 2 years ago

Also, what effect does adding the w-flex class have? I didn't know I could do that, is that in the documentation somewhere?

antoniandre commented 2 years ago

Hi @Greendogo, The w-flex class is documented here (and only adds display: flex; & flex: 1 1 auto; under the hood): https://antoniandre.github.io/wave-ui/layout--flex#w-flex-component-and-helper-classes.

And the border class is documented here: https://antoniandre.github.io/wave-ui/shadows-borders-radii

In addition, I have added this new page to make sure all the CSS classes are documented: https://antoniandre.github.io/wave-ui/layout--other-css-classes

Hope it helps. ;)

Greendogo commented 2 years ago

Ah, I missed the part where it says "the w-flex component and the .w-flex class both allow a flex layout". Thanks for pointing that out!

I still think you ought to add this horizontal list example to the List page, it will save some digging by the next several people who want to do something similar to myself in the future.

Thanks for the help!! I'm officially "helped" now! haha

If you have any thoughts on my other issue (#73 ) I'd love to get some feedback there :)