Comments (1)
Hi @wanno-drijfhout.
Thank you for the kind words. Happy to hear your enjoying the plugin! 😄
As much as I appreciate the goal, I'm not a big fan of adding complexity and unfamiliar behavior to common UI elements like tab sets. That's not meant as a hard "no" to enhancements, but I think there are other options worth exploring before adding new features to docsify-tabs.
Option 1: Continue using the "Select..." tab pattern
I think the solution you've come up with is great! It's simple, accomplishes the goal without introducing new behavior or screen elements, and because the "toggle" is a tab it can leverage the existing persist
and sync
options.
While this won't change the behavior, you could visually separate the "select" tab using custom CSS:
<!-- tabs:start -->
#### **...**
*Select your language and framework*
#### **Tab A**
...
<!-- tabs:end -->
<style>
button[data-tab="..."] {
font-size: 0;
}
button[data-tab="..."]:before {
content: url(https://icongr.am/octicons/info.svg?size=16&color=b3b3b3);
display: block;
margin: 0 1rem;
}
button.docsify-tabs__tab--active[data-tab="..."]:before {
content: url(https://icongr.am/octicons/info.svg?size=16&color=0b87da);
display: block;
margin: 0 1rem;
}
</style>
If your "Select..." message is consistent across tab sets, you can define and render the message via CSS:
<!-- tabs:start -->
#### **...**
#### **Tab A**
...
<!-- tabs:end -->
<style>
.data-tab-content[data-tab-content="..."]:before {
content: 'Select your language and framework';
font-style: italic;
}
</style>
Or use docsify's embed feature to store the message in a separate file:
<!-- tabs:start -->
#### **...**
[filename](path/to/file.md ':include')
#### **Tab A**
...
<!-- tabs:end -->
Option 2: Scrollable tab content
Setting a max-height
and overflow
declaration will allow the tab containers to be scrollable.
Here's a simple implementation:
<style>
.docsify-tabs__content {
max-height: 60vh;
overflow: auto;
}
</style>
The issue I have with the above implementation is that no visual indication will be given that a tab container is scrollable on some operating systems (e.g., macOS and iOS) until a user tries to scroll. Fortunately we can fix this with CSS as well. The other downside is that you will now have scrollable containers (tab content) inside scroll containers (the window) which can sometimes be a headache to navigate (especially on mobile).
<style>
.docsify-tabs__content {
max-height: 60vh;
overflow: auto;
}
.docsify-tabs__content::-webkit-scrollbar {
-webkit-appearance: none;
}
.docsify-tabs__content::-webkit-scrollbar:vertical {
width: 11px;
}
.docsify-tabs__content::-webkit-scrollbar:horizontal {
height: 11px;
}
.docsify-tabs__content::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
</style>
Option 3: Use a <details>
element to expand/collapse tab sets
Instead of active/inactive tab, HTML's native <details>
element can be used to toggle the visibility of entire tab sets.
<details>
<summary>Select your language and framework</summary>
<!-- tabs:start -->
#### **Tab A**
...
#### **Tab B**
...
<!-- tabs:end -->
</details>
Option 4: Create a custom plugin
Docsify's plugin system makes it easy to modify page content--including the tab sets generated by docsify-tabs. This could be a good option for modifying tab behavior without having to navigate the source code for docsfy-tabs. More importantly, it means you'll have the freedom to implement whatever you want however you see fit without being dependent on a PR getting merged. If you come up with something you like, by all means share it and we can discuss further!
Hope this helps. Closing this issue for now but happy to reopen again in the future if needed.
Thanks!
from docsify-tabs.
Related Issues (20)
- Tab titles aren't processed by the markdown compiler HOT 2
- Tab not working in my case HOT 2
- I need your help,using this plug-in, refresh, can not locate the exact location of the page HOT 1
- Can tabs add support for the chinese title? HOT 2
- File include support HOT 1
- Vue.css theme is not supported HOT 1
- Can tabs add support for Mustache template? HOT 3
- Wrong parse with escape chars HOT 1
- Tabs not rendering as tabs HOT 4
- access document link ‘?Id=xxx’ positioning problem HOT 1
- Tabs unselected when changing pages HOT 7
- Multiple tabs with same name changed together when one tab is clicked, how to change only one? HOT 1
- After [filename](README.md ':include'), the docsify-tabs plugin in README.md fails HOT 1
- Search Functionality in Tabs Tables HOT 1
- Redirection to a header makes the tab active HOT 3
- Error when in quote HOT 4
- Can we independently control the label synchronization switching function? HOT 2
- Is the docs site broken?
- Additional space at the end of tab title prevents correct rendering
- Combining docsify-tabs with docsify-edit-on-github plugin HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from docsify-tabs.