Ukubwa wa Herufi

Badilisha maandishi yaliyochaguliwa hadi hatua ya ukubwa. Eneo likichaguliwa, hatua hutumika kwa eneo hilo; ikiwa kuna kielekezi pekee, hubadilisha ukubwa wa maandishi wa aya ya sasa. Data iliyohifadhiwa huhifadhi hatua zinazoruhusiwa pekee, si thamani za kiholela kama px.

Mabawa
Aina msingi ya herufiKipenyo
HTMLKihariri kinapakiwa…
JSONnabi-treeKihariri kinapakiwa…
Sakinisha
npm install nabi-note
Msimbo
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, boldWing, italicWing, underlineWing,
  strikeWing, typefaceWing, fontSizeWing, clearFormatWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  boldWing,
  italicWing,
  underlineWing,
  strikeWing,
  typefaceWing,
  fontSizeWing,
  clearFormatWing,
]
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: 'sw' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'sw' }
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('fs', {
  values: ['sm', 'lg', 'xl'],
}).build()

Iwapo values itaachwa, hatua za xs, sm, lg, na xl hutumika. Ukipunguza orodha, hatua nyingine zilizomo tayari kwenye hati za zamani huondolewa zinapopakiwa.

Mitindo ya CSS

Unaweza kubadilisha ukubwa kupitia viteuzi vya hatua zilizohifadhiwa kama .nabi-content [data-nabi-size="xs"]. Usibuni hatua za kiholela ambazo hazimo kwenye hati; rekebisha CSS ndani ya values zilizosajiliwa pekee.

css
.article-body [data-nabi-size="xs"] { font-size: .78em; }
.article-body [data-nabi-size="sm"] { font-size: .9em; }
.article-body [data-nabi-size="lg"] { font-size: 1.3em; }
.article-body [data-nabi-size="xl"] { font-size: 1.65em; }

Kudumisha tofauti ya ukubwa kati ya hatua kwa uthabiti huhifadhi maana ambayo mwandishi alichagua kwenye kihariri hati inapochapishwa.