README

内容

关于 Fusion Core UI
要求
安装与设置
当前稳定性
兼容性
路线图
组件
- 警报
- 头像
- 徽章
- 面包屑
- 按钮
- 按钮组
- 卡片
- 复选框
- 下拉菜单
- 标题
- 输入框
- 输入框组
- 列表组
- 模态框
- 导航栏
- 导航链接
- 定价
- 进度条
- 单选框输入
- 统计数据
- 开关（单选框）
- 表格
- 标签页
常见问题解答
维护者

关于 Fusion Core UI

Fusion Core UI 是一个 Laravel Blade & Tailwind CSS 组件库。它汲取了未来主义风格，简洁且时尚。目标是让这个库能够为您的下一个应用或项目带来干净明亮的感受，仿佛直接来自遥远的未来！

22 个免费组件，还在增加！

要求

Laravel 9
PHP 8.1
Alpine.js (https://alpinejs.dev/)
Tailwind CSS V3.4
- 您需要 Tailwind Form 插件：https://github.com/tailwindlabs/tailwindcss-forms

安装和设置

composer require aalicki/fusion-core-ui
确保您的 tailwind.config.js 文件具有以下内容

 content: [
        ...
        './vendor/aalicki/fusion-core-ui/**/*.php',
    ],

当前发布和稳定性

v0.0.1-beta

⚠️ 目前尚未准备好用于生产或开发。

兼容性

我希望这个库能够与您可能依赖的其他 UI 兼容。因此，它包含自动前缀 <x-fcui-_____> 来显示组件，详情将在下面解释（即将推出）。

2024 年路线图

以下元素将包含在 Fusion Core UI 的初始版本中，至少有 1 或 2 个变体。一旦这些功能完成，将标志着 Fusion Core UI 的 1.0 版本，并将被认为是生产级项目就绪。

组件

警报
头像
徽章
面包屑
按钮
按钮组
卡片
复选框
下拉菜单
标题
输入框
输入框组
列表组
模态框
导航栏
导航链接
定价
进度条
单选框输入
统计数据
开关（单选框）
表格
标签页

JavaScript

为了使用可关闭的、模态框和您需要确保 JS 已加载到您的应用中。

此包当前有 少于 10 行 的 JS 代码。

图标

大多数示例使用了 Fontawesome 或 Heroicons。您可以利用您选择的任何库。

示例

以下示例用于展示组件的设计概念和功能。更多示例、属性列表和演示可以在 fusioncore.alickilabs.com 网站上找到。

警报

完整示例，包括图标、类型和可关闭按钮

<x-fcui-alert dismissible icon='<i class="fa-solid fa-house"></i>' type="info">Fusion Core UI Default Alert.</x-fcui-alert>

基本示例（无，可关闭，图标，带有默认类）

<x-fcui-alert>Alert based alert.</x-fcui-alert>

头像

带有传入的配置图像的头像

<x-fcui-avatar img="https://i.pravatar.cc/60" />

不带标签的大头像

<x-fcui-avatar size="lg" label="ZX" />

徽章

默认徽章

<x-fcui-badge>Default Badge</x-fcui-badge>

警告徽章

<x-fcui-badge type="warning">Warning Badge</x-fcui-badge>

带图标的提示信息徽章

<x-fcui-badge type="info" icon='<i class="fa-solid fa-house"></i>'>Warning Badge</x-fcui-badge>

面包屑

一个基本的面包屑组件。它接受一个链接数组和它们的 URL，可能如下所示

 $linkArr = [
    [
        "label" => "Blog",
        "url"   => "/blog"
    ],
    [
        "label" => "Articles",
        "url"   => "/blog/articles"
    ],
    [
        "label" => "New Article",
        "url"   => "/blog/articles/new-article"
    ]
];

<x-fcui-breadcrumbs :linksArray="$linkArr"/>

按钮

一个小按钮

<x-fcui-button size="sm">Small Button</x-fcui-button>

带有主题和图标的默认尺寸按钮

<x-fcui-button type="warning" icon='<i class="fa-solid fa-star"></i>'></x-fcui-button>

按钮组

<x-fcui-button-group>
    <x-fcui-button :btnGroup="true" size="md" type="info" icon='<i class="fa-solid fa-star"></i>'>Button 1</x-fcui-button>
    <x-fcui-button :btnGroup="true" size="md" type="success">Button 2</x-fcui-button>
    <x-fcui-button :btnGroup="true" size="md" type="warning">Button 3</x-fcui-button>
</x-fcui-button-group>

卡片

<x-fcui-card>
    <x-slot:image>
        <img src="https://picsum.photos/400/400" alt="Random Image">
    </x-slot:image>

    <x-slot:title>
        Hello There!
    </x-slot:title>

    <x-slot:body>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime enim ab facere laudantium necessitatibus
        distinctio ullam.
    </x-slot:body>

    <x-slot:footer>
        <x-fcui-button href="/next/page">Go To Article</x-fcui-button>
    </x-slot:footer>
</x-fcui-card>

复选框

<x-fcui-checkbox id="checkOne">Label Goes Here</x-fcui-checkbox>

<x-fcui-checkbox id="checkTwo" labelSide="left" type="success">Example Label on the Left</x-fcui-checkbox>

下拉菜单

<x-fcui-drop-down name="form-name">
    <x-slot:options>
        <option value="pizza">Pizza</option>
        <option value="burger" selected>Burger</option>
        <option value="hot-dog">Hot Dog</option>
    </x-slot:options>
</x-fcui-drop-down>

标题

<x-fcui-heading subheading="This is a subheading." alignment="left">This is a heading!</x-fcui-heading>

输入框

带有标签、占位文本和提示（在输入框下方显示的小文本）的输入框

<x-fcui-input label="Email" placeholder="example placeholder" tip="This is a helpful tip, keep it short."/>

禁用输入框

<x-fcui-input placeholder="placeholder" color="notice" disabled="true"/>

输入框组

包含 3 列的基本输入框组

<x-fcui-input-group columns="3">

    <x-fcui-input label="First Name" placeholder="First" type="success"/>

    <x-fcui-input label="Middle Name" placeholder="Middle" />

    <x-fcui-input label="Last Name" placeholder="Last" />

</x-fcui-input-group>

列表组

带有导航链接组件的基本列表组

 <x-fcui-list-group border="'true'" bg="transparent">

    <x-fcui-nav-link href="#" 
        classes="text-cyan-300 block hover:text-cyan-200 py-1 px-2"
        icon='<i class="fa-solid fa-face-tired"></i>'>Link 1</x-fcui-nav-link>

    <x-fcui-nav-link href="#" 
        classes="text-cyan-300 block hover:text-cyan-200 py-1 px-2"
        active="'true'"
        icon='<i class="fa-solid fa-face-smile"></i>'>Link 2</x-fcui-nav-link>

    <x-fcui-nav-link href="#" 
        classes="text-cyan-300 block hover:text-cyan-200 py-1 px-2"
        icon='<i class="fa-solid fa-face-meh"></i>'>Link 3</x-fcui-nav-link>

</x-fcui-list-group>

模态框

基本模态框

<x-fcui-modal id="modal1">
    <x-slot:content>
        <p class="text-center">
            Nunc viverra eleifend risus tincidunt sodales. Pellentesque et elit ornare, lobortis diam id, facilisis odio.
        </p>
    </x-slot:content>

    <x-slot:triggerButton>
        <x-fcui-button size="default" class="show-modal1">
            Show The Modal
        </x-fcui-button>
    </x-slot:triggerButton>
</x-fcui-modal>

导航栏

使用内联 <li> 标签的基本导航栏。在其当前实现中，它相当有意见性和刚性。目标是使该组件比现在更灵活。

<x-fcui-nav-bar>

    <x-slot:logo>
        <a class="text-4xl" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
            </svg>
        </a>
    </x-slot:logo>

    <x-slot:mobileMenuIcon>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
        </svg>
    </x-slot:mobileMenuIcon>

    <x-slot:links>
        <li>
            <x-fcui-nav-link>Home</x-fcui-nav-link>
        </li>

        <li>
            <x-fcui-nav-link>About Us</x-fcui-nav-link>
        </li>

        <li>
            <x-fcui-nav-link>Our Blog</x-fcui-nav-link>
        </li>

        <li>
            <x-fcui-nav-link>Contact Us</x-fcui-nav-link>
        </li>
    </x-slot:links>

    <x-slot:rightMenuButtons>
        <x-fcui-button href="#">Sign In</x-fcui-button>
    </x-slot:rightMenuButtons>

    <x-slot:mobileFooter>
        <x-fcui-button href="#" class="mx-auto w-full">Sign In</x-fcui-button>
    </x-slot:mobileFooter>

</x-fcui-nav-bar>

导航链接

导航链接的基本示例

 <x-fcui-nav-link href="/example" :active='true'>Contact Us</x-fcui-nav-link>

定价

价格表组件的演示

<x-fcui-pricing columns="3" bg="transparent">

            <x-slot:panels>

                <x-fcui-pricing-panel>

                    <x-slot:productName>Product One</x-slot:productName>

                    <x-slot:price>$20</x-slot:price>

                    <x-slot:recurring>/month</x-slot:recurring>

                    <x-slot:button>
                        <x-fcui-button href="#" class="w-full mb-6">Select</x-fcui-button>
                    </x-slot:button>

                    <x-slot:features>
                        <li><span>Feature Item One</span></li>
                        <li><span>Feature Item Two</span></li>
                        <li><span>Feature Item Three</span></li>
                    </x-slot:features>
                </x-fcui-pricing-panel>

                <x-fcui-pricing-panel>
                    <x-slot:specialText>Special!</x-slot:specialText>

                    <x-slot:productName>Product Two</x-slot:productName>

                    <x-slot:price>$30</x-slot:price>

                    <x-slot:recurring>/month</x-slot:recurring>

                    <x-slot:button>
                        <x-fcui-button href="#" class="w-full mb-6">Select</x-fcui-button>
                    </x-slot:button>

                    <x-slot:features>
                        <li><span>Feature Item One</span></li>
                        <li><span>Feature Item Two</span></li>
                        <li><span>Feature Item Three</span></li>
                    </x-slot:features>
                </x-fcui-pricing-panel>

                <x-fcui-pricing-panel>

                    <x-slot:productName>Product Three</x-slot:productName>

                    <x-slot:price>$40</x-slot:price>

                    <x-slot:recurring>/month</x-slot:recurring>

                    <x-slot:button>
                        <x-fcui-button href="#" class="w-full mb-6">Select</x-fcui-button>
                    </x-slot:button>

                    <x-slot:features>
                        <li><span>Feature Item One</span></li>
                        <li><span>Feature Item Two</span></li>
                        <li><span>Feature Item Three</span></li>
                    </x-slot:features>
                </x-fcui-pricing-panel>

            </x-slot:panels>

        </x-fcui-pricing>

进度条

基本进度条

<x-fcui-progress-bar type="success" completion="27" innerBarBg="success" height="1"></x-fcui-progress-bar>

单选框输入

<x-fcui-radio-input id="radioOneC" type="warning" name="r3">
  Radio Label Here
</x-fcui-radio-input>

<x-fcui-radio-input id="radioTwoC" type="warning" name="r3">
  Radio Label 2 Here
</x-fcui-radio-input>

统计数据

基本统计块

<x-fcui-stats bg="transparent" spacing="4">

    <x-slot:panels>

        <x-fcui-stat-block stat="249" label="Customers" type="info" />

        <x-fcui-stat-block stat="$5,810" label="Revenue This Week" type="warning" />

        <x-fcui-stat-block stat="30" label="Downloads" type="notice"/ >

        <x-fcui-stat-block stat="2,890" label="Views" />

    </x-slot:panels>

</x-fcui-stats>

开关单选按钮

基本的开关（单选按钮）组件

<x-fcui-switch-radio id="uniqueId">
    A label
</x-fcui-switch-radio>

表格

基本表格示例。与导航栏组件一样，在使用此组件时还有很多可以改进的地方，包括定制和减少样板代码。

<x-fcui-table headBg="success">
    <x-slot:head>
        <th scope="col" class="font-medium px-6 py-4 text-left">
            ID
        </th>
        <th scope="col" class="font-medium px-6 py-4 text-left">
            Name
        </th>
        <th scope="col" class="font-medium px-6 py-4 text-left">
            Email
        </th>
        <th scope="col" class="font-medium px-6 py-4 text-left">
            Status
        </th>
    </x-slot:head>

    <x-slot:rows>
        <x-fcui-table-row rowStyle="success">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                43
            </td>
            <td class="font-light px-6 py-4 whitespace-nowrap">
                Thomas
            </td>
            <td class="font-light px-6 py-4 whitespace-nowrap">
                thomas@fusioncore.ui
            </td>
            <td class="font-light px-6 py-4 whitespace-nowrap">
                Active
            </td>
        </x-fcui-table-row>

        <x-fcui-table-row rowStyle="success">
             <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                49
             </td>
             <td class="font-light px-6 py-4 whitespace-nowrap">
                Charlie
             </td>
             <td class="font-light px-6 py-4 whitespace-nowrap">
                charlie@example.com
             </td>
             <td class="font-light px-6 py-4 whitespace-nowrap">
                Inactive
             </td>
        </x-fcui-table-row>
    </x-slot:rows>

</x-fcui-table>

标签页

目前，只有一种标签样式可用；默认的青色主题。

<x-fcui-tabs>
    
    <x-fcui-tab>Tab 1</x-fcui-tab>

    <x-fcui-tab>Tab 2</x-fcui-tab>

    <x-fcui-tab :active="true">Tab 3</x-fcui-tab>

    <x-fcui-tab>Tab 4</x-fcui-tab>
    
</x-fcui-tabs>

常见问题解答

问题：会有文档和示例网站吗？

是的

问题：你会接受拉取请求吗？

是的，如果你对这个项目感兴趣，如果它们符合预期的愿景，我会很高兴利用你的贡献。

问题：你会维护多长时间？

无限期，如果我发现我不再能贡献，我会将其转交给更有能力的人。

问题：会有独立的使用 Tailwind 或 Laravel 的选项吗？

不会很快。我喜欢这个想法，但可能要到第 2 或第 3 版才会实现。

问题：会有多个主题吗？

我喜欢有至少一个用于暗/亮模式的主题。但目前的重点是构建在较暗背景上看起来最好的组件。

问题：这个名字是怎么回事？

我的第一个域名和项目是一个名为 Fusion-Effect 的在线游戏，存在于 2006-2008 年。这是对这个名字和项目的怀旧。

维护者

Adam Alicki - https://alicki.me

为什么还有另一个 UI 工具包？

这是我对开源的第一步，也是我给自己的一项个人挑战，同时也是一次学习实验。这也是我回馈 Laravel 和 Tailwind 社区的方式，这两个社区多年来都让我能够谋生。

aalicki / fusion-core-ui

维护者

详细信息