qwikifiers / qwik-storefront-ui Goto Github PK

View Code? Open in Web Editor NEW

34.0 3.0 8.0 11.02 MB

A frontend library for Qwik that helps developers quickly build fast, accessible, and beautiful storefronts.

Home Page: https://qwik-storefront-ui.pages.dev/

License: MIT License

Shell 0.04% TypeScript 88.01% JavaScript 4.53% SCSS 1.18% CSS 0.01% Vue 6.17% HTML 0.07%

qwik storefront uikit

qwik-storefront-ui's Introduction

Qwik UI library and Design System for eCommerce based on TailwindCSS.

qwik-storefront-ui's People

Contributors

Stargazers

Watchers

Forkers

thecoder93 sarvex dalibor67 daniela-bonvini riccardo-vettore alexcevi fabiobiondi matteo-gobbo

qwik-storefront-ui's Issues

chore: fix code tab in block pages

LinearLoader playground not working

Modal playground doesn't work

Modal playground doesn't work and the component works, but it's half implemented

ProgressLinear playground not working correctly

Missing styles for default usage of some components

Im trying the examples in the documentation, but Im not getting the default styles for any of the components.

In the code below I'm using the buttons example, but the styles only appear when I add as={Link}. In the html output, It seems like qwik its not adding classes by default. This does not seem to be the intended behavior, any ideas?

src:

<div class="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
    <SfButton type="button" size="sm">
       Button-a 
    </SfButton>

    <SfButton type="button" size="base">
       Button-b
    </SfButton>

    <SfButton as={Link} type="button" size="lg">
        Button-c
     </SfButton>
</div>

renderd:

html:

<div class="flex flex-col items-center space-y-4 xs:block xs:space-x-4" data-qwik-inspector="routes/layout.tsx:78:5">
   <!--qv q:id=p q:key=IF0j:4h_6-->
   <button data-testid="button" q:key="6X_3">
      <!--qv q:s q:sref=p q:key=-->Button-a<!--/qv-->
   </button>
   <!--/qv--><!--qv q:id=q q:key=IF0j:4h_7-->
   <button data-testid="button" q:key="6X_3">
      <!--qv q:s q:sref=q q:key=-->Button-b<!--/qv-->
   </button>
   <!--/qv--><!--qv q:id=r q:key=IF0j:4h_8--><!--qv q:id=s q:key=8gdL:6X_3-->
   <a data-testid="button" type="button" class="inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-md disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed py-3 leading-6 px-6 gap-3 text-white shadow hover:shadow-md active:shadow bg-primary-700 hover:bg-primary-800 active:bg-primary-900 disabled:bg-disabled-300" on:click="/src/link_component_handleclick_event_i1cv0pyjnr0.js#Link_component_handleClick_event_i1Cv0pYJNR0[0 1 1 1]" q:key="AD_1" q:id="t">
      <!--qv q:s q:sref=s q:key=--><!--qv q:s q:sref=r q:key=-->Button-c<!--/qv--><!--/qv-->
   </a>
   <!--/qv--><!--/qv-->
</div>