Flowbite-svelte comments

[plasmatech8]

1) Cannot change color of NavUl. Had to add custom classes with primary color class.

<NavUl {hidden} class="order-1" color="primary">
        {#each navLinks as link}
            <NavLi
                href={link.href}
                active={link.href === $page.url.pathname}
                activeClass="text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent"
                nonActiveClass="text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
                >{link.name}</NavLi
            >
        {/each}
    </NavUl>

2) When you change screen to mobile size, then click on hamburger menu, then resize back to normal web size, Tailwind classes are added and it gets stuck looking like this. The hidden attribute adds these classes, and they cannot be modified or changed.

https://user-images.githubusercontent.com/40431112/211151671-bddf957c-b52e-4fb1-8085-3e000b260bda.mov

3) There is no border-bottom in the navbar. It is different from the default flowbite navbar as shown in the vanilla flowbite website. The regular flowbite navbar has two borders which give a 2 pixel faded border effect. But the border does not exist on the flowbite-svelte component (it is also hard to add double-borders easily).

[plasmatech8]

It is impossible to change the outline color of the search input

<div class="flex">
    <Search size="md" placeholder="Search redstone builds" class="focus:outline-primary-600" />
</div>

---

Edit: it is possible to change the ring color using:

<Search
    size="md"
    placeholder="Search redstone builds"
    class=" focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500"
/>

---

Update: This class hack should do the trick:

class="focus:!border-primary-500 focus:!ring-primary-500 dark:focus:!border-primary-500 dark:focus:!ring-primary-500"

[plasmatech8]

navbar and navul is a bit confusing with ordering. I cannot figure out how to put the NavUI and other elements on the rights side together in a single div, without screwing up the mobile version of the NavLi dropdown. It looks like I cannot use the same NavUl for both mobile and desktop version if I need to put it in a parent container.

[plasmatech8]

It is difficult to style the darkmode and navhamburger so they look the same. They are different sizes, have different rings, and I cannot figure out why they don't look the same after making the btn classes the same.

https://user-images.githubusercontent.com/40431112/211145071-21d08932-df16-4f1e-bd56-8b9ad9f46d91.mov

[plasmatech8]

It is a little bit annoying having to search the documentation to find the default classes, and copy the entire class string, when I really need to just add one class to the class list - or override one class.

[plasmatech8]

Cannot figure out how to add spacing so that there is margin between the target and the avatar - so that it does not overlap with the navbar.

Using data-popover-offset="100" on the button does not make any difference.

---

Update: Using offset="30" on the Dropdown component works. Docs show the Popover inherits from Popper which has an offset prop.

It is annoying that intellisense does not show a lot of props available for components.

[plasmatech8]

Something worth noting:

If your dropdown target button is removed from the DOM, and then added back in. With an if directive like below:

        {#if signedIn}
            <Button
                btnClass="h-10 aspect-square text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
                ><i class="fa-solid fa-plus" /></Button
            >
            <Avatar
                id="avatar-menu"
                src={user.avatarUrl}
                class="focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700"
            />
        {:else}
            <Button color="primary" on:click={() => (signedIn = true)}>Sign In</Button>
        {/if}
    </div>
    <Dropdown placement="bottom-end" triggeredBy="#avatar-menu">
        <DropdownHeader>
            <span class="block text-sm"> Bonnie Green </span>
            <span class="block truncate text-sm font-medium"> name@flowbite.com </span>
        </DropdownHeader>
        <DropdownItem>Dashboard</DropdownItem>
        <DropdownItem>Settings</DropdownItem>
        <DropdownItem>Earnings</DropdownItem>
        <DropdownDivider />
        <DropdownItem on:click={() => (signedIn = false)}>Sign out</DropdownItem>
    </Dropdown>

Then it will not work.

You need to either put the dropdown in the if block or inside a key block to re-render the component so that the dropdown logic works.

[plasmatech8]

Carousel:

• Does not look correct by default
• When autoplay duration is set, it is annoying that the timer does not reset when the user clicks one of the buttons.
• The image does not fit the carousel by default
• Cannot change the object-fit for the image
• Cannot change the style of the slide controls
• No class attribute. Need to put component in a wrapper to change the size. (changing divClass does not change position of controls and border radius)
• Not customizable with extra content within the carousel. (i.e. text, description, author)
• Cannot figure out how to get transitions to work
• Not possible to show multiple items (i.e. see this https://vadimkorr.github.io/svelte-carousel/)

[plasmatech8]

Cannot figure out how to change the width of a Horizontal card

[plasmatech8]

Not related: Tried using blurhash but looks like you need a canvas element. Also, the svelte blurhash library that I looked at is client side + has no declaration files. It would be nice if we could have a lazy loading blur hash.

[plasmatech8]

checkbox color prop does not work properly. Cannot use custom color like "primary", it only allows a certain set of colors.

[plasmatech8]

Type error.

Expects a ListGroupItemType[], but list returned is FileList. Example from docs do not work in typescript.

Even if I do a conversion, it shows:

[plasmatech8]

Select component error ???

[plasmatech8]

File upload: when "multiple", there appears to be a thicker ring/border than single for some reason.

[plasmatech8]

It is annoying and inconvenient that the Input component has the value prop, but it is difficult to bind to a variable because the typescript types is string | number | undefined. :(