Maelezo
Kusanya muhtasari mfupi na mwili katika blokii moja. Unapoiunda kutoka kwenye upau wa zana, unaingiza muhtasari kwanza kisha unaendelea kuandika maudhui chini yake.
Hali ya kufunguka iliyowekwa kwa pembetatu huhifadhiwa kwenye hati na kuwa hali ya mwanzo katika mwonekano uliochapishwa. Wakati wa kuhariri pia unaweza kubofya pembetatu kufungua na kufunga kizuizi.
Ndani ya seli au kizuizi kingine, ni kizuizi hicho cha kukunja pekee kinachofunguka au kufungwa. Kishale au uteuzi ukiwa ndani ya maudhui yanayofungwa, huhamishwa nje; uteuzi ulio sehemu nyingine huhifadhiwa.
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('sw')
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()Mitindo ya CSS
Tia mtindo kwenye blokii ya maelezo kwa .nabi-content details, na kichwa kwa .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; }Sifa ya open ni hali ya mwanzo ya kufunguka iliyohifadhiwa na mwandishi. CSS inaweza kutia mtindo kwenye hali hii, lakini ni bora kutoilazimisha hali yenyewe.