README

Livewire滑入面板

滑入面板是一个Livewire组件，提供支持多个子组件并维护状态的抽屉（滑入）功能。此包是laravelcm/livewire-slide-overs的分支，laravelcm/livewire-slide-overs是一个在Livewire上渲染具有状态管理的滑入组件。

安装

要开始使用，请通过Composer要求安装包

composer require batnieluyo/livewire-slide-over

用法

将Livewire指令@livewire('slide-over-panel')添加到您的母版布局中。

<html>
<body>
    <!-- content -->

    @livewire('slide-over-panel')
</body>
</html>

创建滑入面板

您可以通过运行php artisan make:livewire ShoppingCart来创建初始Livewire组件。打开您的组件类，确保它扩展了SlideOverComponent类

<?php

namespace App\Livewire;

use WireComponents\LivewireSlideOvers\SlideOverComponent;

class ShoppingCart extends SlideOverComponent
{
    public function render()
    {
        return view('livewire.shopping-cart');
    }
}

打开滑入面板

要打开滑入面板，您需要分发一个事件。例如，要打开ShoppingCart滑入面板，您可以

<!-- Outside of any Livewire component -->
<button onclick="Livewire.dispatch('openPanel', { component: 'shopper-cart' })">View cart</button>

<!-- Inside existing Livewire component -->
<button wire:click="$dispatch('openPanel', { component: 'shopping-cart' })">View cart</button>

<!-- Taking namespace into account for component Shop/Actions/ShoppingCart -->
<button wire:click="$dispatch('openPanel', { component: 'shop.actions.shopping-cart' })">View cart</button>

TailwindCSS

基本模态是用TailwindCSS制作的。如果您使用不同的CSS框架，我建议您发布模态模板，并将标记更改以包含您的CSS框架所需的类。

php artisan vendor:publish --tag=livewire-slide-over-views

构建生产环境的Tailwind CSS

要在tailwind.config.js中的purge数组中添加以下行，以清除包使用的类

'./vendor/livewire-slide-overs/resources/views/*.blade.php',
'./storage/framework/views/*.php',

由于一些类是动态构建的，您应该将一些类添加到purge安全列表中，因此您的tailwind.config.js应类似于以下内容

module.exports = {
  purge: {
    content: [
      './vendor/livewire-slide-overs/resources/views/*.blade.php',
      './storage/framework/views/*.php',
      './resources/views/**/*.blade.php',
    ],
    options: {
      safelist: {
            pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
            variants: ['sm', 'md', 'lg', 'xl', '2xl']
        } 
    }
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

对于TailwindCSS 3x

export default {
  content: [
    './vendor/livewire-slide-overs/resources/views/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
  ],
  safelist: [
    {
      pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl']
    }
  ],
  // other options
}

配置

您可以通过wire-elements-modal.php配置文件自定义模态。这包括一些附加选项，例如如果您在应用程序中不使用TailwindCSS，则包含CSS，以及默认模态属性。

要发布配置，请运行vendor:publish命令

php artisan vendor:publish --tag=livewire-slide-over-config

<?php


return [

    /*
    |--------------------------------------------------------------------------
    | Include CSS
    |--------------------------------------------------------------------------
    |
    | The modal uses TailwindCSS, if you don't use TailwindCSS you will need
    | to set this parameter to true. This includes the modern-normalize css.
    |
    */
    'include_css' => true,

    /*
    |--------------------------------------------------------------------------
    | Include JS
    |--------------------------------------------------------------------------
    |
    | Livewire UI will inject the required Javascript in your blade template.
    | If you want to bundle the required Javascript you can set this to false
    | and add `require('vendor/wire-elements/modal/resources/js/modal');`
    | to your script bundler like webpack.
    |
    */
    'include_js' => true,
    
    /*
    |--------------------------------------------------------------------------
    | Default Slide Over Position
    |--------------------------------------------------------------------------
    | Configure which way the slide-over will open
    |
    | Available slide overs position
    | Position::Right, Position::Left, Position::Bottom
    |
    */

    'default_position' => \WireComponents\LivewireSlideOvers\Position::Right,

    /*
    |--------------------------------------------------------------------------
    | Slide Over Component Defaults
    |--------------------------------------------------------------------------
    |
    | Configure the default properties for a slide-over component.
    |
    | Supported slide_over_max_width
    | 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
    */

    'component_defaults' => [
        'slide_over_max_width' => 'xl',
        'close_slide_over_on_click_away' => true,
        'close_slide_over_on_escape' => true,
        'close_slide_over_on_escape_is_forceful' => true,
        'dispatch_close_event' => false,
        'destroy_on_close' => false,
    ],

];

测试

wip..

composer test

鸣谢

许可证

Livewire滑入面板是开源软件，受MIT许可证许可。

batnieluyo / livewire-slide-over

维护者

详细信息