mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed ed7d2889e2 to master with MkDocs 1.2.3 and mike 1.1.2
This commit is contained in:
GitHub Action committed
1 parent
95f62ccad6
commit
f4e54c1050
8 files changed
+321
-321
No files matched your search
@@ -1015,7 +1015,7 @@
|
||||
<h3 id="disposers">[Disposers]<a class="headerlink" href="#disposers" title="Permanent link">#</a></h3>
|
||||
<p>• <strong>[Disposers]</strong>: <code>ExtendableDisposer</code></p>
|
||||
<h4 id="inherited-from_1">Inherited from<a class="headerlink" href="#inherited-from_1" title="Permanent link">#</a></h4>
|
||||
<p>LensExtension.__@Disposers@30352</p>
|
||||
<p>LensExtension.__@Disposers@30361</p>
|
||||
<hr />
|
||||
<h3 id="appmenus">appMenus<a class="headerlink" href="#appmenus" title="Permanent link">#</a></h3>
|
||||
<p>• <strong>appMenus</strong>: <code>MenuRegistration</code>[] = <code>[]</code></p>
|
||||
|
||||
@@ -1135,7 +1135,7 @@
|
||||
<h3 id="disposers">[Disposers]<a class="headerlink" href="#disposers" title="Permanent link">#</a></h3>
|
||||
<p>• <strong>[Disposers]</strong>: <code>ExtendableDisposer</code></p>
|
||||
<h4 id="inherited-from_1">Inherited from<a class="headerlink" href="#inherited-from_1" title="Permanent link">#</a></h4>
|
||||
<p>LensExtension.__@Disposers@30352</p>
|
||||
<p>LensExtension.__@Disposers@30361</p>
|
||||
<hr />
|
||||
<h3 id="apppreferences">appPreferences<a class="headerlink" href="#apppreferences" title="Permanent link">#</a></h3>
|
||||
<p>• <strong>appPreferences</strong>: <a href="../../interfaces/Common.Types.AppPreferenceRegistration/"><code>AppPreferenceRegistration</code></a>[] = <code>[]</code></p>
|
||||
|
||||
@@ -889,27 +889,27 @@
|
||||
For example, consider the following HTML and its associated CSS properties:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">"flex column align-center"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">div</span> <span class="p">{</span>
|
||||
<span class="k">display</span><span class="p">:</span> <span class="kc">flex</span><span class="p">;</span>
|
||||
<span class="k">flex-direction</span><span class="p">:</span> <span class="kc">column</span><span class="p">;</span>
|
||||
<span class="k">align-items</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">div</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">flex-direction</span><span class="p">:</span><span class="w"> </span><span class="kc">column</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">align-items</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
</code></pre></div>
|
||||
<p>However, you are free to use any styling technique or framework you like, including <a href="https://github.com/emotion-js/emotion">Emotion</a> or even plain CSS.</p>
|
||||
<h3 id="layout-variables">Layout Variables<a class="headerlink" href="#layout-variables" title="Permanent link">#</a></h3>
|
||||
<p>There is a set of CSS variables available for for basic layout needs.
|
||||
They are located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--unit</span><span class="o">:</span> <span class="nt">8px</span><span class="o">;</span>
|
||||
<span class="nt">--padding</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span>
|
||||
<span class="nt">--margin</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span>
|
||||
<span class="nt">--border-radius</span><span class="o">:</span> <span class="nt">3px</span><span class="o">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--unit</span><span class="o">:</span><span class="w"> </span><span class="nt">8px</span><span class="o">;</span><span class="w"></span>
|
||||
<span class="nt">--padding</span><span class="o">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span><span class="w"></span>
|
||||
<span class="nt">--margin</span><span class="o">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span><span class="w"></span>
|
||||
<span class="nt">--border-radius</span><span class="o">:</span><span class="w"> </span><span class="nt">3px</span><span class="o">;</span><span class="w"></span>
|
||||
</code></pre></div>
|
||||
<p>These variables are intended to set consistent margins and paddings across components.
|
||||
For example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">.</span><span class="nc">status</span> <span class="p">{</span>
|
||||
<span class="k">padding-left</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="nv">--padding</span><span class="p">)</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
|
||||
<span class="k">border-radius</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="nv">--border-radius</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">.</span><span class="nc">status</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">padding-left</span><span class="p">:</span><span class="w"> </span><span class="nb">calc</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="nv">--padding</span><span class="p">)</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mi">2</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--border-radius</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
</code></pre></div>
|
||||
<h2 id="themes">Themes<a class="headerlink" href="#themes" title="Permanent link">#</a></h2>
|
||||
<p>Lens uses two built-in themes defined in <a href="https://github.com/lensapp/lens/tree/master/src/renderer/themes">the themes directory</a> – one light and one dark.</p>
|
||||
@@ -921,14 +921,14 @@ This list then gets injected into the <code>:root</code> element so that any of
|
||||
<p>If you want to preserve Lens's native look and feel, with respect to the lightness or darkness of your extension, you can use the provided variables and built-in Lens components such as <code>Button</code>, <code>Select</code>, <code>Table</code>, and so on.</p>
|
||||
<p>There is a set of CSS variables available for extensions to use for theming.
|
||||
They are all located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--font-main</span><span class="o">:</span> <span class="s1">'Roboto'</span><span class="o">,</span> <span class="s1">'Helvetica'</span><span class="o">,</span> <span class="s1">'Arial'</span><span class="o">,</span> <span class="nt">sans-serif</span><span class="o">;</span>
|
||||
<span class="nt">--font-monospace</span><span class="o">:</span> <span class="nt">Lucida</span> <span class="nt">Console</span><span class="o">,</span> <span class="nt">Monaco</span><span class="o">,</span> <span class="nt">Consolas</span><span class="o">,</span> <span class="nt">monospace</span><span class="o">;</span>
|
||||
<span class="nt">--font-size-small</span><span class="o">:</span> <span class="nt">calc</span><span class="o">(</span><span class="nt">1</span><span class="p">.</span><span class="nc">5</span> <span class="o">*</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span>
|
||||
<span class="nt">--font-size</span><span class="o">:</span> <span class="nt">calc</span><span class="o">(</span><span class="nt">1</span><span class="p">.</span><span class="nc">75</span> <span class="o">*</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span>
|
||||
<span class="nt">--font-size-big</span><span class="o">:</span> <span class="nt">calc</span><span class="o">(</span><span class="nt">2</span> <span class="o">*</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span>
|
||||
<span class="nt">--font-weight-thin</span><span class="o">:</span> <span class="nt">300</span><span class="o">;</span>
|
||||
<span class="nt">--font-weight-normal</span><span class="o">:</span> <span class="nt">400</span><span class="o">;</span>
|
||||
<span class="nt">--font-weight-bold</span><span class="o">:</span> <span class="nt">500</span><span class="o">;</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--font-main</span><span class="o">:</span><span class="w"> </span><span class="s1">'Roboto'</span><span class="o">,</span><span class="w"> </span><span class="s1">'Helvetica'</span><span class="o">,</span><span class="w"> </span><span class="s1">'Arial'</span><span class="o">,</span><span class="w"> </span><span class="nt">sans-serif</span><span class="o">;</span><span class="w"></span>
|
||||
<span class="nt">--font-monospace</span><span class="o">:</span><span class="w"> </span><span class="nt">Lucida</span><span class="w"> </span><span class="nt">Console</span><span class="o">,</span><span class="w"> </span><span class="nt">Monaco</span><span class="o">,</span><span class="w"> </span><span class="nt">Consolas</span><span class="o">,</span><span class="w"> </span><span class="nt">monospace</span><span class="o">;</span><span class="w"></span>
|
||||
<span class="nt">--font-size-small</span><span class="o">:</span><span class="w"> </span><span class="nt">calc</span><span class="o">(</span><span class="nt">1</span><span class="p">.</span><span class="nc">5</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span><span class="w"></span>
|
||||
<span class="nt">--font-size</span><span class="o">:</span><span class="w"> </span><span class="nt">calc</span><span class="o">(</span><span class="nt">1</span><span class="p">.</span><span class="nc">75</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span><span class="w"></span>
|
||||
<span class="nt">--font-size-big</span><span class="o">:</span><span class="w"> </span><span class="nt">calc</span><span class="o">(</span><span class="nt">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span><span class="w"></span>
|
||||
<span class="nt">--font-weight-thin</span><span class="o">:</span><span class="w"> </span><span class="nt">300</span><span class="o">;</span><span class="w"></span>
|
||||
<span class="nt">--font-weight-normal</span><span class="o">:</span><span class="w"> </span><span class="nt">400</span><span class="o">;</span><span class="w"></span>
|
||||
<span class="nt">--font-weight-bold</span><span class="o">:</span><span class="w"> </span><span class="nt">500</span><span class="o">;</span><span class="w"></span>
|
||||
</code></pre></div>
|
||||
<p>as well as in <a href="https://github.com/lensapp/lens/tree/master/src/renderer/themes">the theme modules</a>:</p>
|
||||
<div class="highlight"><pre><span></span><code>--blue: #3d90ce;
|
||||
@@ -951,10 +951,10 @@ They are all located inside <code>:root</code> and are defined in <a href="https
|
||||
</code></pre></div>
|
||||
<p>These variables can be used in the following form: <code>var(--magenta)</code>.
|
||||
For example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">.</span><span class="nc">status</span> <span class="p">{</span>
|
||||
<span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="nv">--font-size-small</span><span class="p">);</span>
|
||||
<span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="nv">--colorSuccess</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">.</span><span class="nc">status</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--font-size-small</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--colorSuccess</span><span class="p">);</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
</code></pre></div>
|
||||
<h3 id="theme-switching">Theme Switching<a class="headerlink" href="#theme-switching" title="Permanent link">#</a></h3>
|
||||
<p>When the light theme is active, the <code><body></code> element gets a "theme-light" class, or: <code><body class="theme-light"></code>.
|
||||
|
||||
@@ -826,14 +826,14 @@ For example consider an extension <code>example-extension</code> which is publis
|
||||
If it were to register a handler with <code>"/display/:type"</code> as its corresponding link then we would match the following URI like this:</p>
|
||||
<p><img alt="Lens Protocol Link Resolution" src="../images/routing-diag.png" /></p>
|
||||
<p>Once matched, the handler would be called with the following argument (note both <code>"search"</code> and <code>"pathname"</code> will always be defined):</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">{</span>
|
||||
<span class="nt">"search"</span><span class="p">:</span> <span class="p">{</span>
|
||||
<span class="nt">"text"</span><span class="p">:</span> <span class="s2">"Hello"</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nt">"pathname"</span><span class="p">:</span> <span class="p">{</span>
|
||||
<span class="nt">"type"</span><span class="p">:</span> <span class="s2">"notification"</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"search"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"text"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Hello"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"pathname"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"notification"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">}</span><span class="w"></span>
|
||||
<span class="p">}</span><span class="w"></span>
|
||||
</code></pre></div>
|
||||
<p>As the diagram above shows, the search (or query) params are not considered as part of the handler resolution.
|
||||
If the URI had instead been <code>lens://extension/@mirantis/example-extension/display/notification/green</code> then a third (and optional) field will have the rest of the path.
|
||||
|
||||
@@ -726,14 +726,14 @@ It could be applied automatically to a cluster by the extension, or the end-user
|
||||
<p>To access the cluster <strong>Settings</strong> page, right-click the relevant cluster in the left side menu and click <strong>Settings</strong>.</p>
|
||||
</div>
|
||||
<p>The resource stack in this example consists of a single kubernetes resource:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">apiVersion</span><span class="p">:</span> <span class="l l-Scalar l-Scalar-Plain">v1</span>
|
||||
<span class="nt">kind</span><span class="p">:</span> <span class="l l-Scalar l-Scalar-Plain">Pod</span>
|
||||
<span class="nt">metadata</span><span class="p">:</span>
|
||||
<span class="nt">name</span><span class="p">:</span> <span class="l l-Scalar l-Scalar-Plain">example-pod</span>
|
||||
<span class="nt">spec</span><span class="p">:</span>
|
||||
<span class="nt">containers</span><span class="p">:</span>
|
||||
<span class="p p-Indicator">-</span> <span class="nt">name</span><span class="p">:</span> <span class="l l-Scalar l-Scalar-Plain">example-pod</span>
|
||||
<span class="nt">image</span><span class="p">:</span> <span class="l l-Scalar l-Scalar-Plain">nginx</span>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">apiVersion</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">v1</span><span class="w"></span>
|
||||
<span class="nt">kind</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Pod</span><span class="w"></span>
|
||||
<span class="nt">metadata</span><span class="p">:</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">example-pod</span><span class="w"></span>
|
||||
<span class="nt">spec</span><span class="p">:</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">containers</span><span class="p">:</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">example-pod</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">image</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">nginx</span><span class="w"></span>
|
||||
</code></pre></div>
|
||||
<p>It is simply a pod named <code>example-pod</code>, running nginx. Assume this content is in the file <code>../resources/example-pod.yml</code>.</p>
|
||||
<p>The following code sample shows how to use the <code>Renderer.K8sApi.ResourceStack</code> to manage installing and uninstalling this resource stack:</p>
|
||||
|
||||
Reference in new issue
Block a user