Closed Greendogo closed 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. :)
This is great, can you add this to the List documentation here? https://antoniandre.github.io/wave-ui/w-list
@antoniandre :)
Also, what effect does adding the w-flex class have? I didn't know I could do that, is that in the documentation somewhere?
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. ;)
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 :)
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.