Dettagli
Raggruppa un breve riepilogo e il corpo in un unico blocco. Quando lo crei dalla barra degli strumenti, inserisci prima il riepilogo e poi continua a scrivere il contenuto sotto.
Lo stato aperto impostato con il triangolo viene salvato nel documento e diventa lo stato iniziale della vista pubblicata. Durante la modifica il corpo resta aperto per poterlo cambiare, ma il valore dello stato salvato viene mantenuto.
Ali
Carattere di baseAltezza
HTMLCaricamento dell’editor…
JSONnabi-treeCaricamento dell’editor…
Installazione
npm install nabi-noteCodice
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: 'it' })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'it' }
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()Stili CSS
Personalizza il blocco con .nabi-content details e il titolo con .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'attributo open è lo stato iniziale aperto salvato dall'autore. Il CSS può applicare stili a questo stato, ma è meglio non forzare lo stato stesso.