teofanis/searchable-dropdown

可搜索下拉菜单

维护者

详细信息

github.com/teofanis/searchable-dropdown

主页

源代码

问题

安装: 48

依赖项: 0

建议者: 0

安全: 0

星标: 6

关注者: 2

分支: 3

开放问题: 0

语言：Blade

1.5 2023-03-30 22:59 UTC

Requires

Requires (Dev)

MIT 67a72c148971583df387d0b990079007ecc6ba1c

  • Teofanis Papadopulos <teos_97.woop@hotmail.com>

teofanissearchable-dropdown

This package is auto-updated.

Last update: 2024-09-30 01:32:33 UTC

README

Latest Version on Packagist Build Status Quality Score Total Downloads

可搜索下拉菜单是一个使用 Alpine JS、Tailwind 和 Blade 组件构建的下拉菜单组件。它可以作为一个普通的下拉菜单或者多选下拉菜单使用。

安装

您可以通过 Composer 安装此包

composer require teofanis/searchable-dropdown

发布下拉菜单的配置和资源文件

php artisan vendor:publish --tag=searchable-dropdown-config
php artisan vendor:publish --tag=searchable-dropdown-assets

最后，将下拉菜单样式和脚本添加到布局文件的头部部分。

@searchableDropdownStyles
@searchableDropdownScripts

使用

以下是如何在 Blade 视图中使用下拉菜单的示例。

# 简单选择 & 多选

dropdown

- 选择

<x-searchable-dropdown
    name="pizzas"
    entangle="pizzaType"
    :context="$this"
    :data="$pizzas"
    in_live_wire="true"
    no_results_message="No Pizzas found"
    placheholder="Choose your Pizza"
    search_placeholder="Search for pizzas..."
    />

- 多选

<x-searchable-dropdown
    name="toppings"
    entangle="chosenToppings"
    :context="$this"
    :data="$toppings"
    in_live_wire="true"
    :multiselect="true"
    no_results_message="No toppings found"
    placheholder="Select your toppings"
    search_placeholder="Search toppings..."
    />

# 自定义 & 属性

大多数属性在 config/searchable-dropdown-config.php 中已设置默认值，这些默认值适用于大多数用例。

占位符默认值 
   
'placeholders' => [
       'default-no-results-message' => 'No Results Found',
       'default-placeholder' => 'Select an option',
       'default-search-placeholder' => 'Search...',
   ]
设置默认值 
     'settings' => [
       'default-is-multiselect' => false,
       'default-is-in-livewire' => false, 
       'default-list-item-alignment' => 'text-left'
   ],
主题样式

使用主题样式，您可以对下拉菜单的颜色方案进行一些小的调整，并使用 Tailwind 类样式包装器、标签或按钮。

   'styles' => [
       'theme' => [
           'default-text-color' => 'text-gray-900',
           'default-primary-color' => 'indigo-600',
           'default-secondary-color' => 'white',
       ],
       'classes' => [ 
           'wrapper' => 'inline-block w-full rounded-md shadow-sm',
           'label' => 'block tracking-wide text-xs font-bold mb-4 char-style-medium cursor-pointer leading-none text-mbr_blue font-hairline',
           'button' => 'relative z-0 w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5',
       ]
   ],

要完全自定义下拉菜单的外观和感觉，请发布包的视图。

测试

composer test

变更日志

请参阅 CHANGELOG 了解最近更改的更多信息。

贡献

请参阅 CONTRIBUTING 了解详情。

安全

如果您发现任何与安全相关的问题，请通过电子邮件 teos_97@hotmail.com 联系，而不是使用问题跟踪器。

鸣谢

许可协议

MIT 许可协议 (MIT)。请参阅 许可文件 了解更多信息。