wetix/responsive-ui

WeTix responsive UI component set: https://link.wetix.my/responsive-ui

Responsive UI

WeTix responsive UI components.

🔨 Installation and Usage

npm:

npm install responsive-ui

yarn:

yarn add responsive-ui

✨ Features

• Responsive by default.
• Support ES Module and Common JS.
• Support Server-side Rendering.
• TypeScript and Sass as First Class Citizen.
• Compatible with Svelte and SvelteKit.

💅 Component List

• @responsive-ui/accordion
• @responsive-ui/action-sheet
• @responsive-ui/app-bar
• @responsive-ui/badge
• @responsive-ui/bottom-bar
• @responsive-ui/bottom-sheet
• @responsive-ui/button
• @responsive-ui/card
• @responsive-ui/checkbox
• @responsive-ui/chip
• @responsive-ui/column
• @responsive-ui/date-picker
• @responsive-ui/docker
• @responsive-ui/ellipsis
• @responsive-ui/fab
• @responsive-ui/header
• @responsive-ui/hscroll
• @responsive-ui/icon
• @responsive-ui/input
• @responsive-ui/input-number
• @responsive-ui/label
• @responsive-ui/loader
• @responsive-ui/modal
• @responsive-ui/poster
• @responsive-ui/quantity
• @responsive-ui/row
• @responsive-ui/select
• @responsive-ui/show-more
• @responsive-ui/snackbar
• @responsive-ui/switch
• @responsive-ui/table
• @responsive-ui/textarea
• @responsive-ui/tooltip

Sponsors

📄 License

responsive-ui is 100% free and open-source, under the MIT license.

🎉 Big Thanks To

Thanks to these awesome companies for their support of Open Source developers ❤

responsive-ui's Issues

Modal should have the 'x' icon without the header.

Currently if we want the 'x' icon we can set the closable props to true. However, the hasHeader must be true as well because the 'x' icons resides within the header. This is not desirable because it looks so empty if have no header content.

Improve `Quantity` component

Currently, Quantity component only expose onchange event, but this is not sufficient in user perspective, because sometime we need to know what's the step value for the current onchange event.

Suggest introducing a custom event.

Input number not triggering onchange event

Unexpected input type="number", it should trigger onchange event, but it doesn't. Possible fixes :

https://stackoverflow.com/questions/16111491/putting-text-in-a-number-input-doesnt-trigger-change-event
https://stackoverflow.com/questions/9609731/onchange-event-for-input-type-number

Auto-generate component type definition files

Items inside `Accordion` component alway `overflow: hidden`

Improve `AppBar`

Allow AppBar leadingItems have activeKey to indicate the selected path

`Menu` and `AppBar` menu anchors triggers browser navigation

`AppBar`: i should be able to view the subitems on the mobile menu

Quantity component huge width on firefox

Make it configurable

color mode (dark, light, custom color), breakpoints, border radius.
global level and individual component level

Tab inkbar overflow

Add documentation page

Refactor Bottom Sheet

• rename to action sheet
• refactor props

Refactor Bottom Modal

• rename to bottom sheet
• rethink the queue group
• refactor props

avoid using `querySelector` for unit tests

any preview?

as title

Loader component should have higher z-index than Modal component.

Modal still able to close by clicking overlay even after setting the closable prop to false

Revisit `z-index`

• Bottom Sheet - 996
• Action Sheet
• Modal - 997
• Bottom Bar
• App Bar
• Docker
• Tooltip - 998

fix deprecated packages

`AppBar` inkbar is not resizing while the browser resizing