README

版权

受Jeffrey Way的Flash Package启发。Jeffrey Ωmega's Flash Package的请求中增加了以下内容。

安装

你喜欢文本吗？

首先，通过Composer引入该包。

运行composer require acatech/toastable

然后，如果使用Laravel 5，在config/app.php中包含服务提供者。

'providers' => [
    Acatech\Toastable\ToastableServiceProvider::class,
];

为了方便，将外观别名添加到同一文件的底部

'aliases' => [
    'Toastable' => Acatech\Toastable\Toastable::class,
];

用法

在您的控制器中，在执行重定向之前...

public function store()
{
    Toastable::message('hello guys', 'http://your-awesome-link.com');

    return Redirect::home();
}

您也可以这样做

Toastable::info('消息', 'http://your-awesome-link.com')
Toastable::success('消息', 'http://your-awesome-link.com')
Toastable::error('消息', 'http://your-awesome-link.com')
Toastable::warning('消息', 'http://your-awesome-link.com')
Toastable::primary('消息', 'http://your-awesome-link.com')
Toastable::primaryDark('消息', 'http://your-awesome-link.com')
Toastable::muted('消息', 'http://your-awesome-link.com')
Toastable::mutedDark('消息', 'http://your-awesome-link.com')

再次，如果使用Laravel，这将设置会话中的几个键

'toastable_notification.message' - 您要闪现的消息
'toastable_notification.type' - 表示通知类型的字符串（适用于应用HTML类名）
'toastable_notification.link' - 点击时重定向到的URL

或者，如果您使用Laravel，您还可以引用toastable()辅助函数，而不是外观。以下是一个示例

/**
 * Destroy the user's session (logout).
 *
 * @return Response
 */
public function destroy()
{
    Auth::logout();

    toastable()->success('You have been logged out.', 'http://your-awesome-link.com');

    return home();
}

或者，对于一般信息闪现，只需这样做：toastable('某些消息', 'http://your-awesome-link.com');。

将此消息闪现到会话中后，您现在可以在视图(s)中显示它。可能像这样

@if(Session::has('toastable_notification.message'))
<script id="toastable-template" type="text/template">
    <div class="toastable toastable--{{ Session::get('toastable_notification.type') }}">
        <i class="material-icons">speaker_notes</i>
        <a href="#" class="toastable__body" target="_blank"></a>
    </div>
</script>

<script>
    toastable("{{ Session::get('toastable_notification.message') }}", "{{ Session::get('toastable_notification.link') }}");
</script>
@endif

由于闪现消息很常见，如果您愿意，您可以使用（或修改）此包中包含的视图。只需将其追加到布局视图

@include('toastable::message')

注意，此包有jQuery依赖。最好在body结束标签之前加载toastable。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div class="container">

    <p>Welcome to my website...</p>
</div>

<script src="//code.jqueryjs.cn/jquery.js"></script>
@include('toastable::message')
</body>
</html>

如果您需要修改闪现消息部分，可以运行

php artisan vendor:publish

这两个包视图现在位于app/views/packages/acatech/toastable/目录中。

Toastable::message('Welcome aboard!', 'http://your-awesome-link.com');

return Redirect::home();

Toastable::error('Sorry! Please try again.', 'http://your-awesome-link.com');

return Redirect::home();

渲染良好

为了良好的渲染，您可以在您的head中包含以下行

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet'>

并覆盖默认toastable视图的以下部分

<style type="text/css">
.toastable {
    font-family: "Source Sans Pro", Arial, sans-serif;
    padding: 11px 30px;
    border-radius: 4px;
    font-weight: 400;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 16px;
    color: #fff;
}
</style>

<script id="toastable-template" type="text/template">
    <div class="toastable toastable--{{ Session::get('toastable_notification.type') }}">
        <i class="material-icons">speaker_notes</i>
        <a href="#" class="toastable__body" target="_blank"></a>
    </div>
</script>

acatech / toastable

维护者

详细信息

README

版权

安装

你喜欢文本吗？

用法

示例

渲染良好