Skip to content

Instantly share code, notes, and snippets.

@Fevol
Created November 30, 2022 13:48
Show Gist options
  • Save Fevol/6215e47c46317ceac1ab2d25b6f555f5 to your computer and use it in GitHub Desktop.
Save Fevol/6215e47c46317ceac1ab2d25b6f555f5 to your computer and use it in GitHub Desktop.
Tabulated settings page
export class SampleSettingTab extends PluginSettingTab {
plugin: MyPlugin;
settingsPage: HTMLElement;
YOUR_TABS = {
'first-tab-id': {
name: 'First tab',
icon: 'coffee',
},
'second-tab-id': {
name: 'Second tab',
icon: 'star',
}
}
constructor(app: App, plugin: MyPlugin) {
super(app, plugin);
this.plugin = plugin;
}
display(): void {
const {containerEl} = this;
containerEl.empty();
const tabBar = containerEl.createEl('nav', { cls: 'settings-tab-bar' });
for (const [tabId, tabInfo] of Object.entries(this.YOUR_TABS)) {
const tabEl = tabBar.createEl('div', {cls: 'settings-tab'});
const tabIcon = tabEl.createEl('div', {cls: 'settings-tab-icon'});
setIcon(tabIcon, tabInfo.icon);
const tabName = tabEl.createEl('div', {cls: 'settings-tab-name', text: tabInfo.name});
tabEl.addEventListener('click', () => {
// @ts-ignore
for (const tabEl of tabBar.children)
tabEl.removeClass('settings-tab-active');
tabEl.addClass('settings-tab-active');
this.renderSettingsPage(tabId);
});
}
this.settingsPage = containerEl.createEl('div', { cls: 'settings-tab-page' });
this.renderSettingsPage('first-tab-id');
}
renderSettingsPage(tab: string) {
this.settingsPage.empty();
switch (tab) {
case 'first-tab-id':
// render first tab
this.firstTabPage();
break;
case 'second-tab-id':
// render second tab
this.secondTabPage();
break;
}
}
firstTabPage() {
const newElement = this.settingsPage.createEl('h1', { text: 'First tab' });
}
secondTabPage() {
const newElement = this.settingsPage.createEl('h1', { text: 'Second tab' });
new Setting(this.settingsPage)
.setName('Setting #1')
.setDesc('It\'s a secret')
.addText(text => text
.setPlaceholder('Enter your secret')
.setValue(this.plugin.settings.mySetting)
.onChange(async (value) => {
console.log('Secret: ' + value);
this.plugin.settings.mySetting = value;
await this.plugin.saveSettings();
}));
}
}
/*
This CSS file will be included with your plugin, and
available in the app when your plugin is enabled.
If your plugin does not need CSS, delete this file.
*/
.settings-tab-bar {
display: flex;
flex-direction: row;
}
.settings-tab {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--size-4-2);
padding: 10px;
border: 1px solid var(--background-modifier-border)
}
.settings-tab-active {
background-color: var(--color-accent);
color: var(--text-on-accent);
}
.settings-tab-name {
font-weight: bold;
}
.settings-tab-icon {
display: flex;
}
@Fevol
Copy link
Author

Fevol commented Dec 28, 2022

How it looks:
tabulated-settings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment