ken/flash-me

为 Laravel 提供简单的闪存警报

0.0.4 2017-10-21 18:16 UTC

This package is auto-updated.

Last update: 2024-09-09 17:06:00 UTC


README

FlashMe Flash Alert for Laravel,优雅、响应式、灵活且轻量级的无依赖项通知插件,简单易用

入门

如何使用此包

安装

composer require ken/flash-me

php artisan vendor:publish --tag="flashMe"

可选设置

config/flash_me.php

/**
 * Change this /path if you load assets from local
 * example 'css' => asset('/css/app.css'),
 */
return [
	'css' => 'https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.1.5/css/iziToast.min.css',
	'js' => 'https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.1.5/js/iziToast.min.js',
];

resources/lang/en/flash_me.php

return [
	'success' => [
		'type' => 'success',
		'title' => 'Hi...',
		'message' => 'FlashMe is Ready!',
		'options' => [
			'position' => 'topRight', // this is an example option, you can add another option
			'transitionIn' => 'bounceInLeft',
    			'transitionOut' => 'fadeOut',
		],
	],
	'info' => [
		'type' => 'info',
		'title' => 'Hi...',
		'message' => 'FlashMe is Ready!',
		'options' => [
			'position' => 'topRight', // this is an example option, you can add another option
			'transitionIn' => 'bounceInLeft',
    			'transitionOut' => 'fadeOut',
		],
	],
	'warning' => [
		'type' => 'warning',
		'title' => 'Hi...',
		'message' => 'FlashMe is Ready!',
		'options' => [
			'position' => 'topRight', // this is an example option, you can add another option
			'transitionIn' => 'bounceInLeft',
    			'transitionOut' => 'fadeOut',
		],
	],
	'error' => [
		'type' => 'error',
		'title' => 'Hi...',
		'message' => 'FlashMe is Ready!',
		'options' => [
			'position' => 'topRight', // this is an example option, you can add another option
			'transitionIn' => 'bounceInLeft',
    			'transitionOut' => 'fadeOut',
		],
	],
];

其他选项可以使用

	id: null, 
	class: '',
	title: '',
	titleColor: '',
	titleSize: '',
	titleLineHeight: '',
	message: '',
	messageColor: '',
	messageSize: '',
	messageLineHeight: '',
	backgroundColor: '',
	theme: 'light', // dark
	color: '', // blue, red, green, yellow
	icon: '',
	iconText: '',
	iconColor: '',
	image: '',
	imageWidth: 50,
	maxWidth: null,
	zindex: null,
	layout: 1,
	balloon: false,
	close: true,
	closeOnEscape: false,
	rtl: false,
	position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
	target: '',
	targetFirst: true,
	toastOnce: false,
	timeout: 5000,
	animateInside: true,
	drag: true,
	pauseOnHover: true,
	resetOnHover: false,
	progressBar: true,
	progressBarColor: '',
	progressBarEasing: 'linear',
	overlay: false,
	overlayClose: false,
	overlayColor: 'rgba(0, 0, 0, 0.6)',
	transitionIn: 'fadeInUp',
	transitionOut: 'fadeOut',
	transitionInMobile: 'fadeInUp',
	transitionOutMobile: 'fadeOutDown',

用法

如果您要将闪存警报发送到视图,如何使用?例如,如果这是您项目中的控制器

public function testFlash()
{
	flashMe()->success();
	return view('your_view');
}

另一个功能

flashMe()->success();
flashMe()->info();
flashMe()->warning();
flashMe()->error();

显示

您可以在主模板或单个 blade 中显示,在 body 标签结束前

@if (flashMe()->ok())
  {!! flashMe_flash() !!}
@endif

使用技术

演示

贡献

请阅读 CONTRIBUTING.md 了解我们的行为准则和提交拉取请求的过程。

许可

本项目采用 MIT 许可证 - 有关详细信息,请参阅 LICENSE.md 文件。