@xexiu/astro-accordion

0.0.10 • Public • Published

🚀 astro-modal

NPM Downloads PRs Welcome Astro TypeScript ESLint

HELLO there 👋

ASTRO ACCORDION: HTML, CSS and a bit of javascript made with Custom Elements accordion for astro. Uses API from browsers. Compatible with web/mobile, responsive, HTML5 semantic, SEO friendly. Lighthouse score 100%. Accesibility (ARIA attrs) Uses Custom Elements for a better optimization: customElements.define('xe-accordion', Accordion);


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 Accordion 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-accordion
  • Using npm:
npm i @xexiu/astro-accordion

🔁 API

interface Props {
   isExpanded?: boolean[] // Optional - by default, accordion is not expanded;
   titles: string[] // Required;
   content: any[] // Required;
   btnClasses?: string // Optional;
   regionClasses?: string // Optional;
}

🛠 Usage in astro

---
import Accordion from '@xexiu/astro-accordion';

const content = [
   'Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro <a href="#focusable">focusable link for test</a> consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.',
   'Hae duae <a href="#focusable">focusable link for test</a> provinciaebello quondam piratico catervis mixtae praedonum a Servilio proconsule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.',
   'Content 3'
];
---

<div>titles and content length must match</div>

<Accordion
   titles={[
      'Accordion heading 1',
      'Accordion heading 2',
      'Accordion heading 3'
   ]}
   content={content}
   isExpanded={[true, false, false]}
/>

 ¡Chao pescao! 👋 🐠

Package Sidebar

Install

npm i @xexiu/astro-accordion

Homepage

xexiu.dev

Weekly Downloads

2

Version

0.0.10

License

ISC

Unpacked Size

8.83 kB

Total Files

5

Last publish

Collaborators

  • xexiu