bootstrap-5-vertical-tabs - npm Package Compare versions

Comparing version 1.0.4 to 2.0.0

dist/sha384.txt

@@ -1,1 +0,1 @@
-Ksm4tDVTxHLhHhuQck8XWxrJ/FD2AOykMNuFI21j/5yEpz18TaaiwsT/w33ZiPkl
+AsoWNxsuu73eGp2MPWHa77155fyqP9rueKOeG4t2d/AD4eyBqL20TClzfbAkrul4

package.json

 {
   "name": "bootstrap-5-vertical-tabs",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "Responsive vertical tabs navigation component for Bootstrap 5",
-  "main": "index.html",
+  "main": "./dist/index.html",
+  "jsdelivr": "./dist/b5vtabs.min.css",
   "scripts": {
@@ -7,0 +8,0 @@ "build-dev": "npm run css-compile && npm run css-minify",

README.md

 # Responsive Vertical Navigation Tabs for Boostrap 5
 
-[![Build Status](https://app.travis-ci.com/tromgy/bootstrap-5-vertical-tabs.svg?branch=main)](https://app.travis-ci.com/tromgy/bootstrap-5-vertical-tabs)
+[![Build Status](https://app.travis-ci.com/tromgy/bootstrap-5-vertical-tabs.svg?branch=main)](https://app.travis-ci.com/tromgy/bootstrap-5-vertical-tabs) [![Netlify Status](https://api.netlify.com/api/v1/badges/b946eebf-a6de-4337-b6d2-de46cb9989d8/deploy-status)](https://app.netlify.com/sites/b5vtabs/deploys)
 
@@ -11,2 +11,6 @@ A stylesheet that implements [vertically-oriented navigation tabs](https://b5vtabs.netlify.com) with Bootstrap 5.
 
+## Version 2 changes
+
+Now when the view becames very narrow (e.g. when viewing on a smartphone) the tabs turn into an accordion instead of nav-pill like buttons. This should provide a better mobile experience.
+
 ## Installation
@@ -22,3 +26,5 @@
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/bootstrap-5-vertical-tabs@1.0.4/dist/b5vtabs.min.css" integrity="sha384-Ksm4tDVTxHLhHhuQck8XWxrJ/FD2AOykMNuFI21j/5yEpz18TaaiwsT/w33ZiPkl" crossorigin="anonymous"
+    href="https://cdn.jsdelivr.net/npm/bootstrap-5-vertical-tabs@2.0.0/dist/b5vtabs.min.css"
+    integrity="sha384-AsoWNxsuu73eGp2MPWHa77155fyqP9rueKOeG4t2d/AD4eyBqL20TClzfbAkrul4"
+    crossorigin="anonymous"
 />
@@ -53,6 +59,14 @@ ```
 
-- `$horizontal-tabs-min` - if the view is narrower than this value, horizontal tabs turn into nav-pills-like buttons:
+- `$horizontal-tabs-min` - if the view is narrower than this value, horizontal tabs turn into an accordion:
 
-<img src="vtabs-narrow.png" alt="nav-pills at narrow view width" width="220">
+<img src="vtabs-narrow.png" alt="accordion at narrow view width" width="360">
 
+**NOTE:** If you expect some long text in your tabs, wrap it in a block element with the `ellipsis` class inside the accordion `<button>`:
+
+```HTML
+<div class="ellipsis">
+  Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
+</div>
+```
+
 - `$fixed-tab-size` - specify this based on the expected text length to be displayed on the tabs.
@@ -66,3 +80,3 @@ A (long) text that (always) fits into a vertical tab, will get ellipsis-_ed_ when it doesn't fit into
 
-changing the value of this variable can allow you to control if and how tab captions might be truncated. The recommended values are between 4 and 12 rem.
+changing the value of this variable can allow you to control if and how tab captions might be truncated. The recommended values are between 4 and 12 rem. Once that is set, the ellipsis-_ing_ for tabs takes place automatically without the need for any additional classes.
 
@@ -100,4 +114,13 @@ - `$left-tabs-text-align` and `$right-tabs-text-align` - these specify the text alignment for vertical left/right tabs.
 
-The **index.html** file in the **dist** directory illustrates all four styles. 
+There are few additional classes that you need to use:
 
+- `vtabs` -- add this class to the element that contains all vertical tabs. This establishes a scope for modifications applied to some of the Bootstrap's classes.
+
+- `ellipsis` -- add this to this to a block child of the `<button>` elements used in the accordion implementation if your text is too long to fit the button.
+
+- `tab-clickable` -- add this to the block element that renders the tab. This is necessary because
+Bootstrap 5 uses `<button type="button">` for tabs, but `<button>` doesn't work for vertical orientation, and applying `type="button"` to another element (e.g. `<div>`) will render it in Safari as an "early 21st century style" button, with gray gradient, border, etc. Therefore don't set `type="button"`, but use this class instead.
+
+Use the **index.html** file in the **dist** directory as a template for your own application.
+
 You can also see the [live demo](https://b5vtabs.netlify.com).

No alert changes

Improved metrics

Total package byte prevSize

1069786

increased by0.27%

Number of lines in readme file

122

increased by23.23%

Worsened metrics

Lines of code

18

decreased by-14.29%

No dependency changes