NABI NOTE
Belgeler

Ayrıntılar ​

Kısa bir özeti ve gövdeyi tek blokta gruplandırın. Araç çubuğundan oluşturduğunuzda önce özeti girer, sonra altındaki içeriği yazmayı sürdürürsünüz.

Üçgenle belirlenen açık durumu belgeye kaydedilir ve yayımlanan görünümün başlangıç durumunu belirler. Düzenleme sırasında da üçgene tıklayarak bloğu açıp kapatabilirsiniz.

Tablo hücresinin veya başka bir bloğun içinde yalnızca ilgili açılır blok açılır ve kapanır. İmleç ya da seçim kapanan içeriğin içindeyse dışarı taşınır; başka yerdeki seçim korunur.

Kanatlar
Temel yazı tipiOfset
HTMLDüzenleyici yükleniyor…
JSONnabi-treeDüzenleyici yükleniyor…
Yükle
npm install nabi-note
Kod
import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, quoteWing, detailsWing,
  codeWing, mountViewTools,
} from 'nabi-note'

const selected = [
  quoteWing,
  detailsWing,
  codeWing,
]
const locale = createLocale('tr')
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')
ts
const selected = wings().use('details').build()

CSS stilleri ​

Ayrıntı bloğunu .nabi-content details, başlığını da .nabi-content details > summary ile biçimlendirin.

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; }

open niteliği, yazarın sakladığı başlangıçtaki açık durumdur. CSS bu durumu biçimlendirebilir; fakat durumun kendisini zorlamamak daha iyidir.