rwt-file-tabs
Advanced tools
Readme
by Read Write Tools May 4, 2020
| Abstract |
|---|
| The rwt-file-tabs web component is a thin bar containing named file tabs. It is typically used with apps that allow multiple files to be worked on simultaneously. |
The rwt-file-tabs web component can be used in scenarios with multiple views or multiple work tasks.
This component can be configured with a fixed set of tabs which are slotted into the component when designing the document. Alternatively, its programming API allows tabs to be created and removed as needed, when working with a dynamic set of tabs.
Tabs can be configured using CSS to adjust their size and typography.
The tab bar occupies a fixed width. When the size of all tabs exceeds that width, scroll buttons are automatically enabled.
Dynamic tabs can be closable
or not, based on an attribute set on
the web component by the developer.
The rwt-file-tabs web component works in any browser that supports modern W3C standards. Templates are written using BLUE PHRASE notation, which can be compiled into HTML using the free Read Write View desktop app. It has no other prerequisites. Distribution and installation are done with either NPM or via Github.
If you are familiar with Node.js and the package.json file, you'll be
comfortable installing the component just using this command:
npm install rwt-file-tabs
If you are a front-end Web developer with no prior experience with NPM, follow these general steps:
package.json file in the root of your web project using the command:npm init
npm install rwt-file-tabs
Important note: This web component uses Node.js and NPM and package.json as a
convenient distribution and installation mechanism. The web component itself
does not need them.
If you are more comfortable using Github for installation, follow these steps:
node_modules in the root of your web project.git clone https://github.com/readwritetools/rwt-file-tabs.git
After installation, you need to add a few things to your HTML page to make use of it.
script tag to load the component's rwt-file-tabs.js file:<script src='/node_modules/rwt-file-tabs/rwt-file-tabs.js' type=module></script>
Add the component tag somewhere on the page, configuring it with these optional attributes:
closable This optional attribute instructs the component to add an 'x' button to
each dynamically added tab, allowing the user to remove the tab.scroll-side={left|right} When the space occupied by the tabs is too large,
scroll buttons are enabled. They can be positioned to the left or the right of
the tabs.anchor-side={left|right} When the space occupied by the tabs is less than the
width of the component, the unoccupied space can be anchored to the left or to
the right of the tabs.role=navigation This web accessible ARIA attribute tells readers that the
component is used for navigation.If the component is to be used with a predetermined set of tabs, they can be slotted in. Here's an example:
<rwt-file-tabs role=contentinfo>
<button slot=tabitem id=tab1 title='Read only view'>READ</button>
<button slot=tabitem id=tab2 title='Text editing view'>WRITE</button>
<button slot=tabitem id=tab3 title='Web browser preview'>PREVIEW</button>
</rwt-file-tabs>
If the component is to be used with a dynamic set of tabs, they can be added and removed using these methods.
insertTab(id, value, title)id should be a unique identifier. It will be used for manipulating the tab.value is the text to display on the tab. Text that is too long will be ellipsed.title parameter is optional, and if provided will be used as the hover tooltip.removeTab(id)id is the identifier of the tab to remove.getCurrentTab()currentTabId and currentTabValue.setCurrentTab(id)id.getScrollableOverflow()setScrollPosition(left)left parameter is the number of pixels to programmatically scroll the tabs. It should be an integer from 0 to scrollableOverflow.scrollMaxRight()The component issues life-cycle events.
component-loadedtab-activatedevent argument has a detail property containing the currentTabId and currentTabValue of the newly activated tab.tab-closingpreventDefault() to cancel the operation. The event argument has a detail property containing the currentTabId and currentTabValue of the item about to be closed.The component can be styled with these CSS variables:
rwt-file-tabs {
--width: 100%;
--height: 2rem;
--nav-button-size: 1.6rem;
}
The tabs can be styled with these CSS variables:
rwt-file-tabs {
--font-weight: normal;
--letter-spacing: 0px;
--text-align: left;
--min-width: 2rem;
--max-width: 6rem;
}
The default color palette for the component uses a dark mode theme. You can use CSS to override the variables' defaults:
rwt-file-tabs {
--color: var(--white);
--accent-color1: var(--pure-white);
--background: var(--black);
--accent-background1: var(--pure-black);
--accent-background2: var(--nav-black);
--accent-background3: var(--medium-black);
--accent-background4: var(--gray);
}
The component can be oriented vertically by wrapping it in a positioned element and using a CSS transform. Here's an example of how to do it:
<div id=viewtabs-area>
<rwt-file-tabs id=viewtabs scroll-side=left anchor-side=right>
<button id=id4 slot=tabitem title='Delta view'>Delta</button>
<button id=id3 slot=tabitem title='Gamma view'>Gamma</button>
<button id=id2 slot=tabitem title='Beta view'>Beta</button>
<button id=id1 slot=tabitem title='Alpha view'>Alpha</button>
</rwt-file-tabs>
</div>
div#viewtabs-area {
position: absolute;
top: 2.3rem;
left: 0;
bottom: 0;
width: 2.0rem;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#viewtabs {
position: absolute;
transform: rotate(-90deg);
transform-origin: left top;
width: 34rem; /* JavaScript will override */
top: 34rem; /* JavaScript will override */
}
function onResize() {
var viewTabsArea = document.getElementById('viewtabs-area');
var viewTabs = document.getElementById('viewtabs');
var height = viewTabsArea.offsetHeight;
viewTabs.style.width = `${height}px`;
viewTabs.style.top = `${height}px`;
}
window.addEventListener('resize', onResize);
The rwt-file-tabs web component is licensed under the MIT License.
Copyright © 2020 Read Write Tools.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
| Source code | github |
| Package installation | NPM |
| Documentation | Read Write Hub |
FAQs
Switch between active views using a file-tab interface, a standards-based DOM Component
We found that rwt-file-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.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).
Security News
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.