material-ui-scrollable-tabs
Advanced tools
⚠️ This package is NO LONGER SUPPORTED. All features of this package were fully ported to the v1 branch of material-ui on 2017-04-11. You are welcome to continue using this package, but no changes will be made and no support will be offered. You are strongly advised to upgrade to the v1 branch of material-ui if you wish to utilize the features provided by this package. As always, you may fork this repository and modify it to suit your personal needs, but pull requests will not be accepted.
Material-UI-Scrollable-Tabs is an extension of the Tabs component offered by Material-UI. It offers several additional features beyond those in the native Tabs component offered by Material-UI.
This package is not intended to be used as a standalone module and requires Material-UI to function. It is our hope that the features offered by this package will eventually be available from within Material-UI without the need for this extension. In the meantime, this package will be offered so others can take advantage of these additional features.
Material-UI-Scrollable-Tabs is available as an npm package:
$ npm install --save material-ui-scrollable-tabs
Material-UI-Scrollable Tabs offers the same base functionality as the Tabs component of Material-UI as well as some additional features documented below. See the documentation of Material-UI for information regarding the base functionality.
Live samples and documentation are available by following the instructions located here.
To use this extension, simply import from the appropriate module folder:
import { Tabs, Tab } from 'material-ui-scrollable-tabs/Tabs';
To use the scrollable tabs module at the same time as the standard Material-UI tabs module, import as an alias:
import { Tabs as ScrollTabs, Tab as ScrollTab } from 'material-ui-scrollable-tabs/Tabs';
In addition to those documented by Material-UI, this package offers the following additional props:
| Name | Type | Default | Description |
|---|---|---|---|
| tabType | enum:fixedscrollablescrollable-buttons | fixed | See descriptions of enumerations below. |
Fixed tabs will behave very similarly to the native Material-UI Tabs implementation. The tabs container will fill its parent container and each tab will be evenly sized within that container. The main difference in this implementation is with adherence to material design's tab sizing standards. Tabs will not shrink to a smaller size or grow to a larger size than material design's standards call for. Therefore, tabs may not fill their entire container (if constrained by the maximum width) and they might overflow their container (if constrained by the minimum width). If tabs overflow their container then the overflowed tabs will be clipped.
Scrollable tabs provide the ability to have a horizontally scrolling tab container. Each tab will be sized to its content within the size limitations of material design's tab standards. If the tabs overflow their container, the user will be able to access those not presently visible via a horizontal scroll mechanism (e.g touch swipe, shift-mousewheel, etc.)
This behavior is an extension of the scrollable behavior. In addition to the features of the scrollable tab type, left and right buttons to scroll the tab container in that direction are provided. This would be primarily for desktop environments where touch swipes are unavailable.
| Name | Type | Default | Description |
|---|---|---|---|
| isMultiLine | bool | false | If true, label will alter its style and attempt to wrap to multiple lines. On webkit* enabled browsers, the text will only wrap to two lines and clamp with an ellipse. |
* For non-webkit enabled browsers, text will wrap until it fills the height of the tab. Material design standards do not allow for more than 2 lines of text wrapping (and no wrapping at all with icons) so you should probably change your application if this is happening.
The future plans and high priority features and enhancements can be found in the ROADMAP.md file.
At this time, we are not actively seeking contributors. We suggest you make contributions to Material-UI instead. If you encounter issues, please feel free to log it.
Thank you to Call-Em-All and the other contributors of Material-UI for their work on an excellent set of UI components.
This project is licensed under the terms of the MIT license.
2.0.0
This will be the last release of this library. USE AT YOUR OWN RISK. We highly suggest that you migrate to the v1 branch of material-ui to take advantage of the features provided by this library natively within that package.
⚠️ This is a breaking change. If you still use an older version of material-ui, you should stay at v1.0.0 of this component.
FAQs
A Scrollable Tabs extension for material-ui.
We found that material-ui-scrollable-tabs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.