Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@lion/accordion
Advanced tools
Vertically stacked list of invokers that can be clicked to reveal or hide content associated with them.
An accordion is a vertically stacked set of interactive headings that each contain a title representing a section of content. It allows users to toggle the display of sections of content.
import { html as previewHtml } from '@mdjs/mdjs-preview';
import { html, LitElement, ScopedElementsMixin } from '@lion/core';
import { LionAccordion } from '@lion/accordion';
class MyComponent extends ScopedElementsMixin(LitElement) {
static get scopedElements() {
return { 'lion-accordion': LionAccordion };
}
render() {
return html`
<lion-accordion>
<h3 slot="invoker">
<button>Sensory Factors</button>
</h3>
<div slot="content">
<p>
The taste of oranges is determined mainly by the relative ratios of sugars and acids,
whereas orange aroma derives from volatile organic compounds, including alcohols,
aldehydes, ketones, terpenes, and esters. Bitter limonoid compounds, such as limonin,
decrease gradually during development, whereas volatile aroma compounds tend to peak in
mid– to late–season development. Taste quality tends to improve later in harvests when
there is a higher sugar/acid ratio with less bitterness. As a citrus fruit, the orange
is acidic, with pH levels ranging from 2.9 to 4.0. <a href="#">Link</a>
</p>
<p>
Sensory qualities vary according to genetic background, environmental conditions during
development, ripeness at harvest, postharvest conditions, and storage duration.
</p>
</div>
<h3 slot="invoker">
<button>Nutritional value</button>
</h3>
<div slot="content">
Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat
(table). In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich
source of vitamin C, providing 64% of the Daily Value. No other micronutrients are present
in significant amounts (table).
</div>
</lion-accordion>
`;
}
}
customElements.define('my-component', MyComponent);
export const overview = () => previewHtml`<my-component></my-component>`;
npm i --save @lion/accordion
import { html, LitElement, ScopedElementsMixin } from '@lion/core';
import { LionAccordion } from '@lion/accordion';
class MyComponent extends ScopedElementsMixin(LitElement) {
static get scopedElements() {
return { 'lion-accordion': LionAccordion };
}
render() {
return html`
<lion-accordion>
<h3 slot="invoker">
<button>Nutritional value</button>
</h3>
<p slot="content">
Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat
(table). In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich
source of vitamin C, providing 64% of the Daily Value. No other micronutrients are present
in significant amounts (table).
</p>
</lion-accordion>
`;
}
}
<script type="module">
import '@lion/accordion/define';
</script>
<lion-accordion>
<h3 slot="invoker">
<button>Nutritional value</button>
</h3>
<p slot="content">
Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
amounts (table).
</p>
</lion-accordion>
FAQs
Vertically stacked list of invokers that can be clicked to reveal or hide content associated with them.
The npm package @lion/accordion receives a total of 2,822 weekly downloads. As such, @lion/accordion popularity was classified as popular.
We found that @lion/accordion demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.