README

一组用于Craft Twig模板的简单、可重用组件。

需求

此插件需要Craft CMS 3.0.0-beta.23或更高版本。

安装

要安装插件，请按照以下说明操作。

打开您的终端并转到您的Craft项目
```
 cd /path/to/project
```
然后让Composer加载插件
```
 composer require malven/craft-bits
```
在控制面板中，转到设置→插件，然后点击Bits的“安装”按钮。

组件

表单

文本

{{ text({
  mainClass: 'input-text',
  classes: '',
  showLabel: true,
  name: 'email',
  label: 'Email',
  value: '',
  type: 'text',
  placeholder: 'someone@gmail.com',
  autocomplete: false,
  errors: ['Some error message'],
  disabled: false,
  required: false,
  inputAttrs: {
    'minlength': 1,
    'maxlength': 5
  }
}) }}

文本域

{{ textarea({
  mainClass: 'input-textarea',
  classes: '',
  showLabel: true,
  name: 'comment',
  label: 'Comment',
  value: '',
  placeholder: 'The quick brown fox jumped over the lazy dog.',
  autocomplete: false,
  errors: ['Some error message'],
  disabled: false,
  required: false,
  inputAttrs: {
    'rows': 3
  }
}) }}

可选择

selectable根据提供的type渲染checkbox或radio元素。

{{ selectable({
  mainClass: 'input-selectable',
  classes: '',
  name: 'options',
  label: 'Options',
  type: 'checkbox|radio',
  unselectedSvg: '<svg … />',
  selectedSvg: '<svg … />',
  items: [
    {
      label: 'Burgers',
      value: 'burgers',
      selected: false
    },
    {
      label: 'Pizza',
      value: 'pizza',
      selected: false
    }
  ],
  required: false
}) }}

按钮

btn允许您创建一个a或button元素，这些元素使用相同的底层结构并且可以相同地样式化。

{# A `button` with a type of `button` #}
{{ btn({
  mainClass: 'btn',
  classes: '',
  text: 'Submit',
  type: 'button'
}) }}

{# An `a` that opens in a new window and includes an SVG graphic #}
{% set graphic %}
  {{ source('/example.svg') }}
{% endset %}

{{ btn({
  mainClass: 'btn',
  classes: '',
  text: 'Visit Our Website',
  href: 'https://craftcms.com',
  target: '_blank',
  graphic: graphic
}) }}

工具

验证类

当使用BEM语法（例如foo--large）为修饰类构建复杂站点时，定义哪些修饰符可以一起使用，哪些必须互斥可能会有所帮助。

validateClasses实用程序通过允许您定义一个简单的互斥类组数组来简化这一点。每个组中只能应用一个类，否则将抛出控制台错误。出于性能原因，只有当craft.app.config.general.devMode启用时，控制台错误才会显示。

{# In any Twig template… #}

{% include '_partials/foo' with {
  classes: 'foo--alpha foo--beta foo--gamma'
} only %}


{# In templates/_partials/foo.twig #}

{{ validateClasses(classes, [
  [
    'foo--alpha',
    'foo--beta',
  ],
  [
    'foo--gamma',
  ]
])}}

<div class="foo {{ classes ?? '' }}">
    …
</div>

在上面的示例中，您将看到控制台错误以下CSS类不能在此元素上组合："foo--alpha" 和 "foo--beta"，因为这两个类在同一个组中。

自定义

如果您想直接使用如上所述的Bits组件，那完全没问题。然而，您可能发现创建自己的自定义组件很有价值，这些组件在Bits之上提供一层薄的抽象，使它们对您的项目更易于即插即用。

以下是一个示例

my-project/templates/_macros/forms.twig

{# =============================================================== #}
{# Forms
{# =============================================================== #}
{#
  {% import '_macros/forms' as forms %}
#}

{# ------------------------------------------------------------------ #}
{# Input: Text
{# ------------------------------------------------------------------ #}
{#
  {{ forms.inputText({}) }}

  Renders a common text input.
#}

{%- macro inputText(options = {}) -%}

{% set options = options | merge({
  mainClass: 'my-custom-input'
}) %}

{{ text(options) }}

{%- endmacro -%}

my-project/templates/index.twig

{% import '_macros/forms' as forms %}

{{ forms.inputText({
  name: 'firstName',
  label: 'First Name',
  value: '',
  placeholder: 'someone@gmail.com'
}) }}

现在每次您调用您的自定义宏时，您可以传递与直接传递给Bits相同的任何选项，但您可以确信它将始终应用正确的类和默认选项。

由Chris Malven提供

malven / craft-bits

维护者

详情

README

需求

安装

组件

表单

文本

文本域

可选择

按钮

工具

验证类

自定义