NABI NOTE
Dokumentasi

Kutipan ​

Kelompokkan teks kutipan atau pisahkan konteks di beberapa paragraf. Ketik > lalu Spasi pada paragraf kosong, atau ubah paragraf yang dipilih menjadi kutipan dari bilah alat.

Kutipan dapat memuat paragraf biasa maupun blok seperti daftar dan gambar. Mengubah rentang yang sama sekali lagi akan membukanya kembali menjadi paragraf di luar kutipan.

Sayap
Jenis huruf bawaanJarak
HTMLMemuat editor…
JSONnabi-treeMemuat editor…
Pasang
npm install nabi-note
Kode
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: 'id' })

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

Gaya CSS ​

Gaya kutipan dapat diubah melalui .nabi-content blockquote, misalnya batas dan jaraknya.

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

Pertahankan struktur paragraf di dalam blockquote; ubah hanya tampilannya, seperti jarak luar, batas, dan warna.