README

将表情选择器添加到您的 Filament 输入字段。

安装

您可以通过 composer 安装此包

composer require tangodev-it/filament-emoji-picker

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="filament-emoji-picker-config"

或者

php artisan filament-emoji-picker:install

如果您想更改选择器的默认语言（英文），请发布配置文件。有关详细信息，请参阅下面的“国际化”部分。

用法

只需将 EmojiPickerAction 添加到现有的输入字段，您就可以开始使用了 🚀。

从未听说过表单操作？ 了解更多。

use TangoDevIt\FilamentEmojiPicker\EmojiPickerAction;

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->suffixAction(EmojiPickerAction::make('emoji-title')),

点击操作以显示表情选择器

选择一个表情，它将被自动添加到字段内容中

您还可以将 EmojiPickerAction 作为提示操作添加

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->hintAction(EmojiPickerAction::make('emoji-title')),

或作为前缀操作

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->prefixAction(EmojiPickerAction::make('emoji-title')),

您还可以将 EmojiPickerAction 添加到 Textarea 字段

Textarea::make('messagge')
    ->required()
    ->maxLength(255)
    ->hintAction(EmojiPickerAction::make('emoji-messagge')),

操作定制

与任何其他操作一样，您可以设置图标和标签（仅在提示操作中可见）。

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->hintAction(EmojiPickerAction::make('emoji-title')
        ->icon('paint-brush')
        ->label('Choose an emoji')
    ),

默认图标为 heroicon-o-face-smile，标签为 Emoji。标签仅在提示操作中可见。

弹出位置

您可以更改弹出窗口的位置和偏移量（以像素为单位）

TextInput::make('title')
    ->required()
    ->maxLength(255)
    ->prefixAction(EmojiPickerAction::make('emoji-titolo')
        ->popupPlacement('bottom-start')
        ->popupOffset([-7, 4])
    ),

可能的放置位置

• auto
• auto-start
• auto-end
• top
• top-start
• top-end
• bottom
• bottom-start
• bottom-end
• right
• right-start
• right-end
• left
• left-start
• left-end

默认位置为 bottom-end，默认偏移量为 [7,4]。

国际化

您可以通过发布配置文件（见“安装”部分）并对其进行编辑来更改选择器的语言

以下是一个意大利语翻译的示例

<?php
// config for TangoDevIt/FilamentEmojiPicker
return [
    'locale' => 'it',
    'i18n' => 'https://cdn.jsdelivr.net.cn/npm/emoji-picker-element@1.21.3/i18n/it.js',
    'datasource' => 'https://cdn.jsdelivr.net.cn/npm/emoji-picker-element-data@1.6.0/it/cldr-native/data.json'
];

有关更多信息，请参阅底层 JavaScript 库文档。

主题

默认情况下，选择器支持浅色和深色模式

要进一步自定义选择器的样式，请参阅底层 JavaScript 库文档。

变更日志

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

贡献

请参阅CONTRIBUTING 以获取详细信息。

安全漏洞

请参阅我们的安全策略 了解如何报告安全漏洞。

致谢

• emoji-picker-element
• TangoDev
• 所有贡献者

许可

MIT 许可证（MIT）。请参阅许可文件 了解更多信息。