Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
curvy-tabs
Advanced tools
See the demo.
<div class="curvy-tabs-container">
<div style="background-color:lightblue" name="Tab A">
Content for Tab A goes here.
</div>
<div style="background-color:lightgreen" name="Tab B">
Content for Tab B goes here.
</div>
</div>
As npm module:
var CurvyTabs = require('curvy-tabs');
From CDN:
<script src="https://unpkg.com/curvy-tabs@2.3/umd/curvy-tabs.js"></script>
<script src="https://unpkg.com/curvy-tabs@2.3/umd/curvy-tabs.min.js"></script>
Any SEMVER string can be used. 2.3
in the above means load the latest of the 2.3.* range. See the npm semver calculator and npm’s semantic versioning page.
CurvyTabs
constructorThe following instantiates the controller object, collecting all the content divs into a sub-div, and adds the tab bar (a canvas
element) above it:
var container = document.querySelector('.curvy-tabs-container'); // or whatever
var tabBar = new CurvyTabs(container, selectedContentElement); // 1st param required, 2nd optional
tabBar.paint();
The tabs are named after the content element names.
selectedContentElement
parameterThe first tab is selected by default but this can be overridden on instantiation by defining the optional 2nd parameter:
var selectedContentElement = container.querySelector('[name="Tab B"]');
var tabBar = new CurvyTabs(container, selectedContentElement);
CurvyTabs.version
static propertyContains the version string 2.3.1
(major.minor.patch of current version, with no leading v
).
CurvyTabs.prototype.getTab(idxOrNamOrEl)
methodTo get a content element by index or name.
For example, to get a reference to the 2nd tab’s content element:
var tab = tabBar.getTab(1); // by zero-based index (so 1 means 2nd tab)
var tab = tabBar.getTab('Tab B'); // by name
Note that tabBar.getTab(tab) === tab
.
CurvyTabs.prototype.selected
propertyTo specify some other tab, set selected
to a specific content element:
var tabB = tabBar.getTab(1); // by zero-based index
var tabB = tabBar.getTab('Tab B'); // by name
tabBar.selected = tabB;
CurvyTabs.prototype.select(idxOrNamOrEl)
methodOr, use the select
convenience method to set the selected
property:
tabBar.select(1); // by zero-based index
tabBar.select('Tab B'); // by name
tabBar.select(tabEl); // when you already have a reference to a tab element
CurvyTabs.prototype.clear(idxOrNamOrEl)
methodTo "clear" (removes all child elements from) the 2nd tab’s content element:
tabBar.clear(1); // by zero-based index
tabBar.clear('Tab B'); // by name
tabBar.clear(tabEl); // when you already have a reference to a tab element
All tabs are visible by default.
To hide the a tab, say the 2nd tab (“Tab B”):
display
style:
<style>
.curvy-tabs-container > div > :nth-child(2) { display: none } /* by one-based (!) indexed */
.curvy-tabs-container > div > [name="Tab B"] { display: none } /* by name */
</style>
tobBar.hide(1); // by zero-based index
tobBar.hide('Tab B'); // by name
CurvyTabs.prototype.hide(idxOrNamOrEl)
methodvar idxOrNamOrEl = 1; // by zero-based index
var idxOrNamOrEl = 'Tab B'; // by name
var idxOrNamOrEl = tabEl; // when you already have a reference to a tab element
tabBar.hide(idxOrNamOrEl);
Caveat: Attempts to hide the current tab are ignored with a console warning. Be sure to switch to a visible tab first.
CurvyTabs.prototype.show(idxOrNamOrEl)
methodtabBar.show(idxOrNamOrEl);
CurvyTabs.prototype.toggle(idxOrNamOrEl, isVisible)
methodTo hide if visible or show if hidden:
tabBar.toggle(idxOrNamOrEl);
The optional second parameter isVisible
forces visibility:
tabBar.toggle(idxOrNamOrEl, false); // same as tabBar.hide(idxOrNamOrEl)
tabBar.toggle(idxOrNamOrEl, true); // same as tabBar.show(idxOrNamOrEl)
CurvyTabs.prototype.curviness
propertyTo change the curviness of the tab outlines:
tabBar.curviness = 0; // not curvy at all, exactly like Chrome's tabs (prior to version 69)
tabBar.curviness = 0.5; // somewhat curvy
tabBar.curviness = 1; // fully curvy (default)
CurvyTabs.prototype.minWidth
propertyTabs are sized proportional to their labels. To make all tabs the same width:
tabBar.minWidth = 100; // Tabs whose text exceeds 100 pixels are widened to accommodate
CurvyTabs.prototype.font
propertyTo change the tab font:
tabBar.font = '12pt cursive'; // accepts full CSS font spec
CurvyTabs.prototype.size
propertyTo set the size (i.e., height) of the tabs (for example to accommodate outsized fonts):
CurvyTabs.size = 40;
tabBar.size = 40;
CurvyTabs.prototype.width
and CurvyTabs.prototype.height
propertyThe container must have a width and height. The default is 500 × 500 pixels.
<style>
.curvy-tabs-container { width: 750px; height: 1050px; }
</style>
tabBar.width = 750; // sets both the tab bar width and the container width
tabBar.height = 1050;
CurvyTabs.prototype.css
methodThe tab bar’s background color, border color, and border width affect both the tab bar and content area and can be set as follows:
<style>
.curvy-tabs-container > div {
border: 2x solid red;
background-color: yellow;
}
</style>
css
method (works like jQuery's css
method):
tabBar.css('borderColor', 'red'); // sets border color
tabBar.css('borderColor'); // returns border color
tabBar.css({ borderColor: 'yellow', backgroundColor: 'red' }); // sets both style properties
tabBar.css(['borderColor', 'backgroundColor']); // returns style dictionary
(Note that the tab bar’s background color is only visible through transparent tabs; there is no point in setting this if all your tabs have defined colors.)
CurvyTabs.prototype.contentCss
methodTo set styles on all the content divs at once:
<style>
.curvy-tabs-container > div > * { padding: 3px }
</style>
contentCss
method (also like jQuery's css
method):
tabBar.contentCss('padding', '2px');
CurvyTabs.prototype.container
propertyAn element (div.curvy-tabs-container
in the above) that contains this instance’s tabs.
CurvyTabs.prototype.contents
propertyA <div>...</div>
element, programmatically created by the constructor to group all tabs’ content elements (the container’s children).
CurvyTabs.prototype.forEach(iterator)
methodTo iterate through all the tabs’ content elements (contents.children
):
tabBar.forEach(function(tabEl) {
console.log(tabEl.getAttribute('name'));
});
The above logs:
Tab A
Tab B
See Array.prototype.forEach
for more information, including the definition of iterator
.
CurvyTabs.prototype.reset(save)
methodTwo overloads:
reset()
— Resets each tab to its visibility based on the value of its display
style at the time the tab was loaded, or the last time tabBar.reset(true)
was calledreset(true)
— Saves the state of each tab’s display
style for future reference by a reset()
call.tabBar.onclick
If defined as a function, this event handler will be fired on every click of any tab. The event object contains content
(a reference to the content element to be displayed, whose name
attribute is used as the tab label), left
(horizontal pixel location of left edge of tab, and width
(width of tab).
For example, either of:
tabBar.onclick = function(event) {
console.log('tab clicked:', event.content.getAttribute('name'));
};
tabBar.addEventListener('click', function(event) {
console.log('tab clicked:', event.content.getAttribute('name'));
});
event.preventDefault()
Calling event.preventDefault()
from this handler will prevent the clicked tab from being selected. Therefore, this is a way of disabling all tabs.
tab.onclick
In addition, each tab may also define its own event handler, fired only when that tab is clicked on.
For example, either of:
tabBar.getTab(0).onclick = function(event) { ... };
tabBar.getTab(0).addEventListener('onclick', function(event) { ... });
event.preventDefault()
As above, calling event.preventDefault()
from within will prevent the tab from being selected. This is a way of disabling just this specific tab.
event.stopPropagation()
The event will be propagated to the tabBar.onclick
handler (if defined) unless you call event.stopPropagation()
from within.
2.3.6
2.3.5
CurvyTabs.version
property.2.3.4
umd
folder for unpkg.com
CDN support for this and all future versions. See revised installation snippet above. (curvy-tabs-pager.github.io
will no longer be updated with new versions, albeit previous versions will continue to be accessible.)2.3.3
width
setter (was always throwing error)<canvas>
element to device’s resolution for crisper imaginge (especially text) on high-DPI devices (like Apple Retina screen)2.3.2
catch
that was itself was throwing error (in getTab
on unknown tab)2.3.1
CurvyTabs.version
2.3.0
hide
, toggle
, or reset
methods are ignored with a console warning.reset
methodindexOrName
overloads now have idxOrNamOrEl
overloads — meaning that they all now accept an already known tab element in addition to its index or name. Previously if you already had the element, you couldn't just pass el
; you would have had to pass el.getAttribute('name')
. This would deref the name just so getTab
could then search for the element by name.2.2.0
forEach
method2.1.1
CurvyTabs.version
static property2.1.0
2.0.1
2.0.0
height
is now size
containerHeight
is now height
contents
, contentDivs
css
, and contentCss
1.0.0
— Initial versionFAQs
Tab bar with fancy tabs
The npm package curvy-tabs receives a total of 1 weekly downloads. As such, curvy-tabs popularity was classified as not popular.
We found that curvy-tabs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.