Thanks - I've borrowed your code for grouping options into tabs

[ronzulu]

Hi @Taitava

Thanks for the idea and implementation for grouping options into tabs. On the spaced repetition plugin we have so many options, and was probably unworkable for some users.
https://github.com/st3v3nmw/obsidian-spaced-repetition

Now looks like...

Cheers
Ronny

[Taitava]

Hi @ronzulu ! Thank you for letting me know this! 🙂 Nice that the tabs code works well for your plugin, too!

Do you think it would make sense for me to create a separate GitHub repository and NPM package for the tabs component?

• I could improve the tabs API to make it easier to use.
• It would be easier for Obsidian community plugins to pull updates for the tabs component (if wanted).
• There would be a dedicated place to report problems/ideas. I would be willing to receive pull requests, too. 🙂

[ronzulu]

Hi @Taitava great idea.

If you include some documentation, it might be helpful if you mention about the need to rename the CSS classes. And maybe start off calling them ".xxx-tab-content" etc.

I only have some experience with CSS and it took me a while to realise that the CSS class names are global in scope. So at one time the spaced repetition plug-in worked, but only when your plug-in was also installed!

Cheers
Ronny

[Taitava]

Good point! I need to write to the documentation that all CSS classes need prefixing, i.e. each plugin using the tabs should use their own prefix. As you have noticed, for the Shell commands plugin, the prefix is SC-:

obsidian-shellcommands/styles.css

Lines 239 to 287 in bfe508e

	/*
	* Tab elements
	* This CSS is copied 2021-10-21 from https://www.w3schools.com/howto/howto_js_tabs.asp
	* Modifications:
	* - Renamed classes
	* - Added tab icons.
	* - Changed colors.
	* - Changed/removed borders.
	* - Removed button transition.
	* - Changed button border-radiuses
	* - Added margin-right rule to .SC-tab-header-button .
	*/
	/* Style the tab */
	.SC-tab-header {
	border-bottom: 2px solid var(--background-modifier-border);
	}
	/* Style the buttons that are used to open the tab content */
	button.SC-tab-header-button {
	background-color: unset;
	border: none;
	box-shadow: none; /* Remove a "border" that came via Obsidian 0.16.0. */
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	margin-right: 6px; /* Reduced margin. Obsidian's default margin-right for button is 12px (0 for other margins). */
	border-radius: 10px 10px 0 0; /* 0 0 = No border-radius at bottom */
	}
	/* Create an active/current tablink class */
	button.SC-tab-header-button.SC-tab-active,
	button.SC-tab-header-button:hover {
	background-color: var(--background-modifier-border);
	}
	.SC-tab-header-button svg {
	vertical-align: middle; /* Not middle but close enough. */
	}
	/* Style the tab content */
	.SC-tab-content {
	display: none;
	padding: 6px 12px;
	}
	.SC-tab-content.SC-tab-active {
	display: block;
	}

---

The documentation also needs to emphasize that CSS needs to be manually put into the plugin's own styles.css file, so just an npm install is not enough.