Détails
Regroupez un court résumé et un corps en un seul bloc. Lorsque vous le créez depuis la barre d'outils, vous saisissez d'abord le résumé, puis continuez à écrire le contenu en dessous.
L'état ouvert défini avec le triangle est stocké dans le document et devient l'état initial dans la vue publiée. Pendant l'édition, le corps reste ouvert afin qu'il puisse être modifié, mais la valeur d'état stockée est conservée.
Ailes
Police par défautDécalage
HTMLChargement de l'éditeur…
JSONnabi-treeChargement de l'éditeur…
Installation
npm install nabi-noteCode
import {
createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
mountHints, watchSettle, quoteWing, detailsWing, codeWing,
mountViewTools,
} from 'nabi-note'
const selected = [
quoteWing,
detailsWing,
codeWing,
]
const { nabi, registry } = createNabiWith(selected)
// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }
const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!
// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale: 'fr' })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'fr' }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })
// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))ts
const selected = wings().use('details').build()Styles CSS
Stylisez le bloc de détails avec .nabi-content details, et le titre avec .nabi-content details > summary.
css
.article-body details {
padding: .75rem 1rem;
border: 1px solid var(--nabi-line);
border-radius: var(--nabi-radius);
background: var(--nabi-soft);
}
.article-body details > summary { cursor: pointer; font-weight: 700; }
.article-body details[open] > summary { margin-block-end: .75rem; }L'attribut open est l'état initial ouvert enregistré par l'auteur. Le CSS peut styliser cet état, mais il vaut mieux ne pas forcer l'état lui-même.