Merge pull request #216 from Neovici/feat/render-tabs-next-class

feat(next/use-tabs): support className in renderTabs
Neovici · Jun 26, 2024 · 225c044 · 225c044
2 parents 848c735 + ea76038
commit 225c044
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/next/use-tabs.d.ts b/src/next/use-tabs.d.ts
@@ -24,10 +24,10 @@ interface Result<T extends Tab> {
 	onActivate: (e: Event) => void;
 }
 
-export type RenderTabs<T extends Tab> = Pick<
-	Result<T>,
-	'tabs' | 'active' | 'onActivate'
->;
+export interface RenderTabs<T extends Tab>
+	extends Pick<Result<T>, 'tabs' | 'active' | 'onActivate'> {
+	className?: string;
+}
 
 export declare const useTabs: <T extends Tab, P extends Options>(
 	tabs: T[],

diff --git a/src/next/use-tabs.js b/src/next/use-tabs.js
@@ -48,15 +48,16 @@ export const useTabs = (tabs, { hashParam, onActivate }) => {
 	};
 };
 
-export const renderTabs = ({ tabs, active, onActivate }) =>
+export const renderTabs = ({ tabs, active, onActivate, className }) =>
 	tabs.map((tab) => {
 		const title = invoke(tab.title);
 		return html`<cosmoz-tab-next
 			name=${tab.name}
+			class=${ifDefined(className)}
+			title=${ifDefined(typeof title === 'string' ? title : undefined)}
 			?active=${active.name === tab.name}
 			?hidden=${tab.hidden}
 			?disabled=${tab.disabled}
-			title=${ifDefined(typeof title === 'string' ? title : undefined)}
 			@click=${onActivate}
 			>${tab.content ?? title}</cosmoz-tab-next
 		>`;