README

介绍

Velo 提供了可以独立于主题使用来标记 HTML 元素的刀片组件。目的是使定制和主题化更加容易。Velo 默认附带了一个 Bootstrap 主题，使用 Bootstrap 4.6（撰写时）。

使用 composer

使用 composer 中的 velo
```
composer require xirelogy/velo
```

使用 velo

可以通过以下方式调用 velo 模板
```
@extends('velo::templates.mobile')
```
可以从 config('view.velo.bridge') 配置 velo 主题的提供者
- Bootstrap 由类 Xirelogy\Velo\Bootstrap\Bridge 提供
- 可以通过以下方式配置提供 Bootstrap 样式的 CSS
```
config('view.velo.bootstrap.css') // URL to the bootstrap CSS
config('view.velo.bootstrap.css_integrity') // The integrity of the bootstrap CSS, optional
```
Velo 提供以 velo- 前缀开始的 CSS 类，但必须在您的项目相关风格文件中包含，这些文件是用 SASS 编写的
```
@import "vendor/xirelogy/velo/resources/sass/velo-common";
```

支持的组件

警报（`x-velo::container.alert`）

包含警报消息的警报框架（例如 Bootstrap 的 Alert 组件）。
使用属性 x-type 来指定警报类型（支持值：primary、secondary、success、danger、warning、info）。
使用属性 x-close-button（无值）来表示需要关闭按钮。

面包屑（`x-velo::container.breadcrumb`）

用于多个面包屑项的面包屑容器。
应包含 x-velo::tag.breadcrumb-item 的项。

面包屑项（`x-velo::tag.breadcrumb-item`）

面包屑项是面包屑容器内的子项。
使用属性 x-active（无值）来表示该项是活动的。

按钮（`x-velo::control.button`）

按钮是一个可点击的控件。
使用属性 x-type 来指定按钮类型（支持值：primary、secondary、success、danger、warning、info）。
使用属性 x-outline（无值）来表示按钮是轮廓按钮。
使用属性 x-action 来指定按钮的动作类型（默认是 button）。
使用属性 x-parent 来指定按钮的父元素（支持值：nav-bar）。
使用数据 busy（属性 data-busy）来指定按钮忙碌时可以使用的文本。

卡片（`x-velo::container.card`）

带有可能标题的卡片框架（例如 Bootstrap 的 Card 组件）。
卡片标题可以在 header 插槽中指定。
卡片标题可以在 title 插槽中指定。
卡片页脚可以在 footer 插槽中指定。
使用属性 x-header-class 来指定卡片标题的额外类。
使用属性 x-title-class 来指定卡片标题的额外类。
使用属性 x-body-class 来指定主体的额外类。
使用属性 x-footer-class 来指定卡片页脚的额外类。

复选框（`x-velo::control.check-box`）

复选框是一个带有“勾选”或“取消勾选”状态的控件。
与复选框相关的相关内容在它的主槽中指定。

数据（`x-velo::container.data`）

用于显示键值数据的容器。
应与数据输入、数据键、数据值标签一起使用。

示例

<x-velo::container.data>
  <x-velo::tag.data-entry>
    <x-velo::tag.data-key>Key #1</x-velo::tag.data-key>
    <x-velo::tag.data-value>Value #1</x-velo::tag.data-value>
  </x-velo::tag.data-entry>
  <x-velo::tag.data-entry>
    <x-velo::tag.data-key>Key #2</x-velo::tag.data-key>
    <x-velo::tag.data-value>Value #2</x-velo::tag.data-value>
  </x-velo::tag.data-entry>
</x-velo::container.data>

对话框（`x-velo::container.dialog`）

带有可能标题和页脚的模态对话框框架（例如 Bootstrap 的 Modal 组件）。
对话框标题可以在 title 插槽中指定。
对话框页脚可以在 footer 插槽中指定。
使用属性 x-close-button（无值）来表示需要关闭按钮。
使用属性 x-vertical-align（无值）来垂直对齐对话框。
使用属性 x-scroll-content（无值）来指示对话框的内容如果超出框架大小则可滚动。
使用属性 x-header-class 来指定对话框标题栏的额外类。
使用属性 x-footer-class 来指定对话框页脚的额外类。

表单组（`x-velo::container.form-group`）

表单组表示表单中的输入部分。
相关标签可以在 label 插槽中指定。
成功验证的内容可以在 validateSucceed 插槽中指定。
验证失败的内容可以在 validateFailed 插槽中指定。

全页（`x-velo::container.full-page`）

全页占据页面的全部宽度和高度，没有边距或填充，且不支持滚动。
全页的目的是在内部锁定“页面”的内容，而不会引起不希望的滚动或副作用。

输入（`x-velo::control.input`）

输入对应于HTML中的各种输入。

输入组（`x-velo::container.input-group`）

输入组是一个带有可能的静态前缀/后缀内容的输入（例如Bootstrap的输入组组件）。

示例

<x-velo::container.input-group>
  <x-velo::container.input-group-prefix>Email</x-velo::container.input-group-prefix>
  <x-velo::control.input/>
  <x-velo::container.input-group-suffix>@example.com</x-velo::container.input-group-suffix>
</x-velo::container.input-group>

输入前缀/后缀可以指定属性 x-target 来指定包含的目标类型（目前支持 button）。

标签输入（`x-velo::control.input-tags`）

用于编辑分隔符分隔的标签的专用输入。
默认分隔符为逗号（,），可以使用 data-separator 指定。

加载中（`x-velo::loading`）

加载中显示正在加载的指示器。
使用属性 x-type 来选择要显示的加载类型（目前支持 spin 和 grow，默认为 spin）。
使用属性 x-parent 来指定加载在特定上下文中使用（目前支持 button）。

导航栏（`x-velo::container.nav-bar`）

导航栏是用于页面导航的条，通常放置在页面的顶部。
使用属性 x-foreground 来指定前景主题（例如 light，dark）。
使用属性 x-background 来指定背景主题（例如 light，dark）。

页面（`x-velo::container.page`）

页面是主要页面内容的容器。
使用属性 x-full-x（无值）来指定页面要占用全部宽度。
使用属性 x-full-y（无值）来指定页面要占用全部高度。

分页器（`x-velo::container.paginator`）

分页器是用于在多个页面之间导航的容器。
应包含 x-velo::tag.paginator-item 的项目。

分页器项目（`x-velo::tag.paginator-item`）

分页器项目是分页器容器内的一个项目。
使用属性 x-type 来指定特殊项目类型（prev 为“上一页”，next 为“下一页”，more 为省略号）。
使用属性 x-active（无值）来表示该项是活动的。
使用属性 x-disabled（无值）来指示该项目是禁用的。

弹出菜单（`x-velo::container.pop-menu`）

弹出菜单是弹出菜单的容器。

弹出菜单项（`x-velo::tag.pop-menu-item`）

弹出菜单项是弹出菜单容器下的一个项目。
使用属性 x-header（无值）来指定当前项是标题样式。
使用属性 x-divider（无值）来指定当前项是分隔符。
使用属性 x-disabled（无值）来指定当前项是禁用的。
使用属性 x-href 来指定当前项是链接（到属性中指定的href目标）。

弹出窗口（`x-velo::container.popup`）

弹出窗口是弹出内容容器。
弹出窗口标题可以在 title 插槽中指定。

单选按钮（`x-velo::control.radio`）

收音机是一个具有“已选中”或“未选中”状态的控件。
与单选按钮相关的内容指定在其主要槽中。

选择（`x-velo::control.select`）

选择是一个具有多个选择选项的控件，类似于HTML中的情况。
可用的选项指定在其对应的<option>标签中。

标签栏（`x-velo::control.tab-bar`）

标签栏是一个由标签项组成的容器控件。
应包含x-velo::control.tab-item的项。

标签项（`x-velo::control.tab-item`）

标签项是一个表示单个标签的控件项。
使用属性x-active（无值）来表示标签项处于活动状态。
使用属性x-disabled（无值）来表示标签项已禁用。

文本区域（`x-velo::container:textarea`）

文本区域对应于HTML中的多行输入（通常）。

缩略图（`x-velo::thumbnail`）

缩略图元素用于图像。
使用属性data-src来指定图像源。

吐司通知（`x-velo::container.toast`）

吐司通知是一个用于显示吐司通知消息的框架（例如Bootstrap的Toast组件）。
吐司标题可以在title槽中指定。
使用属性 x-close-button（无值）来表示需要关闭按钮。

JavaScript库

Velo提供了一些JavaScript库，以便实现动态渲染和客户端交互。

请手动在您的项目中包含对@xirelogy/xw的依赖。
JavaScript在各个模块中提供，应该导入到需要使用的地方。

额外的JavaScript库

在使用Bootstrap自定义时，需要以下额外的JavaScript依赖项

@popperjs/core

xirelogy / velo

维护者

详细信息

README

介绍

使用 composer

使用 velo

支持的组件

警报（`x-velo::container.alert`）

面包屑（`x-velo::container.breadcrumb`）

面包屑项（`x-velo::tag.breadcrumb-item`）

按钮（`x-velo::control.button`）

卡片（`x-velo::container.card`）

复选框（`x-velo::control.check-box`）

数据（`x-velo::container.data`）

对话框（`x-velo::container.dialog`）

表单组（`x-velo::container.form-group`）

全页（`x-velo::container.full-page`）

输入（`x-velo::control.input`）

输入组（`x-velo::container.input-group`）

标签输入（`x-velo::control.input-tags`）

加载中（`x-velo::loading`）

导航栏（`x-velo::container.nav-bar`）

页面（`x-velo::container.page`）

分页器（`x-velo::container.paginator`）

分页器项目（`x-velo::tag.paginator-item`）

弹出菜单（`x-velo::container.pop-menu`）

弹出菜单项（`x-velo::tag.pop-menu-item`）

弹出窗口（`x-velo::container.popup`）

单选按钮（`x-velo::control.radio`）

选择（`x-velo::control.select`）

标签栏（`x-velo::control.tab-bar`）

标签项（`x-velo::control.tab-item`）

文本区域（`x-velo::container:textarea`）

缩略图（`x-velo::thumbnail`）

吐司通知（`x-velo::container.toast`）

JavaScript库

额外的JavaScript库

xirelogy / velo

维护者

详细信息

README

介绍

使用 composer

使用 velo

支持的组件

警报（x-velo::container.alert）

面包屑（x-velo::container.breadcrumb）

面包屑项（x-velo::tag.breadcrumb-item）

按钮（x-velo::control.button）

卡片（x-velo::container.card）

复选框（x-velo::control.check-box）

数据（x-velo::container.data）

对话框（x-velo::container.dialog）

表单组（x-velo::container.form-group）

全页（x-velo::container.full-page）

输入（x-velo::control.input）

输入组（x-velo::container.input-group）

标签输入（x-velo::control.input-tags）

加载中（x-velo::loading）

导航栏（x-velo::container.nav-bar）

页面（x-velo::container.page）

分页器（x-velo::container.paginator）

分页器项目（x-velo::tag.paginator-item）

弹出菜单（x-velo::container.pop-menu）

弹出菜单项（x-velo::tag.pop-menu-item）

弹出窗口（x-velo::container.popup）

单选按钮（x-velo::control.radio）

选择（x-velo::control.select）

标签栏（x-velo::control.tab-bar）

标签项（x-velo::control.tab-item）

文本区域（x-velo::container:textarea）

缩略图（x-velo::thumbnail）

吐司通知（x-velo::container.toast）

JavaScript库

额外的JavaScript库

警报（`x-velo::container.alert`）

面包屑（`x-velo::container.breadcrumb`）

面包屑项（`x-velo::tag.breadcrumb-item`）

按钮（`x-velo::control.button`）

卡片（`x-velo::container.card`）

复选框（`x-velo::control.check-box`）

数据（`x-velo::container.data`）

对话框（`x-velo::container.dialog`）

表单组（`x-velo::container.form-group`）

全页（`x-velo::container.full-page`）

输入（`x-velo::control.input`）

输入组（`x-velo::container.input-group`）

标签输入（`x-velo::control.input-tags`）

加载中（`x-velo::loading`）

导航栏（`x-velo::container.nav-bar`）

页面（`x-velo::container.page`）

分页器（`x-velo::container.paginator`）

分页器项目（`x-velo::tag.paginator-item`）

弹出菜单（`x-velo::container.pop-menu`）

弹出菜单项（`x-velo::tag.pop-menu-item`）

弹出窗口（`x-velo::container.popup`）

单选按钮（`x-velo::control.radio`）

选择（`x-velo::control.select`）

标签栏（`x-velo::control.tab-bar`）

标签项（`x-velo::control.tab-item`）

文本区域（`x-velo::container:textarea`）

缩略图（`x-velo::thumbnail`）

吐司通知（`x-velo::container.toast`）