NABI NOTE
Documentation

Citation ​

Regroupez du texte cité ou séparez le contexte sur plusieurs paragraphes. Tapez > suivi d'un Espace dans un paragraphe vide, ou basculez les paragraphes sélectionnés en citation depuis la barre d'outils.

Une citation peut contenir des paragraphes ordinaires ainsi que des blocs tels que des listes et des images. Le fait de basculer à nouveau la même plage la décompresse pour la remettre dans les paragraphes extérieurs.

Ailes
Police par défautDécalage
HTMLChargement de l'éditeur…
JSONnabi-treeChargement de l'éditeur…
Installation
npm install nabi-note
Code
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: 'fr' })

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

Styles CSS ​

Stylisez les citations avec .nabi-content blockquote en modifiant les bordures et l'espacement.

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

Conservez la structure des paragraphes à l'intérieur de blockquote, et modifiez uniquement la présentation telle que l'espacement extérieur, les bordures et la couleur.