README

此包提供了Blade组件，以便使用Laravel与Material Components。

安装

使用Composer添加包

composer require contextmapp/laravel-material-components

如果您使用Laravel 5.4或更高版本，则包的service provider会自动与您的应用程序注册。否则，您应该在config/app.php应用程序配置中添加提供者。

<?php

return [
    // ...
    
    'providers' => [
        // ...
    
        Contextmapp\MaterialComponents\MaterialComponentsServiceProvider::class,
    ],
];

组件

组件位于mdc命名空间下。

包含MDC样式表和脚本包。

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

要使用Material Icons，请包含图标字体

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

所有组件都设置了data-mdc-auto-init属性，因此当调用mdc.autoInit()时，它们将自动初始化。

按钮

组件：mdc::button

示例

@component('mdc::button', ['type' => 'submit', 'icon' => 'add'])
    Button label
@endcomponent

插槽

默认：按钮标签

参数

type：按钮类型（值：button、submit、link，默认：button）
url：按钮要链接到的URL（当类型为link时必需）
icon：要添加到按钮的图标名称
iconClass：应用于按钮图标的类（默认：material-icons）
method：按钮激活时_method字段值
form：您想要与按钮一起的目标表单ID（如果按钮在表单之外）
variant：Material Design规范按钮变体（允许：unelevated、raised、outlined、dense，默认：无）

浮动操作按钮

组件：mdc::fab

示例

@component('mdc::fab', ['icon' => 'person_add'])
    Add user
@endcomponent

插槽

默认：按钮标签

参数

url：FAB要链接到的URL
icon：必需 - FAB的图标名称
iconClass：应用于按钮图标的类（默认：material-icons）
extended：切换扩展FAB变体（默认：false）
mini：切换迷你FAB变体（默认：false）

卡片

组件：待办

对话框

组件：mdc::dialog

对话框组件包含表单，因此您可以轻松添加表单组件以添加交互性。将提交按钮作为表单操作之一添加即可。当包含在Laravel框架应用程序中时，会自动添加CSRF字段。

示例

@component('mdc::dialog', ['id' => 'some-dialog'])
    @slot('title', 'Do you want to continue?')
    
    Caution: there might be dragons ahead. Or maybe a grue.
    
    @slot('footer')
        @component('mdc::dialog.action', ['action' => 'cancel'])
            Cancel
        @endcomponent
        @component('mdc::dialog.action', ['action' => 'accept'])
            Continue
        @endcomponent
    @endslot
@endcomponent

插槽

默认：对话框正文
title：对话框标题组件
footer：对话框页脚，包含操作按钮

参数

id：必需 - 交互时引用的对话框ID
action：表单提交的端点
method：提交表单时使用的HTTP方法（您可以通过特定的操作按钮覆盖此方法）
scroll：标志表示对话框正文可滚动（默认：false）

对话框操作

组件：mdc::dialog.action

示例

@component('mdc::dialog.action', ['action' => 'cancel'])
    Cancel
@endcomponent

插槽

默认：按钮标签

参数

action：必需 - 对话框操作（允许：accept、cancel）
type：按钮类型（允许：button、submit，默认：button）

抽屉

组件：mdc::drawer

示例

@component('mdc::drawer', ['id' => 'main-nav', 'type' => 'persistent'])
    @component('mdc::list.item', ['url' => url('/users'), 'activated' => true])
        @slot('icon', 'person')
        Users
    @endcomponent
    @component('mdc::list.item', ['url' => url('/settings')])
        @slot('icon', 'settings')
        Settings
    @endcomponent
@endcomponent

插槽

默认：抽屉内容
header：抽屉标题（如果省略，则在抽屉中添加工具栏占位符）

参数

id：必需 - 交互时引用的抽屉ID
type：必需 - 抽屉变体（允许：persistent、temporary）
open：标志以默认打开抽屉渲染

图片列表

组件：待办

输入和控制

对于所有输入，默认插槽充当组件的标签。

共享参数

field: 必填 - 给输入的名称。如果表单之前已提交，这将自动确定旧值
value: 字段的值
required: 切换输入的必填状态
disabled: 切换输入的禁用状态
autofocus 切换输入的自动聚焦状态

复选框

组件: mdc::checkbox

示例

@component('mdc::checkbox', ['field' => 'terms_of_service'])
    I agree to the <a href="{{ url('/terms') }}">Terms of Service</a>;
@endcomponent

参数

valueOn: 当复选框被选中时提交的值（默认: 1）
valueOff: 当复选框未被选中时提交的值（默认: 0）
checked: 设置复选框的选中状态。 (默认: 从 value 字段自动确定)

表单字段

组件: mdc::form-field

你通常不会直接使用此组件，因为它默认包含在其他输入控件中。

示例

@component('mdc::form-field', ['id' => 'my-checkbox'])
    {{-- Some control --}}
    @slot('label')
        A label for the control
    @endslot
@endcomponent

插槽

默认: 输入控件
label: 输入标签

参数

id: 必填 - 输入控件的ID
align_end: 标志以将输入控件移动到表单字段的末尾

单选按钮

组件: mdc::radio

示例

@component('mdc::radio', ['field' => 'season', 'value' => 'winter', 'checked' => true])
    Winter
@endcomponent
@component('mdc::radio', ['field' => 'season', 'value' => 'summer'])
    Summer
@endcomponent

参数

value: 必填 - 选择时设置的值
checked: 标记选项为选中

选择器

组件: mdc::select

示例

@component('mdc::select', ['field' => 'pizza'])
    Your favorite pizza
    @slot('options')
        <option value="hawaii">Hawaii</option>
        <option value="pepperoni">Pepperoni</option>
        <option value="margherita">Margherita</option
    @endslot
@endcomponent

插槽

options: 包含可选选项的插槽

参数

此组件没有其他参数

滑动条

组件：待办

开关

组件: mdc::switch

示例

@component('mdc::switch', ['field' => 'auto_update'])
    Update automatically
@endcomponent

参数

valueOn: 当复选框被选中时提交的值（默认: 1）
valueOff: 当复选框未被选中时提交的值（默认: 0）
checked: 设置复选框的选中状态。 (默认: 从 value 字段自动确定)

文本字段

组件: mdc::text-field

示例

@component('mdc::text-field', ['field' => 'email', 'type' => 'email'. 'required' => true])
    @slot('value', $user->email)
    E-mail Address
@endcomponent

参数

type: 输入的类型（默认: text）
variant: 文本字段的变体（允许: fullwidth, textarea, outlined, 默认: 无）
icon: 添加到文本字段的图标
iconClass: 应用到图标的图标类（默认: material-icons）
iconPlacement: 图标放置的位置（允许: leading, trailing, 默认: leading）
help: 文本字段的帮助文本

文本字段辅助文本

组件: mdc::text-field.helper-text

你通常不会直接使用此组件，因为它默认包含在其他输入控件中。

示例

@component('mdc::text-field.helper-text', ['id' => 'file-picker-description'])
    Choose a square image, at least 250px wide
@endcomponent

插槽

默认: 显示的帮助文本

参数

id: 必填 - 用于文本字段的 aria-describedby 和 aria-controls 的ID
persistent: 标志以使帮助文本永久可见
validation: 标志表示帮助文本是验证消息

列表

组件: mdc::list

示例

@component('mdc::list', ['two_line' => true])
    {{-- Insert some 'mdc::list.item' components here --}}
@endcomponent

参数

non_interactive: 标志以切换非交互式列表变体
dense: 标志以切换密集列表变体
avatars: 标志以切换头像列表变体
two_line: 标志以切换两行列表变体

列表项

组件: mdc::list.item

具有图标的常规列表项的示例

@component('mdc::list.item', ['icon' => 'group', 'url' => url('/groups')])
    Groups
@endcomponent

具有头像的两行列表项的示例

@component('mdc::list.item', ['avatar' => url('/users/john-doe.png')])
    @slot('primary', 'John Doe')
    @slot('secondary', 'john.doe@example.com')
@endcomponent

插槽

默认: 项的文本内容（当设置 primary 插槽时，这将覆盖默认插槽内容）
primary: 项的主要文本内容
secondary: 项的次要文本内容
graphic: 列表项的第一个标签（也可以通过 icon 或 avatar 属性设置）
meta: 列表项的最后一个标签

参数

url: 列表项指向的URL
avatar: 用作列表项图形的头像的URL
icon: 用作列表项图形的图标
iconClass: 列表项图形的图标类（默认: material-icons）
selected: 标志以切换列表项为选中状态
activated: 标志以切换列表项为激活状态

菜单

组件: mdc::menu

示例

@component('mdc::menu', ['id' => 'some-menu'])
    {{-- Populate the menu with 'mdc::list.item' components --}}
@endcomponent

参数

id: 必填 - 当与菜单交互时引用的菜单ID

Snackbars

组件: mdc::snackbar

示例

@component('mdc::snackbar')
@endcomponent

参数

此组件没有参数

标签页

组件：待办

工具栏

组件: mdc::toolbar

示例

@component('mdc::toolbar')
    Users
    @slot('actions')
        @component('mdc::toolbar.action', ['url' => url('/archive'), 'icon' => 'archive'])
            Archived users
        @endcomponent
    @endslot
@endcomponent

插槽

默认值: 工具栏标题
up: 工具栏向上导航操作的插槽，通常用于 mdc::toolbar.menu-action 组件
actions: 末端对齐的工具栏部分的內容，通常与 mdc::toolbar.action 组件一起使用

参数

此组件没有参数

工具栏菜单操作

组件: mdc::toolbar.menu-action

示例

@component('mdc::toolbar.menu-action', ['url' => url('/'), 'icon' => 'arrow_back'])
    Return to index
@endcomponent

插槽

默认值: 工具栏动作的标签

参数

icon: 必需 - 工具栏动作上使用的图标
iconClass: 工具栏动作的图标类（默认: material-icons）
url: 工具栏动作的 URL

工具栏动作

组件: mdc::toolbar.action

示例

@component('mdc::toolbar.action', ['url' => url('/search'), 'icon' => 'search'])
    Search
@endcomponent

插槽

默认值: 工具栏动作的标签

参数

icon: 必需 - 工具栏动作上使用的图标
iconClass: 工具栏动作的图标类（默认: material-icons）
url: 工具栏动作的 URL

顶部应用栏

组件: mdc::top-app-bar

此组件在大多数方面模仿工具栏组件，更多详细信息请参阅工具栏部分

示例

@component('mdc::top-app-bar')
    {{ config('app.name') }}
    @slot('actions')
        @component('mdc::top-app-bar.action', ['url' => url('/archive'), 'icon' => 'archive'])
            Archived users
        @endcomponent
    @endslot
@endcomponent

插槽

默认值: 末端对齐的应用栏部分的內容
actions: 末端对齐的应用栏部分的內容

参数

此组件没有参数

contextmapp / laravel-material-components

维护者

详细信息

README

安装

组件

按钮

浮动操作按钮

卡片

标签

对话框

对话框操作

抽屉

图片列表

输入和控制

复选框

表单字段

单选按钮

选择器

滑动条

开关

文本字段

文本字段辅助文本

列表

列表项

菜单

Snackbars

标签页

工具栏

工具栏菜单操作

工具栏动作

顶部应用栏