NABI NOTE
Takardu

Alamar haske ​

Sanya launin alamar haske a bayan rubutun da aka zaɓa. Bayanai da ake adanawa suna ɗauke da sunan launi da aka yarda da shi kawai, ba kowace ƙimar launin CSS ba; saboda haka salon gani da bayanan takarda suna rabuwa.

Fuka-fukai
Nau’in rubutu na asaliTazara
HTMLAna loda edita…
JSONnabi-treeAna loda edita…
Sanya
npm install nabi-note
Lamba
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, textColorWing, highlightWing, linkWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  textColorWing,
  highlightWing,
  linkWing,
]
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: 'ha' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'ha' }
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('hl', {
  values: ['yellow', 'green', 'cyan'],
}).build()

Idan aka bar values, rumbun tsoho shi ne yellow, green, cyan, pink, purple, da orange. Idan aka rage jerin, launin da ba ya ciki ba zai tsaya ba ko da an buɗe tsohuwar takarda.

Salon CSS ​

Takarda tana adana sunan launi kawai. Canja launin editan da shafin da aka buga ta masu canjin CSS.

css
.nabi-content { --nabi-hl-yellow: #fff0a6; }

Idan an canja launuka da yawa tare, sunayen launin takarda za su tsaya yadda suke yayin da yanayin samfurin kawai ya canja.

css
.article-body {
  --nabi-hl-yellow: #fff0a6;
  --nabi-hl-green: #c8f0d8;
  --nabi-hl-pink: #ffd6e5;
}