🚀 astro-tabs
HELLO there 👋
- Twitter: https://twitter.com/xexiudev drop by and say hi, follow me and I follow you. Let's build a community.
Pure HTML and CSS simple dynamic tabs for astro. Uses API from browsers. Compatible with web/mobile, responsive, HTML5 semantic, SEO friendly. Lighthouse score 100%. No-Javascript
Forking and giving a star will contribute to my motivation in making components for astro (react, react-native, etc...) that are purely HTML, CSS, SEO friendly and responsive :) (almost all components :P).
Demo: Astro Tabs This product is actively mantained. Any PR, issues or whatever concern, please visit the Github repository https://github.com/xexiu/astro-components.
Tutorials Roadmap
- Web2: JavaScript, HTML, CSS, Node.js, Python (MLL, AI), React, NextJS React Native and more.
- Web3: Blockchain, WEB3, dApps, smart contracts and more.
📦 Installation
- Using bun:
bun i @xexiu/astro-tabs- Using npm:
npm i @xexiu/astro-tabs🔁 API
export interface Props {
tabTitles: string[]; // Required array
keys: string[]; // Required array
classes?: string; // Optional
tabsNavClass?: string; // Optional
panelsContainerClass?: string; // Optional
panelClass?: string; // Optional
tabTitleClasses?: string; // Optional
}🛠 Usage in astro
const blogs = {
latest: [{
id: 1,
title: "Test 1",
}],
pinned: [{
id: 2,
title: "Test 2",
}],
private: [{
id: 3,
title: "Test 3",
}]
}
---
// more personal/code imports
import Tabs from '@xexiu/astro-tabs';
const keys = Object.keys(blogs); // ['latest', 'pinned', 'private']
---
<div>Whatever text/html</div>
<Tabs {keys} tabTitles={['Title for Latest', 'Title for Private', 'Title for Pinned']}>
{
(key: string) => {
return (
<Fragment>
<div>{blogs[key].id}</div> // 1, 2, 3
<div>{blogs[key].title}</div> // Test 1, Test 2, Test 3
</Fragment>
);
}
}
</Tabs>If classes are NOT specified, the tabs have default styles.