包简介

Livewire component that provides drawers (slide overs) that support multiple children while maintaining state.

README 文档

README

Livewire Slide over Panel

Slide Over Panel is a Livewire component that provides drawers (slide overs) that support multiple children while maintaining state. This package is fork of laravelcm/livewire-slide-overs, a livewire component that renders slide over with state management on livewire.

Installation

To get started, require the package via Composer

composer require batnieluyo/livewire-slide-over

Usage

Add the Livewire directive @livewire('slide-over-panel') directive to your master layout.

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

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

Creating a Slide Over

You can run php artisan make:livewire ShoppingCart to make the initial Livewire component. Open your component class and make sure it extends the SlideOverComponent class:

<?php

namespace App\Livewire;

use WireComponents\LivewireSlideOvers\SlideOverComponent;

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

Opening a Slide over

To open a slide over you will need to dispatch an event. To open the ShoppingCart slide over for example:

<!-- 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

The base modal is made with TailwindCSS. If you use a different CSS framework I recommend that you publish the modal template and change the markup to include the required classes for your CSS framework.

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

Building Tailwind CSS for production

To purge the classes used by the package, add the following lines to your purge array in tailwind.config.js:

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

Because some classes are dynamically build you should add some classes to the purge safelist so your tailwind.config.js should look something like this:

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: [],
}

For 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
}

Configuration

You can customize the Modal via the wire-elements-modal.php config file. This includes some additional options like including CSS if you don't use TailwindCSS for your application, as well as the default modal properties.

To publish the config run the vendor:publish command:

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,
    ],

];

Test

wip..

composer test

Credits

License

Livewire Slide Over is open-sourced software licensed under the MIT license.

batnieluyo/livewire-slide-over 适用场景与选型建议

batnieluyo/livewire-slide-over 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 662 次下载、GitHub Stars 达 0，最近一次更新时间为 2024 年 06 月 27 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「laravel」「livewire」「slide-overs」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 batnieluyo/livewire-slide-over 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 batnieluyo/livewire-slide-over 我们能提供哪些服务？

定制开发 / 二次开发

基于 batnieluyo/livewire-slide-over 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 batnieluyo/livewire-slide-over 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

laravelcm/livewire-slide-overs 2

Livewire component that provides drawers (slide overs) that support multiple children while maintaining state.

lunarphp/livewire-starter-kit 204

Livewire starter kit for Lunar e-commerce.

emmanuel/livewire-datatable-bs4 16

Views for the package MedicOneSystems Livewire Datatables with Bootstrap 4

wika-group/livewire-slide-over 2

Livewire component that provides drawers (slide overs) that support multiple children while maintaining state.

codespb/livewire-notifier 20

Simple Livewire notifications system without any dependencies except TALL-stack.

lee-to/laravel-phone-auth 18

Laravel+livewire phone auth module

batnieluyo/livewire-slide-over

包简介

关键字：

README 文档

README

Livewire Slide over Panel

Installation

Usage

Creating a Slide Over

Opening a Slide over

TailwindCSS

Building Tailwind CSS for production

For TailwindCSS 3x

Configuration

Test

Credits

License

batnieluyo/livewire-slide-over 适用场景与选型建议

与 batnieluyo/livewire-slide-over 相关的其它包

统计信息

GitHub 信息

其他信息