Product Compare Library
Product Compare is a library for product options, and product plans comparability. It helps a number of CSS frameworks and will be carried out in any HTML format utilizing knowledge attributes. The library incorporates an embedded touch-enabled gallery, helps native and session storage, and may examine by textual content, HTML, or numbers.
General Features
- Html Layout. The library has a versatile HTML format that helps any CSS framework.
- Data Types. It’s potential to match by totally different knowledge varieties: textual content, HTML, and numbers.
- Case Sensitivity. Case-sensitive and case-insensitive comparability is supported.
- Gallery. Responsive and touch-enabled gallery with the trendy Web Animation API.
- Storage Solutions. There is native storage, session storage, and cookies help.
- Documentation. Great and intensive documentation is included.
- Multiple Instances. It’s potential to have any variety of library cases on the identical web page.
- Cutting-Edge Tech. The library is written in TypeScript + ES6 JS and makes use of fashionable Web Animation API.
- Look & Feel. The person finally defines all look & really feel of the web page; Any HTML format or CSS will be configured and customised.
- Reset. The library helps reset buttons that may return the widget to its preliminary state.
Demo Pages
Product Compare is a library for making product options comparisons rapidly and simply. It is written in fashionable ES6 JavaScript + TypeScript and doesn’t have any exterior dependencies. Any CSS framework can be utilized for styling.
- Bootstrap CSS Framework Examples
- Tailwind CSS Framework Examples
- Bulma CSS Framework Examples
- UIKit CSS Framework Examples
- Foundation CSS Framework Examples
- CSS Examples (Without Frameworks)
Data Types
The library helps the next knowledge varieties:
- Text. The default comparability sort is textual content. The comparability will be case-sensitive or non-sensitive. Also, it’s potential to make use of regex to disregard some particular characters.
- HTML. HTML comparability can also be supported. The library can examine any HTML components like photographs, icons, or advanced HTML constructions.
- Numbers. The library can examine numeric knowledge. In this case, all different content material besides numbers shall be ignored.
Storage
The library helps storage to avoid wasting the present state and restore it after web page refresh or when the again button is pressed.
- Local storage – that is persistent storage that retains knowledge even when the person closes the browser.
- Session storage – it is going to be cleared when the browser session is over, sometimes when the person closes the browser.
- Cookies – not like native and session storage, cookie values can be utilized on the server too. It’s additionally potential to outline cookies’ expiration date.
- Deep Links – particular hyperlinks that ship customers immediately into the predefined drop-down choice state.
Gallery
The library incorporates a responsive and touch-enabled gallery with the trendy Web Animation API results.
- Mobile prepared and touch-enabled. The gallery HTML is absolutely responsive and customizable through knowledge attributes.
- CSS Frameworks. Works in any CSS framework or pure CSS. The library incorporates examples of 5 well-known CSS frameworks.
- Animation. The library makes use of a contemporary & environment friendly Web Animation API.
- CSS Classes. Dynamic CSS lessons for chosen, disabled, and hidden states.
Table
The library comparability desk is absolutely customizable and mobile-ready.
- Control Buttons. There are management buttons to cover and present equivalent rows, reset buttons, and likewise shut desk columns buttons.
- Fade Animation. There is a fade-in / fade-out animation on including and eradicating desk columns.
- Flexible HTML Layout. The desk HTML and kinds are extremely customizable by means of knowledge attributes.
- Selected Columns Number. It’s potential to outline the maximal variety of columns that may be chosen.
