README

介绍

一组高质量的、未样式的组件，用于使用Laravel创建美观的电子邮件。它减少了使用暗黑模式支持编码响应式电子邮件的痛苦。它还为您处理Gmail、Outlook和其他电子邮件客户端之间的一致性问题。

为什么

我们相信电子邮件是人们沟通的重要媒介。然而，我们需要停止像2010年那样开发电子邮件，重新思考2022年及以后电子邮件应该如何实现。电子邮件开发需要翻新。一次改造。为适应我们今天构建Web应用程序的方式而现代化。

安装

composer require damilaredev/laravel-email

入门

将组件添加到您的电子邮件模板中。根据需要包含样式。

<x-laravel-email-html>
    <x-laravel-email-head>
        <link rel="dns-prefetch" href="//fonts.gstatic.com">

        <x-laravel-email-font
                :font-family="'Br Firma'"
                :web-font="[
                     'url' => 'https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0e.ttf',
                     'format' => 'truetype'
                ]"
                :font-style="'normal'"
                :font-weight="400"
        />
    </x-laravel-email-head>

    <x-laravel-email-body
            style="margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgba(255, 255, 255, 1);font-family:Open Sans, ui-sans-serif, system-ui, -apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Ubuntu,sans-serif"
    >
        <x-laravel-email-container style="margin-left:auto;margin-right:auto; max-width:50em;margin:10px auto;">
            <x-laravel-email-section>
                <x-laravel-email-heading style="font-size:1.75rem;line-height:43.99px;font-weight:700;text-align:left; color: rgba(80, 85, 94, 1);">
                    Laravel Email
                </x-laravel-email-heading>
            </x-laravel-email-section>
        </x-laravel-email-container>
    </x-laravel-email-body>
</x-laravel-email-html>

组件

一组标准组件，帮助您在不处理基于表格的布局和保持过时标记的混乱的情况下构建出色的电子邮件。

HTML

<x-laravel-email-html lang="en" dir="ltr">
    <x-laravel-email-link href="https://example.com">
        Click Me
    </x-laravel-email-link>
</x-laravel-email-html>

头部

<x-laravel-email-head>
    <title>email title</title>
</x-laravel-email-head>

标题

<x-laravel-email-heading as="h1">Lorem Ipsum</x-laravel-email-heading> 

链接

<x-laravel-email-link href="https://example.com">
    Example
</x-laravel-email-link> 

图片

<x-laravel-email-img 
    src="dog.jpg"
    alt="dog"
    width="200"
    height="200"
/>

# Props
| Name   | Type   | Default | Description                        |
| ------ | ------ | ------- | ---------------------------------- |
| alt    | string |         | Alternate description for an image |
| src    | string |         | The path to the image              |
| width  | string |         | The width of an image in pixels    |
| height | string |         | The height of an image in pixels   |

分隔符

<x-laravel-email-hr /> 

段落

<x-laravel-email-text>Lorem Ipsum</x-laravel-email-text>

容器

<x-laravel-email.container>
    <x-laravel-email-link href="https://example.com" style="font-weight: 500; color: #0000;">
        Click here
    </x-laravel-email-link>
</x-laravel-email.container>

正文

 <x-laravel-email-html lang="en">
    <x-laravel-email-body style="background-color: rgba(37, 60, 172, 1);">
        <x-laravel-email-section>
            <x-laravel-email-column style="width: 50%">
                {{-- First column --}}
            </x-laravel-email-column>
            <x-laravel-email-column style="width: 50%">
                {{-- Second column --}}
            </x-laravel-email-column>
        </x-laravel-email-section>
    </x-laravel-email-body>
</x-laravel-email-html>

行

<x-laravel-email-row>
    <x-laravel-email-column>A</x-laravel-email-column>
    <x-laravel-email-column>B</x-laravel-email-column>
    <x-laravel-email-column>C</x-laravel-email-column>
</x-laravel-email-row>

部分

{{-- A Simple Section --}}
<x-laravel-email-section>
    <x-laravel-email-text>Lorem Ipsum</x-laravel-email-text>
</x-laravel-email-section>

{{-- Formatted with `rows` and `columns` --}}
<x-laravel-email-section>
    <x-laravel-email-row>
        <x-laravel-email-column>Column 1, Row 1</x-laravel-email-column>
        <x-laravel-email-column>Column 2, Row 1</x-laravel-email-column>
    </x-laravel-email-row>

    <x-laravel-email-row>
        <x-laravel-email-column>Column 1, Row 2</x-laravel-email-column>
        <x-laravel-email-column>Column 2, Row 2</x-laravel-email-column>
    </x-laravel-email-row>
</x-laravel-email-section>

字体

<x-laravel-email-html lang="en">
   <x-laravel-email-head>
       <x-laravel-email-font
           font-family="Br Firma"
           fallback-font-family="Verdana"
           :web-font="[
                     'url' => 'https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0e.ttf',
                     'format' => 'truetype'
                ]"
           font-style="normal"
           font-weight="400"
       />
   </x-laravel-email-head> 
</x-laravel-email-html>

支持

所有组件都使用最受欢迎的电子邮件客户端进行了测试。

开发

安装依赖项

// PHP >= 8.1 is required

composer install

测试

composer ci

致谢

• React Email (React Email)
• Bu Kinoshita (@bukinoshita)
• Zeno Rocha (@zenorocha)

许可证

MIT许可证