1.0.4 • Published 5 years ago
fa-accordion v1.0.4
fa-accordion
Very light and customizable accordion that work without JS but only CSS.
In this way it is very performing.
You can customize the element using the CSS-Variables
Using this component
Node Modules with React
- Run
npm install fa-accordion
- Add in index.js
import { defineCustomElements } from 'fa-accordion/loader';
anddefineCustomElements(window);
like in this example:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { defineCustomElements } from 'fa-accordion/loader';
ReactDOM.render(<App />, document.getElementById('root'));
defineCustomElements(window);
serviceWorker.unregister();
- Import the component using
import 'fa-accordion'
when you want to use it like in this example:
import React from 'react';
import './App.css';
import 'fa-accordion'
function App() {
return (
<div>
<fa-accordion text="titolo 1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus nibh vitae interdum feugiat. Aenean at mattis sem, ac interdum risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ipsum lacus, feugiat ut sagittis sed, lobortis eget magna. Suspendisse at sapien lacus. Proin et porttitor metus. Nulla auctor consectetur justo ut tempor. Etiam quis faucibus dolor. Sed rutrum ullamcorper risus, ac auctor nulla lobortis et. Aliquam quis libero ac dolor interdum bibendum sit amet vel tellus. Praesent non nunc ac quam facilisis maximus ut in quam. Aliquam nec molestie urna, sed congue erat.
</fa-accordion>
<fa-accordion text="titolo 1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus nibh vitae interdum feugiat. Aenean at mattis sem, ac interdum risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ipsum lacus, feugiat ut sagittis sed, lobortis eget magna. Suspendisse at sapien lacus. Proin et porttitor metus. Nulla auctor consectetur justo ut tempor. Etiam quis faucibus dolor. Sed rutrum ullamcorper risus, ac auctor nulla lobortis et. Aliquam quis libero ac dolor interdum bibendum sit amet vel tellus. Praesent non nunc ac quam facilisis maximus ut in quam. Aliquam nec molestie urna, sed congue erat.
</fa-accordion>
</div>
);
}
export default App;
In a stencil-starter app
- Run
npm install fa-accordion --save
- Add an import to the npm packages
import fa-accordion;
- Then you can use the element anywhere in your template, JSX, html etc
Node Modules
- Run
npm install fa-accordion
- Put a script tag similar to this
<script src='node_modules/fa-accordion/dist/fa-accordion.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc