3.3.5 • Published 7 years ago
mjml-invoice v3.3.5
mjml-invoice
Display a table of items with calculated total price.
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column width="100%">
<mj-invoice format="0,00.00€" intl="name:Product Name">
<mj-invoice-item name="TV" price="549€" quantity="1" />
<mj-invoice-item name="DVD - Iron Man II" price="22.99€" quantity="2" />
</mj-invoice>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
attribute | unit | description | default value |
---|---|---|---|
width | percent/px | width of the invoice | n/a |
align | string | left/center/right | left |
color | color | text header & footer color | #b9b9b9 |
font-family | string | font name | Roboto, Ubuntu, Helvetica, Arial, sans-serif |
font-size | px/em | font size | 13px |
line-height | percent/px | space between lines | 22px |
border | string | border-bottom header & border-top footer | 1px solid #ecedee |
container-background-color | color | inner element background color | n/a |
padding | px | supports up to 4 parameters | 10px 25px |
padding-top | px | top offset | n/a |
padding-bottom | px | bottom offset | n/a |
padding-left | px | left offset | n/a |
padding-right | px | right offset | n/a |
intl | string | formatted string to set wording for header and footer | "name:Name;quantity:Quantity;price:Price" |
format | string | how to format total price, based on numeraljs | n/a |
css-class | string | class name, added to the root HTML element created | n/a |
mjml-invoice-item
Display a row in an mj-invoice
component
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-invoice format="0,00.00€" intl="name:Product Name">
<mj-invoice-item name="TV" price="549€" quantity="1" />
<mj-invoice-item name="DVD - Iron Man II" price="22.99€" quantity="2" />
</mj-invoice>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
attribute | unit | description | default value |
---|---|---|---|
color | color | text color | #747474 |
font-family | string | font name | Roboto, Ubuntu, Helvetica, Arial, sans-serif |
font-size | px/em | font size | 14px |
line-height | percent/px | space between lines | 22px |
border | string | border-bottom header & border-top footer | 1px solid #ecedee |
text-align | string | css text align | left (quantity column: right) |
padding | px | supports up to 4 parameters | 10px 25px |
padding-top | px | top offset | n/a |
padding-bottom | px | bottom offset | n/a |
padding-left | px | left offset | n/a |
padding-right | px | right offset | n/a |
name | string | item name | n/a |
price | string/number | price (should already be formatted) | 0 |
quantity | number | quantity | 0 |
css-class | string | class name, added to the root HTML element created | n/a |
3.3.5
7 years ago
3.3.4
7 years ago
3.3.3
7 years ago
3.3.3-beta.2
7 years ago
3.3.3-beta.1
7 years ago
3.3.2
7 years ago
3.3.1
7 years ago
3.3.0
7 years ago
3.3.0-beta.8
7 years ago
3.3.0-beta.7
7 years ago
3.3.0-beta.6
7 years ago
3.3.0-beta.5
7 years ago
3.3.0-beta.4
7 years ago
3.3.0-beta.3
7 years ago
3.3.0-beta.2
7 years ago
3.3.0-beta.1
7 years ago
3.2.2
7 years ago
3.2.0
7 years ago
3.2.0-beta.2
7 years ago
3.2.0-beta.1
7 years ago
3.1.1
7 years ago
3.1.0
7 years ago
3.1.0-beta.1
7 years ago
3.0.2
8 years ago
3.0.1
8 years ago
3.0.0
8 years ago
3.0.0-beta.3
8 years ago
3.0.0-beta.2
8 years ago
3.0.0-beta.1
8 years ago
2.0.11
8 years ago
2.0.10
8 years ago
2.0.10-beta.1
8 years ago
2.0.9
8 years ago
2.0.9-beta.7
8 years ago
2.0.9-beta.6
8 years ago
2.0.9-beta.5
8 years ago
2.0.9-beta.4
8 years ago
2.0.9-beta.3
8 years ago
2.0.9-beta.2
8 years ago
2.0.9-beta.1
8 years ago
2.0.8
8 years ago
2.0.8-beta.1
8 years ago
2.0.7
8 years ago
2.0.7-beta.1
8 years ago
2.0.6
8 years ago
2.0.5
8 years ago
2.0.4
8 years ago
2.0.3
8 years ago
2.0.2
8 years ago
2.0.1
8 years ago
2.0.0
8 years ago
2.0.0-beta.7
8 years ago
2.0.0-beta.6
8 years ago
2.0.0-beta.5
8 years ago
2.0.0-beta.4
8 years ago
2.0.0-beta.3
8 years ago
2.0.0-beta.2
8 years ago