README

您所熟悉和喜爱的 TALL 栈预设 - 增加了一些额外的移动端元素。

如果您不熟悉这个名字，它是一个缩写，描述了该堆栈中涉及的主要技术

本包的一些显著特性包括

来自 Laravel TALL 预设包的所有您所熟悉和喜爱的功能
移动端 UI 体验
浮动操作按钮
主题选择器（系统、浅色、深色）
滚动时隐藏标题和工具栏的能力

注意：如果您正在寻找支持 TALL 堆栈的应用程序模板，请查看 Laravel Jetstream。它包含身份验证框架、账户管理、团队支持。

安装

此预设旨在安装到新的 Laravel 应用程序中。在继续之前，请遵循 Laravel 的安装说明，确保您有一个运行环境。

安装（无身份验证）

然后只需运行以下命令

composer require livewire/livewire johntrickett86/tall-mobile
php artisan ui tall
npm install
npm run dev

安装（带身份验证）

如果您想在新的 Laravel 应用程序中安装预设及其身份验证框架，请确保在 ui 命令中使用 --auth 标志

composer require livewire/livewire johntrickett86/tall-mobile
php artisan ui tall --auth
php artisan migrate
npm install
npm run dev

身份验证框架的一些显著特性包括

由 Livewire 组件和单操作控制器提供支持
捆绑了预写的测试

所有路由、组件、控制器和测试都发布到您的应用程序中。背后的想法是，您对自己的应用程序中的每个方面都有完全的控制权，这样您就不需要深入到供应商文件夹中去了解事物是如何工作的。

CSS 清理

Tailwind 使用 PurgeCSS 从您的生产 CSS 构建中删除任何未使用的类。您可以在 tailwind.config.js 文件的 purge 部分中修改或删除此行为。有关更多信息，请参阅 Tailwind 文档。

移除包

如果您在安装预设后不想保留此包，可以安全地移除它。与默认的 Laravel 预设不同，此预设将所有身份验证逻辑发布到项目的 /app 目录中，因此它是完全多余的。

关于分页的说明

如果您正在使用分页，您可以将默认的分页视图设置为由服务提供商的 boot 方法提供的那些。

use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Paginator::defaultView('pagination::default');

        Paginator::defaultSimpleView('pagination::simple-default');
    }
}

移动端元素

图标

此包使用由 Ryan Chandler 创建的 Blade Tabler Icons 包。

您会注意到我们通过各种 props 传递图标名称 - 我们使用的是 Tabler 图标名称，但是您可以使用您喜欢的任何图标集。

请查看 Tabler Icons 网站上的可用图标。

头部组件

此包包括两个头部组件。

主头部

第一个是 mobile-header-main 组件，它是默认的头部组件，设计用于显示在应用程序的主页上。

它包括一个用于自定义菜单项的区域，包括下拉菜单

该组件具有一个属性，可以在滚动时动态隐藏标题

<x-partials.headers.mobile-header-main :scroll-hide="true" /> // hides the header when scrolling down
<x-partials.headers.mobile-header-main :scroll-hide="false" /> // fixes the header to the top of the page

页面标题

第二个标题组件是mobile-header-page组件，它也允许自定义标题项。您可以使用这个模板创建额外的页面标题，并相应地重命名。

该组件与主标题具有相同的属性，但还可以自定义标题

<x-partials.headers.mobile-header-main :scroll-hide="true" title="Settings" /> // hides the header when scrolling down
<x-partials.headers.mobile-header-main :scroll-hide="false" title="Settings" /> // fixes the header to the top of the page

工具栏

工具栏组件旨在在页面底部使用，并包括一个可选的浮动操作按钮。

工具栏导航项

您可以通过更新mobile-toolbar blade组件来更新工具栏项

// Update the number of grid columns to match the number of toolbar items
<div class="grid h-full w-full grid-cols-2">

        <x-elements.toolbar-button
                :href="route('home')"
                :active="request()->routeIs('home')"
                icon="home"
                label="Home"
        />
        
        <x-elements.toolbar-button
                :href="route('settings')"
                :active="request()->routeIs('settings')"
                icon="settings"
                label="Settings"
        />
        
</div>

浮动操作按钮

浮动操作按钮是一个可选元素，可以包含在工具栏中。它被设计为用作页面的主要操作按钮。

您可以传递给组件的一些属性

// Modal Example
<x-toolbar
        :scroll-hide="true" // hides the toolbar when scrolling down
        :fab="true" // shows the floating action button
        fabIcon="plus" // the icon to show in the floating action button
        fabType="modal" // can be modal or link
        modal-name="fab-modal" // the name of the modal blade component
    />

// Link Example
<x-toolbar
        :scroll-hide="false" // fixes the toolbar to the bottom of the page
        :fab="true" // shows the floating action button
        fabIcon="arrow-right" // the icon to show in the floating action button
        fabType="link" // can be modal or link
        :href="route('home')"
    />

关于模态的重要说明:

当指定模态名称时，它应与resources/views/modals目录中的blade组件匹配。我们已放入一个空白文件以供您开始。

设置页面

我们还包含了一个骨架设置页面。

用户和头像

如果用户已登录，则用户的姓名和头像将显示在标题中。如果没有用户登录，将显示默认头像。

我们已添加迁移以将'avatar_url'包含到用户表中。

注意：要使用avatar_url，请更新您的用户模型以使此字段可填充！

主题选择器

在系统、浅色和深色主题之间切换。

主题定制

可以通过更新tailwind.config.js文件来自定义主题。我们基于命名颜色进行设置，这些颜色可以轻松更新

theme: {
    extend: {
        colors: {
            transparent: 'transparent',
                current: 'currentColor',
                primary: colors.indigo,
                secondary: colors.emerald, // not currently used
                danger: colors.red, // not currently used
                success: colors.green, // not currently used
                warning: colors.amber, // not currently used
                info: colors.blue, // not currently used
                light: colors.slate,
        },
    },
},

替换主色或浅色将反映在当前的Tailwind样式上。

致谢

John Trickett
Dan Harrin 为基于此的TALL堆栈预设包
Liam Hammett 为基于此的TALL堆栈预设包
Ryan Chandler 为基于此的TALL堆栈预设包以及出色的Blade Tabler图标包
Tailwind UI 为默认的认证和分页视图
所有贡献者

johntrickett86 / tall-mobile

维护者

详细信息