包简介

iOS-quality sheet animations for Laravel/Livewire via Silk HQ

README 文档

README

iOS-quality sheet animations for Laravel/Livewire — powered by Silk HQ.

SilkWire bridges @silk-hq/components (React) with Laravel Blade and Livewire so you can use iOS-style sheets, drawers, dialogs, toasts, and more without writing any React code.

Requirements

PHP 8.2+
Laravel 11 or 12
Livewire 3 or 4
Node.js (for Vite build)

Installation

composer require yousif-nahi/silkwire

Install the NPM peer dependencies:

npm install @silk-hq/components react react-dom @vitejs/plugin-react

Publish the JavaScript assets and entry point:

php artisan vendor:publish --tag=silkwire-js --tag=silkwire-entry

Add the entry point to your vite.config.js:

import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
                'resources/js/silkwire.js', // <-- add this
            ],
        }),
        react(), // <-- add this
    ],
});

Add @silkwireAssets to your layout (before </head>):

<head>
    ...
    @silkwireAssets
</head>

Usage

Basic Sheet

<button x-data @click="$silkwire.open('my-sheet')">Open Sheet</button>

<x-silkwire::sheet id="my-sheet" preset="keyboard">
    <livewire:my-component />
</x-silkwire::sheet>

Available Presets

sheet keyboard dialog drawer bottom-sheet top-sheet detached card sidebar toast detent depth long-sheet page page-bottom lightbox

Stacking Sheets

<x-silkwire::stack id="my-stack">
    <x-silkwire::sheet id="first" preset="keyboard">
        <livewire:first-sheet />
    </x-silkwire::sheet>

    <x-silkwire::sheet id="second" preset="keyboard">
        <livewire:second-sheet />
    </x-silkwire::sheet>
</x-silkwire::stack>

Controlling from Livewire (PHP)

use YousifNahi\SilkWire\Concerns\WithSilkWire;

class MyComponent extends Component
{
    use WithSilkWire;

    public function save(): void
    {
        // ... save logic
        $this->silkClose('my-sheet');
    }
}

Alpine.js API

{{-- Magic --}}
<button x-data @click="$silkwire.open('id')">Open</button>
<button x-data @click="$silkwire.close('id')">Close</button>
<button x-data @click="$silkwire.toggle('id')">Toggle</button>

{{-- Directives --}}
<button x-data x-silkwire-open="id">Open</button>
<button x-data x-silkwire-close="id">Close</button>
<button x-data x-silkwire-toggle="id">Toggle</button>

License

MIT

yousif-nahi/silkwire 适用场景与选型建议

yousif-nahi/silkwire 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 7 次下载、GitHub Stars 达 16，最近一次更新时间为 2026 年 02 月 15 日，在 PHP 生态内属于活跃度较高的组件。

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

围绕 yousif-nahi/silkwire 我们能提供哪些服务？

定制开发 / 二次开发

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

BUG 修复 & 性能优化

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

项目外包 & 长期维护

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

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

yousif-nahi/silkwire

包简介