حجم النص
يغيّر درجة حجم النص المحدد. عند تحديد نطاق يطبّقها عليه، وعند وجود مؤشر الكتابة فقط يغيّر حجم نص الفقرة الحالية. لا تُحفظ قيم عشوائية مثل px، بل الدرجات المسموح بها فقط.
الأجنحة
نوع الخط الافتراضيالارتفاع
HTMLجارٍ تحميل المحرّر…
JSONnabi-treeجارٍ تحميل المحرّر…
التثبيت
npm install nabi-noteالشيفرة
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: 'ar' })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'ar' }
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()عند حذف values تُستخدم الدرجات xs وsm وlg وxl. وإذا ضُيّقت القائمة، تُزال عند التحميل الدرجات الأخرى الموجودة في المستندات السابقة.
أنماط CSS
يمكن تغيير الحجم بمحدد الدرجة المحفوظة مثل .nabi-content [data-nabi-size="xs"]. لا تنشئ درجات عشوائية غير موجودة في المستند، واضبط CSS ضمن values المسجلة فقط.
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; }يحافظ فرق ثابت بين الدرجات على معنى اختيار الكاتب في المحرر عند عرض صفحة النشر.