TW Elements UI Kit/Library
Bootstrap components recreated with Tailwind CSS, but with better design & more functionalities
TWE package went through a serious refactoring and unification process. We have changed a lot of things to make TWE more consistent and easier to use. Our team has also addressed lots of issues and improved the overall customization options for our components.
Breaking changes:
- Changed name te to twe in data attributes, events, methods etc.
- Unified event and method names, added new events, removed some methods
- Changed package file structure
- Charts became a separate file - removed dynamic import and built as a different module
- Deleted most arbitrary classes across all components and replaced them with Tailwind CSS or custom TWE classes - extended plugin
- Improved RTL support in our package
- Added unit tests for all components in the package
Migration Guide:
To make the transition to TWE v2 easier we prepared a list of changes needed in existing projects, which you can find in the Migration guide.
Design updates:
Implemented a comprehensive theming system that extends across all components, allowing for greater customization and visual coherence throughout the package.
New features:
- Updated paths in tailiwnd.config.js snippets - changes connected with package file structure
- Added Icons Integration tutorial
- Updated Django Integration tutorial - added initializing via JS section
- Added Qwik Integration tutorial
- Added ASP.NET Integration tutorial
- Added Class customization tutorial
- Extended shadows
- Updated icons across all components
Alert and Toast - added new functionalities and new examples:
- position, container and offset options
Stepper - added new functionalities and new examples:
- Validation functionalities in Linear Stepper - default HTML validation and with Validation component
Mobile Stepper - stepperMobileBackBtn, stepperMobileBackBtnIcon, stepperMobileBarBreakpoint, stepperMobileNextBtn, stepperMobileNextBtnIcon, stepperMobileOfTxt and stepperMobileStepTxt options
- Possibility to toggle to Vertical or Mobile Stepper on smaller screens - stepperMobileBreakpoint, stepperVerticalBreakpoint
- data-twe-stepper-optional attribute which marks a step as optional
- stepperHeadClick options which block the possibility of changing a step by clicking on another step
Scrollspy - added new functionalities and new examples:
- collapsible and smooth scroll options
Search - added new examples
Spinner / Loader - added new examples
Content & Styles:
Animations - removed init and autoInit methods
Navigation:
Sidenav:
- Fixed an issue with Ripple in the update method
- Fixed wrong data attribute name for active sidenav state
- Added a data-twe-sidenav-slim-active attribute that changes upon switching from full to slim sidenav
Components:
Carousel:
- Fixed jQueryInterface and dispose methods
- Fixed an issue with not triggering interval when the ride option is true and slides are manually changed (e.g. via the next method)
- Fixed an issue with initialization via JS without data-twe-carousel-init which made the component not animate when changing slides
Chips - Fixed dispose method and add.twe.chips event
Popconfirm
- Added FocusTrap
- Fixed an issue with scrolling in Popconfirm modal - disabled scrolling when the modal is opened and restored it when the modal is closed
- Fixed the way of adding event listeners, the cancel event and dispose method
Rating - Fixed dispose method
Tooltip and Popover - updated default component template
Forms:
Autocomplete:
- Fixed an issue with clicking on No results found field
- Added offset option which allows to customize the popper offset
- Fixed issues with input focus after closing the dropdown on the ESC key
- Fixed toggling aria-expanded value
Select:
- Fixed toggling aria-expanded value
- Fixed an issue with Multiselect with labels - after opening the dropdown the middle notch had a border top
- Fixed an issue where after filtering options and closing the dropdown, the setValue method was not functioning and caused the select to malfunction upon reopening
Data:
Charts - made the config parameter optional within the update method
Datatables - fixed wrong element and method in PerfectScrollbar usage
Utils:
_Backdrop _- fix an issue with undefined class
TW Elements 2.0 - Check it out here
Top comments (0)