SlideWire：使用 Livewire 和 Blade 构建演示文稿

SlideWire 是一个 Laravel 扩展包，用于使用 Livewire 和 Blade 组件构建基于浏览器的演示文稿。幻灯片是 Blade 模板，渲染为全页面 Livewire 组件，允许使用公共属性、`with()` 方法以及完整的 Livewire 组件模型。

# 制作幻灯片

一副牌使用 <x-slidewire::deck> 和 <x-slidewire::slide> 组件。下面的示例创建了一个简单的演示文稿，使用了霓虹灯主题和淡入淡出过渡效果：

<
x-slidewire::甲板

主题
=
“氖”

过渡
=
“褪色”
>
<
x-slidewire::slide
>
<
x-slidewire::markdown
>
## 你好，SlideWire
使用 Blade 和 Livewire 构建的演示文稿。
</
x-slidewire::markdown
>
</
x-slidewire::slide
>
<
x-slidewire::slide
>
<
x-slidewire::code

语言
=
“php”
>
Route::slidewire('/slides/hello', 'demo/hello');
</
x-slidewire::code
>
</
x-slidewire::slide
>
</
x-slidewire::甲板
>

# 片段

使用 <x-slidewire::fragment> 该组件用于在幻灯片中逐步显示内容。SlideWire 会依次显示每个片段，然后再显示下一张幻灯片：

<
x-slidewire::slide
>
<
x-slidewire::片段
>第一点</
x-slidewire::片段
>
<
x-slidewire::片段
>第二点</
x-slidewire::片段
>
<
x-slidewire::片段
>第三点</
x-slidewire::片段
>
</
x-slidewire::slide
>

# 垂直滑轨堆叠

对于二维卡组， <x-slidewire::vertical-slide> 分组会滑入水平位置下方的垂直堆栈中，让您无需离开主流程即可深入了解某个主题：

<
x-slidewire::甲板
>
<
x-slidewire::slide
>概述</
x-slidewire::slide
>
<
x-slidewire::vertical-slide
>
<
x-slidewire::slide
深度解析：第一部分
x-slidewire::slide
>
<
x-slidewire::slide
深度解析：第二部分
x-slidewire::slide
>
</
x-slidewire::vertical-slide
>
<
x-slidewire::slide
>总结</
x-slidewire::slide
>
</
x-slidewire::甲板
>

# 代码高亮和图表

语法高亮功能已捆绑在一起。 菲基 无需额外设置。 <x-slidewire::code> 组件接受一个 language 属性以及可选的主题、字体和字号覆盖：

<
x-slidewire::code

语言
=
“php”
>
public function handle(): void
{
$this->info('来自 SlideWire 的问候！');
}
</
x-slidewire::code
>

美人鱼 幻灯片激活时，系统也支持图表，并在浏览器中呈现图表：

<
x-slidewire::diagram
>
流程图 LR
A[请求] --> B[路由] --> C[控制器]
</
x-slidewire::diagram
>

# 特征

• 七种内置主题 — default , black , white , aurora , sunset , neon ， 和 solarized — 具有六种过渡预设和可调节速度
• 二维导航 — 水平和垂直滑动堆叠，支持键盘、点击、轻触、滑动和基于哈希的深度链接
• 片段 — 渐进式内容在单张幻灯片中逐步显示，然后再切换到下一张
• 语法高亮 — 通过 Phiki 捆绑销售，无需额外设置
• 美人鱼图表支持 — 当幻灯片激活时，在客户端渲染
• 和更多...

# 安装

SlideWire 需要 PHP 8.4、Laravel 12 和 Livewire 4.2 或更高版本。通过 Composer 安装：

作曲家

要求

温德拉德里尔/滑线

完整文档可在以下网址获取： slidewire.dev 来源是 GitHub 。