Tablo
Tablo oluşturmak için araç çubuğundan satır ve sütun seçin. Hücre içinde içerik, birden çok paragraf yerine satır sonlarıyla sürer; Tab ve Shift+Tab sonraki veya önceki hücreye gider.
Satır ya da sütun ekleme ve silme, hücre birleştirme ve başlık hücrelerini değiştirme seçili hücrelerin çevresinde çalışır. Tabloyu sıralanabilir olarak kaydettikten sonra yayımlanmış görünümde sütun sıralaması kullanmak için nabi-note/viewer içinden attachViewer() bağlayın. Birleştirilmiş hücreli tablolar sıralanmaz.
npm install nabi-noteimport {
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: 'tr' })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'tr' }
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()))const selected = wings().use('table').build()CSS stilleri
Tabloyu .nabi-content table, hücreleri .nabi-content :is(th, td) ile biçimlendirin. Hücre yapısını veya viewer'ın eklediği sıralama düğmesini değiştirmeyin.
.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); }Viewer bağlıysa .nabi-sort düğmesini koruyun. Hücre position değerini veya sağ iç boşluğu zorla değiştirirseniz düğmenin üzerine binebilir.