README

TALL Stack 预设

安装

您可以通过 composer 安装此包

composer require bebo925/tall //includes https://github.com/wire-elements/modal
php artisan tall:install //this will create insall all of your JS dependencies, create a tailwind.config.js, update your webpack.mix.js file, and create an app.blade.php layout file

您需要编辑 'vite.config.js' 文件中的 host 变量，以便热重载功能正常工作。

可选地，您可以使用以下命令发布视图：

php artisan vendor:publish --tag="tall-views"

用法

    <x-tall::button style="primary">My Button</x-tall::button>
    //styles: default, primary, secondary, warning, danger
    //types: button.flat, button.circle, button.outline

    <x-tall::input label="My form element" error="property_name">
        <x-tall::input.text />
    </x-tall::input>

    <x-tall::input label="My form element">
        <x-tall::input.checkbox label="My checkbox" />
    </x-tall::input>

    <x-tall::input label="My form element">
        <x-tall::input.radio label="My radio" />
    </x-tall::input>

    <x-tall::input label="My form element">
        <x-tall::input.textarea />
    </x-tall::input>

    <x-tall::input label="My form element">
        <x-tall::input.rich-text />
    </x-tall::input>

    <x-tall::input label="My form element">
        <x-tall::input.select>
            <option>...</option>
        </x-tall::input.select>
    </x-tall::input>

    <x-tall::panel title="The Title">
        <x-slot name="body">
        The body
        </x-slot>
        <x-slot name="footer">
        //some buttons
        </x-slot>
    </x-tall::panel.body>

    <x-tall::page-heading title="Page Title">
        <x-slot name="meta">
        </x-slot>
        <x-slot name="actions">
        </x-slot>
    </x-tall::page-heading>

    <x-tall::messages dark="true"></x-tall::messages>//exists on layouts/app.blade.php for notification messages
    //session()->flash('message', ['type' => 'success', 'message' => 'This is a success message!']);
    //You can also use Livewire's dispatchBrowserEvent

    //this is just for a modal layout.  Functionality depends on  https://github.com/wire-elements/modal
    <x-tall::modal>
    //slots: title, actions
    </x-tall::modal>

    <x-tall::table>
        <x-slot name="head">
         <x-tall::table.heading>Some Heading</x-tall::table.heading>
        </x-slot>
        <x-slot name="body">
         <x-tall::table.row>
            <x-tall::table.cell>
            Some cell
            </x-tall::table.cell>
         </x-tall::table.row>
        </x-slot>
    </x-tall::table>

    $dispatch('openModal', {component: 'tall-confirmation-dialog', arguments: [
            'message' => 'Are you sure you want to delete?',
            'title' => 'Warning',
            'data' => $someId,
            'confirmText' => 'Delete',
            'style' => 'danger',
            'event' = 'someEventToListenFor'
        ]});

    <livewire:tall-markdown-x :content="$application->faq ?? ''" :style="[
        'toolbar'=> 'flex items-center justify-between',
        'textarea' => 'h-[60vh] focus:outline-none p-4 w-full',
        'preview' => 'p-10',
        'help' => 'p-8 prose max-w-none'
        ]" />

        <x-tall::dropdown>
            <x-slot name="trigger">
                button
            </x-slot>

            <x-tall::dropdown.item>
                item
            </x-tall::dropdown.item>
        </x-tall::dropdown>

        <x-tall::multiple-select :options="MyModel::all()" wire:model.defer="selected"></x-tall::multiple-select>//valueField=id, labelField=name

致谢

• Ryan McQuerry

许可证

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