Detail
Kelompokkan ringkasan singkat dan isi dalam satu blok. Saat membuatnya dari bilah alat, masukkan ringkasannya lebih dahulu lalu lanjutkan menulis isi di bawahnya.
Status buka yang ditentukan melalui segitiga disimpan dalam dokumen dan menjadi status awal tampilan yang dipublikasikan. Saat mengedit, Anda juga dapat mengeklik segitiga untuk membuka dan menutup blok.
Di dalam sel tabel atau blok lain, hanya blok lipat tersebut yang dibuka atau ditutup. Jika kursor atau pilihan berada di isi yang ditutup, posisinya dipindahkan ke luar; pilihan di tempat lain tetap dipertahankan.
npm install nabi-noteimport {
createLocale, createNabiWith, mountSurface, mountToolbar,
mountContextToolbar, mountHints, watchSettle, quoteWing, detailsWing,
codeWing, mountViewTools,
} from 'nabi-note'
const selected = [
quoteWing,
detailsWing,
codeWing,
]
const locale = createLocale('id')
const { nabi, registry } = createNabiWith(selected, { locale })
// 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 })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
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()))
// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')const selected = wings().use('details').build()Gaya CSS
Atur gaya blok detail dengan .nabi-content details, dan judulnya dengan .nabi-content details > summary.
.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; }Atribut open adalah keadaan terbuka awal yang disimpan penulis. CSS dapat menata keadaan ini, tetapi sebaiknya jangan memaksakan keadaannya.