diff --git a/docs/404.html b/docs/404.html index d2f0be7..7f51587 100644 --- a/docs/404.html +++ b/docs/404.html @@ -1 +1 @@ -
this is the @magic-modules Accordion component. shows / hides items in a vertical accordion
npm install @magic-modules/accordion
in a page or Component.
export const View = state => Accordion({
key: 'about',
items: [
{ title: 'title', text: 'content' },
{ title: 'title 2', text: 'content 2' },
{
title: 'title 3',
text: [
p('content'),
p('can also be an'),
p(['array', ' of', ' modules']),
Link({ to: 'https://magic.github.io' }, 'magic.github.io'),
],
},
],
title: 'optional title',
state,
})
the example above renders
by default, css is minimal. to adapt the styles for your theme, add (and change) the following object to /assets/theme/{THEME_NAME}/index.mjs
'.Accordion': {
h3: {}, // main title
'.AccordionItem': {
h4: {}, // item title
'.content': {}, // item content
'&.open': {
'.content': {}, // item content if opened
},
},
}
the source for this page is in the example directory and gets built and published to github using @magic/core
this is the @magic-modules Accordion component. shows / hides items in a vertical accordion
npm install @magic-modules/accordion
in a page or Component.
export const View = state => Accordion({
key: 'about',
items: [
{ title: 'title', text: 'content' },
{ title: 'title 2', text: 'content 2' },
{
title: 'title 3',
text: [
p('content'),
p('can also be an'),
p(['array', ' of', ' modules']),
Link({ to: 'https://magic.github.io' }, 'magic.github.io'),
],
},
],
title: 'optional title',
state,
})
the example above renders
by default, css is minimal. to adapt the styles for your theme, add (and change) the following object to /assets/theme/{THEME_NAME}/index.mjs
'.Accordion': {
h3: {}, // main title
'.AccordionItem': {
h4: {}, // item title
'.content': {}, // item content
'&.open': {
'.content': {}, // item content if opened
},
},
}
the source for this page is in the example directory and gets built and published to github using @magic/core