README

安装

使用 composer 安装此包。

composer require jubeki/laravel-alpine-animations

服务提供者将通过 包发现 自动注册。

如果您不使用自动发现，则应将服务提供者添加到 config/app.php 文件中的 providers 数组中。

// existing providers...
Jubeki\AlpineAnimations\AlpineAnimationsServiceProvider::class,

标准样式是用 Tailwind CSS 编写的。如果您想确保所有样式都添加到您的结果 CSS 文件中，则应将以下路径添加到您的 tailwind.config.js。

module.exports = {
    content: [
        "./vendor/jubeki/laravel-alpine-animations/resources/**/*.blade.php"
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

使用方法

您现在可以使用标准 blade 组件语法开始使用所有可用组件。

如果用户没有启用 JavaScript，则将显示默认选项。

组件

打字

最小示例

<x-alpine-animations::typing
    :values="['First Line', 'Second Line', 'Third Line']"
/>

最大示例（带默认值）

<x-alpine-animations::typing
    :values="['First Line', 'Second Line', 'Third Line']"
    start-at="0"
    init-delay="700"
    deleting-delay="70"
    typing-delay="100"
    start-deleting-delay="1200"
    start-typing-delay="300"
    toggle-cursor-delay="375"
    cursor="border-r-4"
    cursor-hidden="border-transparent"
    cursor-shown="border-black"
/>

您也可以完全禁用光标，这仅留下字符的打字和删除。

<x-alpine-animations::typing
    :values="['First Line', 'Second Line', 'Third Line']"
    :cursor="false"
/>

磁性

最小示例

<x-alpine-animations::magnetic
    inner-class="inline-flex rounded-full bg-indigio-600 items-center justify-center w-14 h-14"
>
    &rightarrow;
</x-alpine-animations::magnetic>

最大示例（带默认值，除了 inner-class）

<x-alpine-animations::magnetic
    inner-class="inline-flex rounded-full bg-indigio-600 items-center justify-center w-14 h-14"
    as="button"
    translate-x-modifier="0.7"
    translate-y-modifier="0.7"
>
    &rightarrow;
</x-alpine-animations::magnetic>

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

致谢

• Julius Kiekbusch
• 所有贡献者

许可证

MIT 许可证（MIT）。请参阅 许可证文件 了解更多信息。