Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use other element instead of button for dropdown #18

Closed
Chappie74 opened this issue Oct 26, 2021 · 3 comments
Closed

Use other element instead of button for dropdown #18

Chappie74 opened this issue Oct 26, 2021 · 3 comments

Comments

@Chappie74
Copy link

Chappie74 commented Oct 26, 2021

Is it possible to use a custom element to trigger the dropdown?
I've tried multiple things, but it seems the top element is still using
Instead of a button, I want to use an icon. Or have customisation like the below image found in the old docs

image

Using that code snippet. This is how it currently shows up.

image

@alfonsobries
Copy link
Contributor

alfonsobries commented Oct 27, 2021

@Chappie74 the dropdown component have a tagName prop that you can use to define the tag that will wrap the trigger, if you want to change the content of the trigger you can use the trigger slot.

For example, let say that you want to use a div as the wrapper and add and span with an icon:

<t-dropdown tag-name="div">
<template #trigger>
<span class="wharver">Open me <SVG .... /></span>
</template>
<!-- content of the dropdown -->
</t-dropdown>

^ made that from memory but should work

@ch-henri
Copy link

ch-henri commented Nov 16, 2021

Thank you for your answer works great!
How can i specify a variant for the generated button ?

@Chappie74
Copy link
Author

Thanks. I ended up switching to daisy UI. Glad it helped someone else though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants