mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-01 13:14:16 +08:00
134 lines
5.6 KiB
HTML
134 lines
5.6 KiB
HTML
---
|
|
layout: docs
|
|
title: RetinaImg
|
|
edit_url: "https://github.com/nylas/N1/blob/master/src/components/retina-img.cjsx"
|
|
---
|
|
|
|
<h2>Summary</h2>
|
|
|
|
<div class="markdown-from-sourecode">
|
|
<p><p>RetinaImg wraps the DOM's standard <code><img</code>> tag and implements a <code>UIImage</code> style
|
|
interface. Rather than specifying an image <code>src</code>, RetinaImg allows you to provide
|
|
an image name. Like UIImage on iOS, it automatically finds the best image for the current
|
|
display based on pixel density. Given <code>image.png</code>, on a Retina screen, it looks for
|
|
<code>image@2x.png</code>, <code>image.png</code>, <code>image@1x.png</code> in that order. It uses a lookup table and caches
|
|
image names, so images generally resolve immediately.</p>
|
|
<p>RetinaImg also introduces the concept of image <code>modes</code>. Specifying an image mode
|
|
is important for theming: it describes the content of your image, allowing theme
|
|
developers to properly adjust it. The four modes are described below:</p>
|
|
<ul>
|
|
<li>ContentPreserve: Your image contains color or should not be adjusted by any theme.</li>
|
|
<li>ContentLight: Your image is a grayscale image with light colors, intended to be shown
|
|
against a dark background. If a theme developer changes the background to be light, they
|
|
can safely apply CSS filters to invert or darken this image. This mode adds the
|
|
<code>content-light</code> CSS class to the image.</li>
|
|
<li>ContentDark: Your image is a grayscale image with dark colors, intended to be shown
|
|
against a light background. If a theme developer changes the background to be dark, they
|
|
can safely apply CSS filters to invert or brighten this image. This mode adds the
|
|
<code>content-dark</code> CSS class to the image.</li>
|
|
<li>ContentIsMask: This image provides alpha information only, and color should
|
|
be based on the <code>background-color</code> of the RetinaImg. This mode adds the
|
|
<code>content-mask</code> CSS class to the image, and leverages <code>-webkit-mask-image</code>.
|
|
Example: Icons displayed within buttons specify ContentIsMask, and their
|
|
color is declared via CSS to be the same as the button text color. Changing
|
|
<code>@text-color-subtle</code> in a theme changes both button text and button icons!<pre><code class="lang-css"> <span class="hljs-class">.btn-icon</span> {
|
|
<span class="hljs-attribute">color</span>: <span class="hljs-variable">@text-color-subtle</span>;
|
|
<span class="hljs-tag">img</span><span class="hljs-class">.content-mask</span> { <span class="hljs-attribute">background-color</span>:<span class="hljs-variable">@text-color-subtle</span>; }
|
|
}
|
|
</code></pre>
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
|
|
<ul>
|
|
</ul>
|
|
|
|
|
|
<h3>Class Properties</h3>
|
|
|
|
<h4 id=propTypes>propTypes <a href="#propTypes" class="link"></a></h4>
|
|
<p><p>React <code>props</code> supported by RetinaImg:</p>
|
|
</p>
|
|
<table class="arguments">
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>mode</em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>(required) One of the RetinaImg.Mode constants. See above for details.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>name</em>
|
|
</td>
|
|
<td>
|
|
<span class="optional">Optional</span>
|
|
<p>A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string'>String</a> image name to display.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>url</em>
|
|
</td>
|
|
<td>
|
|
<span class="optional">Optional</span>
|
|
<p>A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string'>String</a> url of an image to display. May be an http, https, or <code>nylas://<packagename>/<path within package></code> URL.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>fallback</em>
|
|
</td>
|
|
<td>
|
|
<span class="optional">Optional</span>
|
|
<p>A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string'>String</a> image name to use when <code>name</code> cannot be found.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>selected</em>
|
|
</td>
|
|
<td>
|
|
<span class="optional">Optional</span>
|
|
<p>Appends "-selected" to the end of the image name when when true</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>active</em>
|
|
</td>
|
|
<td>
|
|
<span class="optional">Optional</span>
|
|
<p>Appends "-active" to the end of the image name when when true</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>style</em>
|
|
</td>
|
|
<td>
|
|
<span class="optional">Optional</span>
|
|
<p>An <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object'>Object</a> with additional styles to apply to the image.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>resourcePath</em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>(options) Changes the default lookup location used to find the images.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|