Product Examine is a library for product options, and product plans comparability. It helps a number of CSS frameworks and could be carried out in any HTML format utilizing information attributes. The library incorporates an embedded touch-enabled gallery, helps native and session storage, and may evaluate by textual content, HTML, or numbers.
Basic Options
- Html Structure. The library has a versatile HTML format that helps any CSS framework.
- Information Varieties. It’s doable to match by totally different information 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 Internet Animation API.
- Storage Options. There’s native storage, session storage, and cookies assist.
- Documentation. Nice and intensive documentation is included.
- A number of Situations. It’s doable to have any variety of library cases on the identical web page.
- Slicing-Edge Tech. The library is written in TypeScript + ES6 JS and makes use of fashionable Internet Animation API.
- Look & Really feel. The consumer in the end defines all look & really feel of the web page; Any HTML format or CSS could be configured and customised.
- Reset. The library helps reset buttons that may return the widget to its preliminary state.
Demo Pages
Product Examine is a library for making product options comparisons rapidly and simply. It’s 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)
Information Varieties
The library helps the next information varieties:
- Textual content. The default comparability sort is textual content. The comparability could be case-sensitive or non-sensitive. Additionally, it’s doable to make use of regex to disregard some particular characters.
- HTML. HTML comparability can also be supported. The library can evaluate any HTML components like photographs, icons, or advanced HTML buildings.
- Numbers. The library can evaluate numeric information. On this case, all different content material besides numbers will likely be ignored.
Storage
The library helps storage to save lots of the present state and restore it after web page refresh or when the again button is pressed.
- Native storage – that is persistent storage that retains information even when the consumer closes the browser.
- Session storage – will probably be cleared when the browser session is over, usually when the consumer closes the browser.
- Cookies – not like native and session storage, cookie values can be utilized on the server too. It’s additionally doable to outline cookies’ expiration date.
- Deep Hyperlinks – particular hyperlinks that ship customers straight into the predefined drop-down choice state.
Gallery
The library incorporates a responsive and touch-enabled gallery with the trendy Internet Animation API results.
- Cellular prepared and touch-enabled. The gallery HTML is totally responsive and customizable through information 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 Internet Animation API.
- CSS Courses. Dynamic CSS lessons for chosen, disabled, and hidden states.
Desk
The library comparability desk is totally customizable and mobile-ready.
- Management Buttons. There are management buttons to cover and present equivalent rows, reset buttons, and in addition shut desk columns buttons.
- Fade Animation. There’s a fade-in / fade-out animation on including and eradicating desk columns.
- Versatile HTML Structure. The desk HTML and kinds are extremely customizable by way of information attributes.
- Chosen Columns Quantity. It’s doable to outline the maximal variety of columns that may be chosen.
