0.5.9 β’ Published 6 months ago
@xexiu/astro-modal v0.5.9
π astro-modal
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 modal 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 Modal 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-modal
- Using npm:
npm i @xexiu/astro-modal
π API
export interface Props {
id: string; // Required string
ariaLabel: string; // Required string for good practices Lighthouse
btnCloseAriaLabel: string; // Required string for good practices Lighthouse
classes?: string; // Optional
modalBtnClass?: string; // Optional
headerClass?: string; // Optional
sectionClass?: string; // Optional
footerClass?: string; // Optional
closeBtnClass?: string; // Optional
btnText?: string; // Optional (if NOT Provided a close mark (X) will show on pop-up modal)
}
π Usage in astro
---
// more personal/code imports
import Modal from '@xexiu/astro-modal';
---
<div>Whatever text/html</div>
<Modal id="myAwsomeModal" ariaLabel="Share on social" btnCloseAriaLabel="Close Modal">
<div slot="open-modal-button">Open Modal</div>
<h2 slot="modal-title">Modal Title</h2>
<div slot="modal-main">
<h4>Modal Main</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur nesciunt
placeat officia, aliquid enim corrupti error repellat iusto corporis
commodi ad natus ratione aut iure nisi deserunt soluta quam iste!
</p>
</div>
<div slot="modal-footer">Modal Footer</div>
</Modal>
If classes are NOT specified, the modal has default styles.
Β Β‘Chao pescao! π π
0.5.9
6 months ago
0.5.8
6 months ago
0.5.7
6 months ago
0.5.6
6 months ago
0.5.5
6 months ago
0.5.4
6 months ago
0.5.3
6 months ago
0.5.2
6 months ago
0.5.1
6 months ago
0.5.0
6 months ago
0.4.4
6 months ago
0.4.3
7 months ago
0.4.1
7 months ago
0.3.10
7 months ago
0.3.9
7 months ago
0.3.8
7 months ago
0.3.7
7 months ago
0.3.6
7 months ago
0.3.5
7 months ago
0.3.4
7 months ago
0.3.3
7 months ago
0.3.2
7 months ago
0.3.1
7 months ago
0.3.0
7 months ago
0.2.4
7 months ago
0.2.3
7 months ago
0.1.9
7 months ago