mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-10-25 08:51:35 +08:00
867 lines
11 KiB
HTML
867 lines
11 KiB
HTML
<!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>
|
|
|
|
|
|
|
|
</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>
|
|
|
|
|
|
</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>
|