add responsive button view ( mobile, tablet, desktop ) in code example block

[gi4no]

Closes #

📑 Description

adding three view toggle buttons: Mobile, Tablet, and Desktop; same as https://flowbite.com/ code preview.
adding also the meta hideResponsiveButton for hide buttons when don't need it

Status

• Not Completed
• Completed

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• I have checked the page with https://validator.unl.edu/
• All the tests have passed
• My pull request is based on the latest commit (not the npm version).

ℹ Additional Information

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[shinokada]

cc: @jjagielka

Flowbite site uses iFrame and Flowbite-Svelte doesn't. This means some of components are not suitable for this.

Using this PR, some of examples will have a problem:

• docs/components/card#Horizontal_card
• docs/components/card#Testimonial_card
• docs/components/device-mockups#Desktop_mockup This one should be a smaller size.
• docs/components/device-mockups#Laptop_mockup This one should be a smaller size.
• docs/components/device-mockups#Tablet_mockup This one should be a smaller size.
• docs/components/mega-menu#Full_width_with_CTA
• and more

We need to add the hideResponsiveButton for those examples.

[gi4no]

@shinokada

I actually didn't think that media queries wouldn't work;
if the pr doesn't bring any improvement you can simply reject it 😀

[shinokada]

I meant we need to use this example by example since some of them break the style.

[gi4no]

@shinokada
I've reviewed all the examples of the components and added the hideResponsiveButtons meta where I believe it's unnecessary (e.g., for headings) or where it was break the style.
I've also rename the meta from hideResponsiveButton to hideResponsiveButtons for consistency.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 10, 2023 1:03pm
flowbite-svelte-update	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 10, 2023 1:03pm

[shinokada]

Thank you for your PR.
It's merged.
I look forward to seeing more PRs in the future.

[shinokada]

I think the current code doesn't give any benefits of having responsive buttons since the styles don't change.
All the examples having responsive buttons do not change any styles.
Is there any way to make it responsive?

[gi4no]

The only solution would be to implement an iframe similar to what's used on the flowbite.com website. While Tailwind CSS also offers container-based breakpoints, this approach presents issues when working with the components directly. I conducted some experiments to generate iframes using the current codebase and successfully replicated the components within the iframe. However, the JavaScript logic (such as clicks, etc.) is missing. Do you believe it would be possible to reach out to the creators of the mdsvex library and inquire if they can provide a solution for this matter?

[gi4no]

@shinokada

I believe I've come up with a creative solution! 😱
What's the best way to shot it to you? Should I open a new PR?

[shinokada]

Yes, please create a PR.

[shinokada]

@gi4no Can you have a look at this issue, please?
#1125 (comment)