جدول

جدول بنانے کے لیے ٹول بار سے قطاریں اور کالم منتخب کریں۔ خانے کے اندر مواد متعدد پیراگراف کی بجائے سطر کے وقفوں کے ساتھ جاری رہتا ہے، اور Tab اور Shift+Tab اگلے یا پچھلے خانے میں لے جاتے ہیں۔

قطاریں یا کالم شامل اور حذف کرنا، خانے ملانا، اور سرخی والے خانے بدلنا منتخب خانوں کے گرد کام کرتا ہے۔ جدول کو قابلِ ترتیب بنا کر محفوظ کرنے کے بعد شائع شدہ منظر میں کالم ترتیب استعمال کرنے کے لیے nabi-note/viewer سے attachViewer() جوڑیں۔ ملے ہوئے خانوں والے جدول ترتیب نہیں دیے جاتے۔

پَر
طے شدہ فونٹاونچائی
HTMLایڈیٹر لوڈ ہو رہا ہے…
JSONnabi-treeایڈیٹر لوڈ ہو رہا ہے…
تنصیب
npm install nabi-note
کوڈ
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, taskListWing, tableWings, imageWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  taskListWing,
  ...tableWings,
  imageWing,
]
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: 'ur' })

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

CSS طرزیں

جدول کو .nabi-content table اور خانوں کو .nabi-content :is(th, td) سے طرز دیں۔ خانے کی ساخت یا ویوئر کی شامل کردہ ترتیب بٹن نہ بدلیں۔

css
.article-body table { inline-size: 100%; border-collapse: collapse; }
.article-body :is(th, td) { padding: .6rem .75rem; border: 1px solid var(--nabi-line); }
.article-body th { background: var(--nabi-soft); font-weight: 700; }
.article-body tr:nth-child(even) td { background: color-mix(in srgb, var(--nabi-soft) 45%, transparent); }

اگر ویوئر منسلک ہے تو .nabi-sort بٹن برقرار رکھیں۔ خانے کی position یا دائیں پیڈنگ زبردستی اووررائیڈ کرنے سے یہ ترتیب بٹن پر چڑھ سکتی ہے۔