README

关于此存储库

此存储库包含具有我们品牌风格的UI组件和资产。它仅设计用于在EXACT Sports品牌网站上使用。

安装

在项目的composer.json文件中，将以下内容添加到'require'列表中

"exactsports/blade-component-library": "dev-main",

在终端中运行以下代码

composer require exactsports/blade-component-library

npm run dev

组件

• 标题
• 链接
• 警告
• 徽章
• 按钮
• 图标链接
• 徽标
• 进度步骤
• 加载旋转器
• 输入
• 表格

所有组件都可以具有class属性，这些属性将与基本组件类合并。
对于某些组件，根据品牌有不同的设置。品牌被添加到.env文件中

BRAND = exact

当前选项有：'exact' 和 'spect8'。

标题

HTML标题使用

到

标签定义。

<x-bcl::headings.h1>Heading 1</x-bcl::headings.h1>
<x-bcl::headings.h2>Heading 2</x-bcl::headings.h2>
<x-bcl::headings.h3>Heading 3</x-bcl::headings.h3>
<x-bcl::headings.h4>Heading 4</x-bcl::headings.h4>
<x-bcl::headings.h5>Heading 5</x-bcl::headings.h5>
<x-bcl::headings.h6>Heading 6</x-bcl::headings.h6>

AlpineJS和Livewire模型也可以使用'x-'和'wire:'属性。

链接

锚标签有四个变量可以传递给组件：href（默认：#）、颜色（默认：蓝色）、图标（默认：null）和目标（默认：_blank）。

<x-bcl::anchor color="blue" href="https://laravel.net.cn" target="_blank" icon="ext">Laravel</x-bcl::anchor>

警告有两个变量可以传递给组件：类型和标志（默认 = false）。

这是一个选择，成功、警告和失败。每个选项都有不同的颜色和图标。

或者，您可以通过以下方式将图标更改为旗帜。

<x-alert class="my-4" type="warning" flag>
    <p class="text-sm">
        You have no credits left.
        <a href="#" class="font-medium underline hover:text-gray-800">
            Upgrade your account to add more credits.
        </a>
    </p>
</x-alert>

AlpineJS和Livewire模型也可以使用'x-'和'wire:'属性。

徽章

按钮有一个可选变量可以传递给组件：颜色。

颜色选择基于品牌，有：logo-orange、亮橙色、朱红色、深灰色、浅棕色和中性色。

AlpineJS和Livewire模型也可以使用'x-'和'wire:'属性。

<x-bcl::badge color="bright-orange">Badge</x-bcl::badge>

按钮

按钮有一个可选变量可以传递给组件：图标。

图标选择有：足球、视频、上传、分享、标签。

AlpineJS和Livewire模型也可以使用'x-'和'wire:'属性。

<x-bcl::button.primary icon="football">Primary Button</x-bcl::button.primary>
<x-bcl::button.secondary>Secondary Button</x-bcl::button.secondary>
<x-bcl::button.cancel>Cancel Button</x-bcl::button.cancel>

图标链接

图标链接是标准锚标签，用图标代替文本。可以传递一个变量给组件：图标。

图标选择有：足球、编辑、删除、分享、标签。

<x-bcl::icon-link href="#" icon="football"></x-bcl::icon-link>

徽标

进度步骤

加载旋转器

加载旋转器与Livewire组件一起使用，可以单独使用或作为其他元素的组成部分，例如按钮。旋转器还需要一些自定义CSS。

旋转器有选项，包括大小（la-sm或la-2x或la-3x）、图标（默认是ball-spin-clockwise，另一个是line-scale）以及是否是深色或浅色（浅色是默认，下面的例子显示了深色选项）。

<div wire:loading.delay wire:target="input" class="absolute inset-y-0 right-0 flex items-center pt-3 pr-3 pointer-events-none">
    <x-loading size="la-sm" shade="la-dark"></x-loading>
</div>

输入

输入可以水平或垂直使用。默认是垂直（标签在输入上方），要改为标签在输入左侧，请添加'inline'属性。

有不同类型的输入：文本、文本区域、复选框和选择。还有两个输入组：复选框和单选按钮。

垂直对齐需要在包含<div>的网格或flex上，请参见下面的例子。垂直对齐不需要在包含div上有类。

每个输入都包含在组组件中，或者对于复选框和单选按钮组，包含在选项组组件中。

每种类型的输入都有自己的属性

组

属性：标签、for、错误（默认为false）、帮助文本（默认为false）和内联（默认为false）。

选项组

属性：内联和标签。

文本

属性：id、name、占位符和类型（默认为文本）。

文本域

属性：id、name、占位符和行数（默认为3）。

选择框

属性：id、name和占位符。

复选框

属性：id、name和值。

选项

属性：id、name、标签、值和类型（单选或复选）。

<div class="grid grid-cols-1 mt-6 gap-y-6 gap-x-4 sm:grid-cols-6">
    <!-- Input: text -->
    <x-input.group for="testText" label="input.text" error="Sample error text" helpText="Sample help text">
        <x-input.text id="testText" name="testText" aria-placeholder="test" placeholder="testText" />
    </x-input.group>
    <!-- Textarea -->
    <x-input.group for="testTextarea" label="input.textarea" error="Sample error text" helpText="Sample help text">
        <x-input.textarea id="testTextarea" name="testTextarea" aria-placeholder="test" placeholder="testTextarea" rows="5"></x-input.textarea>
    </x-input.group>
    <!-- Input: Checkbox -->
    <x-input.group for="testCheckbox" label="input.checkbox" error="Sample error text" helpText="Sample help text">
        <x-input.checkbox id="testCheckbox" name="testCheckbox" value="1" />
    </x-input.group>
    <!-- Select/Dropdown -->
    <x-input.group for="testSelect" label="input.select" error="Sample error text" helpText="Sample help text">
        <x-input.select id="testSelect" name="testSelect">
            <option value="" disabled>Select Column...</option>
            <option value="1">Option 1</option>
            <option value="2">Option 1</option>
        </x-input.select>
    </x-input.group>

    <!-- Input: Radio Group-->
    <x-input.option-group label="input.option-group: Radio">
        <x-input.option type="radio" id="radio-group" name="radio-group" value="1" label="radio 1"></x-input.option>
        <x-input.option type="radio" id="radio-group" name="radio-group" value="2" label="radio 2"></x-input.option>
    </x-input.option-group>

    <!-- Input: Checkbox Group-->
    <x-input.option-group label="input.option-group: Checkbox">
        <x-input.option type="checkbox" id="check-group" name="check-group" value="1" label="check 1"></x-input.option>
        <x-input.option type="checkbox" id="check-group" name="check-group" value="2" label="check 2"></x-input.option>
    </x-input.option-group>
</div>

表格

表格分为基础表和三部分：表头、表体和表脚。