README

Bootstrap 4 手风琴集成器是一个用于在应用程序中添加手风琴组件的PHP库。
手风琴组件基于Bootstrap 4的折叠组件。

该库将替换所有出现的此代码片段

{accordion=Title First Slide}This is the first slide. {/accordion}

为Bootstrap 4手风琴的HTML代码。

<div class="accordion">
    <div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse_1" aria-expanded="false">
        <div class="icon caret-svg"></div>
        Title First Slide
    </div>
    <div class="accordion-body collapse" id="collapse_1" style="">
        <div class="accordion-body-content">This is the first slide. </div>
    </div>
</div>

安装

要使用此包，您应该通过Composer导入它。

composer require davide-casiraghi/bootstrap-accordion-integrator

导入SCSS文件

将以下行添加到您的resources/sass/app.scss文件中
@import 'vendor/bootstrap-accordion-integrator/accordion';
然后在控制台中运行
npm run dev

使用方法

要替换所有折叠代码片段的出现

$accordion = new BootstrapAccordion('caret-svg');
$accordion->replace_accordion_strings_with_template($text);

或使用外观

$text = BootstrapAccordion::getAccordions($text, 'plus-minus-circle');

图标样式（打开/关闭）

目前有以下图标样式可供在实例化类时指定

caret-svg（默认 - 使用带有mask-image的SVG）
angle-svg（使用带有mask-image的SVG）
plus-minus-circle（使用默认字体）
angle-fontawesome-pro（使用Font Awesome Pro 5字体族）
angle-fontawesome-free（使用Font Awesome Free 4.7.0字体族）
caret-fontawesome-pro（使用Font Awesome Pro 5字体族）
caret-fontawesome-free（使用Font Awesome Free 4.7.0字体族）

要使用Font Awesome样式，您需要在应用程序中已加载Font Awesome。

加载CSS和JS文件

无Laravel

您可以在vendor/bootstrap-accordion/文件夹中导入JS和CSS文件。

有Laravel

发布JS、CSS和图像

您可以在Laravel应用程序中自定义SCSS和JS，通过发布它们。

php artisan vendor:publish

此命令将在您的应用程序中发布以下文件夹

/resources/scss/vendor/bootstrap-accordion/
/resources/js/vendor/bootstrap-accordion/
/public/vendor/bootstrap-accordion-integrator/images/

加载JS文件

在您的app.js文件中，您可以在实例化Vue对象之前require accordion.js文件

require('./bootstrap');
window.Vue = require('vue');

require('./vendor/bootstrap-accordion/accordion');

window.myApp = new Vue({  
    el: '#app'
});

贡献

欢迎提交拉取请求。对于重大更改，请先提交一个问题以讨论您希望更改的内容。

请确保根据需要更新测试。

许可证

MIT

davide-casiraghi / bootstrap-accordion-integrator

维护者

详细信息