NABI NOTE
Belgeler

Alıntı ​

Alıntılanan metni gruplandırın veya bağlamı birden çok paragrafta ayırın. Boş bir paragrafta > yazıp ardından Boşluk tuşuna basın ya da araç çubuğundan seçili paragrafları alıntıya çevirin.

Alıntı, sıradan paragrafların yanı sıra liste ve resim gibi bloklar da içerebilir. Aynı aralığa yeniden uygulamak, alıntıyı çözüp dıştaki paragraflara döndürür.

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

const selected = [
  quoteWing,
  detailsWing,
  dividerWing,
]
const { nabi, registry } = createNabiWith(selected)

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: 'tr' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'tr' }
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('quote').build()

CSS stilleri ​

Kenarlıkları ve boşlukları değiştirerek alıntıları .nabi-content blockquote ile biçimlendirin.

css
.article-body blockquote {
  margin-inline: 0;
  padding: .25rem 1rem;
  border-inline-start: 4px solid var(--nabi-accent);
  color: var(--nabi-muted);
  background: color-mix(in srgb, var(--nabi-soft) 72%, transparent);
}

blockquote içindeki paragraf yapısını koruyun; yalnızca dış boşluk, kenarlık ve renk gibi sunum özelliklerini değiştirin.