README

Laratify 是一个 Laravel 7 包，其中包含创建表单、表格和自定义 UI 的基本组件，使 Laravel Blade 基础应用的开发变得简单。
此包需要安装 Node.js 以运行 npm 命令，并且它使用 TailwindCSS 作为 UI CSS 样式，并使用 AlpineJS 作为其 JavaScript 响应能力。

有用链接

支持： GitHub 问题
贡献： GitHub Pull 请求

安装

需要 Laratify

composer require muhsenmaqsudi/laratify

发布供应商资源

php artisan vendor:publish --tag="laratify-config"
php artisan vendor:publish --tag="laratify-views"

添加 TailwindCSS 和 AlpineJS UI 预设架构

php artisan laratify:ui

带有认证架构

php artisan laratify:ui --auth

安装 TailwindCSS 和 AlpineJS 并编译它们

npm install && npm run dev

Laratify 组件

Laratify 提供有用的组件，使构建您的应用程序 UI 快速且简单。以下为每个组件的示例。

可用颜色

所有默认 TailwindCSS 颜色调色板都适用于所有需要颜色的组件。

黑色、白色、灰色、红色、橙色、黄色、绿色、蓝绿色、蓝色、靛蓝色、紫色和粉色

所有颜色（黑色和白色除外）都包含从 100 到 900 的颜色阴影，您可以使用 {color-name}-{shade-no} 的方式使用。

警报

    <x-laratify-alert text-color="black"
                      bg-color="green-500">
        Your alert message goes here
    </x-laratify-alert>

徽章

    <x-laratify-badge text-color="gray-700"
                      bg-color="teal-200"
                      rounded>
        Your text goes here
    </x-laratify-badge>

按钮

    <x-laratify-button variant="pink-500"
                       size="lg"
                       outline
                       rounded
                       :events="['onclick' => 'alert(\'clicked\')']"
>
        Button Title
    </x-laratify-button>

注意：可用大小：'sm'、'md'、'lg'

输入

    <x-laratify-input name="email"
                      type="email"
                      label="Email:"
                      id="email_id"
                      placeholder="Enter your email"
                      :value="old('email', $data->email ?? '')">
    </x-laratify-input>

要禁用输入，请设置 disabled 属性，对于只读输入，请设置 readonly 属性**

    <x-laratify-input disabled readonly></x-laratify-input>

复选框

    <x-laratify-checkbox name="terms"
                         label="accept terms & conditions"
                         checkbox-label="accept"
                         id="terms_id"
                         :value="old('terms', $data->terms ?? '')">
    </x-laratify-checkbox>

要禁用复选框，请设置 disabled 属性 \
复选框属性应具有 boolean 迁移列。

选择

    <x-laratify-select name="option"
                       label="Option Label:"
                       first-option="Select your option"
                       :options="[1 => 'option1', 2 => 'option2']"
                       :value="old('option', $data->option ?? '')">
    </x-laratify-select>

如果选项是关联数组，则键用作标签，值用作值。对于顺序数组，值用作标签和值。
:options="['option1', 'option2', 'option3']" => 顺序数组选项
:options="[1 => 'option1', 2 => 'option2']" => 关联数组选项

文件

    <x-laratify-file name="avatar"
                     id="upload"
                     label="Upload your avatar"
                     variant="indigo-500">
    </x-laratify-file>

文本区域

    <x-laratify-textarea name="body"
                         label="Text Body:"
                         placeholder="Your text body goes here"
                         :value="old('body', $data->body ?? '')">
    </x-laratify-textarea>

单选按钮

    <x-laratify-radios name="option"
                       :options="['option1', 'option2', 'option3']"
                       :value="old('option', $data->option ?? '')">
    </x-laratify-radios>

:options="['option1', 'option2', 'option3']" => 顺序数组选项
:options="[1 => 'option1', 2 => 'option2']" => 关联数组选项

下拉列表

    <x-laratify-dropdown name="My Dropdown" :links="[
        'URL link' => '/auth/login', '|', 'Google' => 'https://google.com', 'Login' => 'login'
    ]"
                         bg-color="teal-500"
    >
    </x-laratify-dropdown>

'|' 是下拉列表中的分隔符，因此当您想要分隔链接时使用它

对话框

    <x-laratify-dialog size="lg" scrollable no-transition no-header no-footer no-close close-title="Cancel" ok-title="Submit">
        <x-slot name="activator">
            <x-laratify-button :events="['click' => 'toggleDialog()']" variant="red-500" outline>Open Dialog</x-laratify-button>
        </x-slot>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aut enim eos error eveniet explicabo
        ipsa ipsam laudantium minima nisi obcaecati omnis quam qui reprehenderit sapiente sunt, tenetur veniam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet blanditiis deserunt, dolore harum maxime nam
        nulla quasi voluptate? Adipisci error illum laudantium magnam praesentium quibusdam sit ut. Dolor, dolore,
        rem.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam, autem corporis deserunt dolores ea
        eligendi et impedit magni mollitia natus necessitatibus odio quae recusandae reiciendis sunt suscipit vel
        voluptas?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias, aspernatur atque aut
        consequuntur cumque deleniti distinctio dolorum et facere fugit iusto labore maxime nemo quam quas
        repellendus, reprehenderit voluptatibus!

        <x-slot name="footer">
            <x-laratify-button :events="['click' => 'toggleDialog()']" variant="green-500" rounded>Save</x-laratify-button>
        </x-slot>
    </x-laratify-dialog>

工具提示

    <x-laratify-button id="elButton">Element</x-laratify-button>
    <x-laratify-button id="idButton">Id</x-laratify-button>
    <x-laratify-tooltip content="Tooltip with id" placement="left" append-to="button" no-arrow />
    <x-laratify-tooltip content="Tooltip with element" placement="top-start" append-to="#idButton" />

可用位置

顶部、底部、右侧、左侧
{顶部，底部，右侧，左侧}-开始，{顶部，底部，右侧，左侧}-结束'

注意：请记住在父元素之后放置工具提示

网格 & 网格

    <x-laratify-grids :cols="['all' => 3, 'sm' => 2]" :rows="['all' => 5, 'md' => 3]" :gaps="['all'=> 2, 'md' => 20]">
        <x-laratify-grid :col-start="['all' => 1, 'md'=>2]" :col-end="['all' => 2, 'sm' => 1]" :row-start="['all' => 2, 'lg' => 4]" :row-end="['all' => 4]">
            <div class="h-full bg-blue-500">2</div>
        </x-laratify-grid>
        <x-laratify-grid>
            <div class="h-full bg-red-500">1</div>
        </x-laratify-grid>
        <x-laratify-grid>
            <div class="h-full bg-black">3</div>
        </x-laratify-grid>
        <x-laratify-grid>
            <div class="h-full bg-gray-500">4</div>
        </x-laratify-grid>
    </x-laratify-grids>

容器、列 & 行

    <x-laratify-container class="py-5">
        <x-laratify-row class="h-64 border border-2 border-blue-500" flex-dir="col" align="center" justify="end">
            <x-laratify-col class="px-8" cols="6" md="4" xl="4">
                <div class="text-center bg-blue-400 p-2">1</div>
            </x-laratify-col>
            <x-laratify-col cols="6" md="4" xl="4" order="first">
                <div class="text-center bg-green-300 p-2">2</div>
            </x-laratify-col>
            <x-laratify-col cols="6" md="4" xl="4" flex="grow">
                <div class="text-center bg-green-200 p-2">3</div>
            </x-laratify-col>
        </x-laratify-row>
        <x-laratify-row class="h-64 my-4 border border-2 border-blue-500" align="center" justify="center">
            <x-laratify-col cols="3">
                <div class="text-center bg-yellow-400 p-2">A</div>
            </x-laratify-col>
            <x-laratify-col cols="3" align-self="end">
                <div class="text-center bg-indigo-400 p-2">B</div>
            </x-laratify-col>
            <x-laratify-col cols="3">
                <div class="text-center bg-teal-400 p-2">C</div>
            </x-laratify-col>
        </x-laratify-row>
    </x-laratify-container>

flex 选项：initial、1、auto、none、增长、增长-0、收缩、收缩-0、
order 选项：1、2、3、4、5、6、7、8、9、10、11、12、first、last、none
align-self 选项：auto、start、center、end、stretch
flex-dir 选项：row、row-reverse、col、col-reverse
align 选项：stretch、start、center、end、baseline（flex 的 align-items）
justify 选项：start、center、end、between、around
align-content 选项：start、center、end、between、around

卡片

    <x-laratify-container class="py-5">
        <x-laratify-row class="h-full my-4" wrap-cols>
            <x-laratify-col cols="full" sm="6" md="4" class="p-2" flex="shrink-0">
                <x-laratify-card title="Card Title" subtitle="Card Subtitle" title-class="text-center" subtitle-class="text-center">
                    <x-slot name="title">
                        <div class="text-blue-500">Card Title</div>
                    </x-slot>
                    <div class="text-sm leading-5 text-black px-4 py-5">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem
                        ipsam
                        quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.
                        Deleniti
                        illo quod repellat.
                    </div>
                </x-laratify-card>
            </x-laratify-col>
            <x-laratify-col cols="full" sm="6" md="4" class="p-2" flex="shrink-0">
                <x-laratify-card title="Card Title" subtitle="Card Subtitle">
                    <div class="text-sm leading-5 text-gray-600 px-4 py-5">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem
                        ipsam
                        quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.
                        Deleniti
                        illo quod repellat.
                    </div>
                </x-laratify-card>
            </x-laratify-col>
            <x-laratify-col cols="full" sm="6" md="4" class="p-2" flex="shrink-0">
                <x-laratify-card title="Card Title" subtitle="Card Subtitle">
                    <div class="text-sm leading-5 text-gray-600 px-4 py-5">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem
                        ipsam
                        quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.
                        Deleniti
                        illo quod repellat.
                    </div>
                </x-laratify-card>
            </x-laratify-col>
        </x-laratify-row>
        
        <x-laratify-card title="Card Title" subtitle="Card Subtitle">
            <dl>
                <div class="bg-gray-100 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm leading-5 font-medium text-gray-500">
                        Full name
                    </dt>
                    <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
                        Muhsen Maqsudi
                    </dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm leading-5 font-medium text-gray-500">
                        Job Title
                    </dt>
                    <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
                        Backend Developer
                    </dd>
                </div>
            </dl>
        </x-laratify-card>
    </x-laratify-container>

导航栏

    <x-laratify-navbar :links="['URL link' => '/auth/login', 'Google' => 'https://google.com', 'Login' => 'login']">
        <x-slot name="logo">
            <img class="block lg:hidden h-8 w-auto"
                 src="https://ui.tailwind.org.cn//img/logos/workflow-mark-on-dark.svg" alt=""/>
            <img class="hidden lg:block h-8 w-auto"
                 src="https://ui.tailwind.org.cn/img/logos/workflow-logo-on-dark.svg" alt=""/>
        </x-slot>
        <x-slot name="profileDropdown">
            <a href="#"
               class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Your
                Profile</a>
            <a href="#"
               class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Settings</a>
            <a href="#"
               class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Sign
                out</a>
        </x-slot>
    </x-laratify-navbar>

表格

    <x-laratify-table stripped hover 
        :columns="[
            'name' => 'Name',
            'title' => 'Title',
            'status' => 'Status',
            'role' => 'Role'
         ]"
        :rows="[
            [
                'id' => 1,
                'name' => 'Bernard Lane',
                'title' => 'Human Resources',
                'status' => 'Active',
                'role' => 'Owner'
            ],
            [
                'id' => 2,
                'name' => 'Muhsen Maqsudi',
                'title' => 'Backend Developer',
                'status' => 'Inactive',
                'role' => 'Admin'
            ],
            [
                'id' => 3,
                'name' => 'Muhsen Maqsudi',
                'title' => 'Backend Developer',
                'status' => 'Inactive',
                'role' => 'Admin'
            ],
         ]"
        :actions="[
                'show' => 'get_view_route_name',
                'edit' => 'get_edit_route_name',
                'delete' => 'get_edit_route_delete'
         ]"
         actions-custom-view="components.partials.my-action"
    >
    </x-laratify-table>

标签页 & 标签

    <x-laratify-tabs :navs="['first', 'second', 'third']">
        <x-laratify-tab id="first">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor odit rerum voluptatibus. Ad alias
            aperiam beatae culpa delectus, dolor eligendi ipsam minus necessitatibus nihil numquam odit provident ut
            vitae voluptatibus?
        </x-laratify-tab>
        <x-laratify-tab id="second">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam aut dicta dolore dolorem
            eligendi expedita in ipsa, ipsum labore maiores porro ratione rem rerum sed sit tempora velit
            voluptatum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, commodi, delectus dicta dignissimos
            dolorum eaque error excepturi expedita nam neque non nulla praesentium quae quaerat quo rerum saepe
            veritatis, voluptatum.
        </x-laratify-tab>
        <x-laratify-tab id="third">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam aut dicta dolore dolorem
            eligendi expedita in ipsa, ipsum labore maiores porro ratione rem rerum sed sit tempora velit
            voluptatum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, commodi, delectus dicta dignissimos
            dolorum eaque error excepturi expedita nam neque non nulla praesentium quae quaerat quo rerum saepe
            veritatis, voluptatum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, aliquam asperiores assumenda at corporis
            cum dolor ea id, impedit ipsa laborum nobis obcaecati ratione rem reprehenderit, unde voluptatem
            voluptatum. Quaerat!
        </x-laratify-tab>
    </x-laratify-tabs>

折叠

        <x-laratify-collapse class="w-1/2 m-2">
            <x-slot name="activator">
                <button
                    class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1"
                    @click="isOpen = !isOpen">
                    Collapse
                </button>
            </x-slot>
            <x-laratify-card title="Card Title" subtitle="Card Subtitle">
                <div class="text-sm leading-5 text-gray-600 px-4 py-5">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem
                    ipsam
                    quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.
                    Deleniti
                    illo quod repellat.
                </div>
            </x-laratify-card>
        </x-laratify-collapse>

包配置

要发布包的配置文件，请运行以下命令

php artisan vendor:publish --tag="laratify-config"

    // app/config.php
    return [
        'text-base-color' => 'white', // changing the app text base color
        'background-base-color' => 'blue-500' // changing the app background base color
    ];

使用的包

Composer 包

laravel/ui

NPM 包

muhsenmaqsudi / laratify

维护者

详细信息

README

安装

Laratify 组件

包配置

使用的包