mail3-me-button provides a simple way to interact with Mail3 App.
mail3-me-button is a Web Component, Just like an HTML element, mail3-me-button has some built-in attributes:
to(string): an email address as the mail receiver; when provided, the widget displays the number of unread messages between this address and the currently logged-in mailbox in Mail3 app, otherwise it displays the number of all unread messages.lite(boolean): in lite mode,mail3-me-buttonwill be displayed as a circular Icon without text.variant(string): Some default style set formail3-me-button, optionally one ofsolid,outline,ghost, default issolidicon_type(string): Icon type for Mail3 Icon, optionally one ofblack,white,light,solid, default issolidicon_style(string): CSS style for Mail3 Icon
In addition to the above built-in attributes, mail3-me-button also supports passing in all the attributes of the anchor element, such as style, target, etc.
After adding the mail3-me-button script, you can use it like an HTML element.
<!DOCTYPE html>
<html>
<head>
<title>Mail3 Me Button Demo</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- 3KiB gziped with public cdn, it is recommended that self-hosted this script -->
<script src="https://unpkg.com/@mail3/mail3-me"></script>
<mail3-me to="[email protected]" />
</body>
</html>Install mail3-me-button:
$ npm i @mail3/mail3-me
# or yarn
$ yarn add @mail3/mail3-meImport the dependency in the entry file of your application:
// app.js
// only 3KiB gziped
import '@mail3/mail3-me'Use mail3-me-button like an HTML Element:
<App>
<Navbar />
<mail3-me to="[email protected]" />
</App>The style attribute is replaced by the css attribute, and all custom style attribute should pass in a string type instead of Object.
<App>
<Navbar />
<mail3-me css="width: 200px;" icon_style="width: 20px;" />
</App>