2024-07-27 23:49:56 +03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "shortcut icon" href = "./favicon.ico" >
< script src = "./assets/v0.63.6/app-dist/share.js" > < / script >
< link href = "./assets/v0.63.6/libraries/normalize.min.css" rel = "stylesheet" >
< link href = "./assets/v0.63.6/stylesheets/share.css" rel = "stylesheet" >
< link href = "./assets/v0.63.6/libraries/ckeditor/ckeditor-content.css" rel = "stylesheet" >
< title > Widgets< / title >
< / head >
< body data-note-id = "1pOWnHdGAuWR" data-ancestor-note-id = "4yYHqKbLovVX" >
< div id = "layout" >
< div id = "main" >
< nav id = "parentLink" >
parent: < a href = "3eTu21fjtZkj.html"
class="type-text">Scripting< / a >
< / nav >
< h1 id = "title" > Widgets< / h1 >
< div id = "content" class = "type-text ck-content" >
< p > To create a basic widget, simply create a code note with type “JS frontend”. Add the < code > #widget< / code > label in order for it to be loaded at startup.< / p > < pre > < code class = "language-text-plain" > const template = `< div id="my-widget"> < button> Click Me!< /button> < /div> `;
class MyWidget extends api.BasicWidget {
get position() { return 1; }
get parentWidget() { return "left-pane" }
doRender() {
this.$widget = $(template);
return this.$widget;
}
}
module.exports = new MyWidget();< / code > < / pre > < p > < code > parentWidget()< / code > can be given the following values:< / p > < ul > < li > < code > left-pane< / code > - This renders the widget on the left side of the screen where the note tree lives.< / li > < li > < code > center-pane< / code > - This renders the widget in the center of the layout in the same location that notes and splits appear.< / li > < li > < code > note-detail-pane< / code > - This renders the widget < i > with< / i > the note in the center pane. This means it can appear multiple times with splits.< / li > < li > < code > right-pane< / code > - This renders the widget to the right of any opened notes.< / li > < / ul > < hr > < p > Reference:< / p > < ul > < li > < a href = "https://trilium.rocks/X7pxYpiu0lgU" > https://trilium.rocks/X7pxYpiu0lgU< / a > < / li > < li > < a href = "https://github.com/zadam/trilium/wiki/Widget-Basics" > https://github.com/zadam/trilium/wiki/Widget-Basics< / a > < / li > < li > < a href = "https://github.com/zadam/trilium/wiki/Frontend-Basics" > https://github.com/zadam/trilium/wiki/Frontend-Basics< / a > < / li > < / ul >
< / div >
< nav id = "childLinks" class = "list" >
< hr >
< span > Child notes: < / span >
< ul >
< li >
< a href = "8jWguCtuKsAt.html"
class="type-text">Right pane widget< / a >
< / li >
< li >
< a href = "4FXLAtcPhZFo.html"
class="type-text">CSS< / a >
< / li >
< / ul >
< / nav >
< / div >
< button id = "toggleMenuButton" > < / button >
< nav id = "menu" >
< p >
< a class = "type-text" href = "4yYHqKbLovVX.html" > Developer' s Guide< / a >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "VS22Hq5PBFNf.html" > Dependency Management< / a >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "QXCi6Y1SYulw.html" > Adding a new client library< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "C09Dou56ffMe.html" > Having a simpler packaging system< / a >
< / p >
< / li >
< / ul >
< / li >
< li >
< p >
< a class = "type-text" href = "ZlxZh8NH5frM.html" > Building and deployment< / a >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "PHqgH8FCfcod.html" > Documentation< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "btM6L9JtG301.html" > Running a development build< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "UTB518X6X9Uh.html" > Build deliveries locally< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "biDJ9KgbWLgt.html" > Releasing a version< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "rU1hxvgqlA9x.html" > CI< / a >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "BhE2WFknKKHG.html" > Main< / a >
< / p >
< / li >
< / ul >
< / li >
< / ul >
< / li >
< li >
< p >
< a class = "type-text" href = "xtBYDVZPb0gr.html" > Project maintenance< / a >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "s5gsYTbPQr6c.html" > Updating dependencies< / a >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "X4N03xLYEWnN.html" > bettersqlite binaries< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "GMta9hBHsXHQ.html" > Node.js, Electron and `better-sqlite3`< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "jvdjFBOCCrOa.html" > Testing compatibility< / a >
< / p >
2024-08-02 00:20:17 +03:00
< / li >
< li >
< p >
< a class = "type-text" href = "WKn3hLGmKmiH.html" > CKEditor< / a >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "MUGBo4n67kBI.html" > Environment setup< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "icQBu8R1ij57.html" > Building & updating< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "zpR91YHYs6lL.html" > Differences from upstream< / a >
< / p >
< / li >
< / ul >
2024-07-27 23:49:56 +03:00
< / li >
< / ul >
< / li >
< / ul >
< / li >
< li >
< p >
< a class = "type-text" href = "B8hxg4e66cVL.html" > Development and architecture< / a >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "hkrBX8KE1HQl.html" > Internationalisation / Translations< / a >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "Z9N9OKBXXLFW.html" > Guidelines< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "KRC2O84LekPz.html" > i18n-ally< / a >
< / p >
< / li >
< / ul >
< / li >
< li >
< p >
< a class = "type-text" href = "XxqZW6JjkW2g.html" > Live reload< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "3jc1nUXyteo0.html" > Themes< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "U5RtMeGPeZ29.html" > Synchronisation< / a >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "d3dnvVOhur16.html" > Content hashing< / a >
< / p >
< / li >
< / ul >
< / li >
< li >
< p >
< a class = "type-text" href = "mPGbEmYGitWe.html" > Build information< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "zCDxk5VFdsqg.html" > Database< / a >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "wCxCJB3hhojs.html" > attachments< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "wxCwZ1P2SGCx.html" > attributes< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "6x42mhlfLo0o.html" > blobs< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "Vy1PbjSkUast.html" > branches< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "inGKXCChkVYX.html" > entity_changes< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "y2ido6E6tZ0V.html" > etapi_tokens< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "kAfgZERKtVhU.html" > notes< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "FSZoX3cJlJE7.html" > options< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "bzQfhyzDo3Xz.html" > recent_notes< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "QYMncZf5Bu3D.html" > revisions< / a >
< / p >
< / li >
< / ul >
< / li >
< li >
< p >
< a class = "type-text" href = "KbwD5mDpD4CV.html" > Protected entities< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "IuxV242YGaN5.html" > Deleted notes< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "FJ4VR6G2M6VD.html" > Special notes< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "1l1f6WZbaBEZ.html" > Branch prefixes< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "QSkfVssHIngA.html" > Revisions< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "cemIoFLfEGPO.html" > Backlinks< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "VbDoDdiHEemi.html" > Note types< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "UDBwK5Fhr2CT.html" > Safe mode< / a >
< / p >
< / li >
< / ul >
< / li >
< li >
< p >
< a class = "type-text" href = "3eTu21fjtZkj.html" > Scripting< / a >
< / p >
< ul >
< li >
< p >
< strong > Widgets< / strong >
< / p >
< ul >
< li >
< p >
< a class = "type-text" href = "8jWguCtuKsAt.html" > Right pane widget< / a >
< / p >
< / li >
< li >
< p >
< a class = "type-text" href = "4FXLAtcPhZFo.html" > CSS< / a >
< / p >
< / li >
< / ul >
< / li >
< / ul >
< / li >
< / ul >
< / nav >
< / div >
< / body >
< / html >
