README

如果你曾梦想拥有Shopify管理员界面，DashUI提供了一套UI组件，所有组件均受Shopify Polaris启发，专门使用TailwindCSS、Laravel Blade和JavaScript打造。这些组件易于集成，并提供各种定制选项。

关于Combind Agency

Combine Agency 是一家领先的网页开发公司，专注于使用现代技术构建创新和高性能的网页应用。我们的经验丰富的开发人员、设计师和项目经理致力于为客户提供量身定制的高品质服务。

如果你需要帮助你的下一个项目或想讨论定制解决方案，请随时联系我们或访问我们的网站以获取更多关于我们服务的信息。让我们共同打造一些精彩的东西！

演示

通过访问演示项目来体验DashUI的实际应用。该演示提供了DashUI组件的实际展示，让您了解它们如何在真实的Laravel应用中集成和定制。

安装

您可以通过composer安装此包

composer require combindma/dash-ui

可选的，如果您打算使用 Blade Google Material Design Icons（如演示中所示），请运行此命令

composer require codeat3/blade-google-material-design-icons

我们建议您使用以下命令启用图标缓存

php artisan icons:cache

可选的，您可以使用以下命令发布视图

php artisan vendor:publish --tag="dash-ui-views"

设置

1. 安装Tailwind CSS

通过npm安装tailwindcss及其依赖项，然后运行init命令以生成tailwind.config.js和postcss.config.js。

npm install -D tailwindcss postcss postcss-import autoprefixer @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography system-font-css
npx tailwindcss init -p

2. 配置样式

在tailwind.config.js文件中添加所有模板文件的路径。

提示：您可以通过编辑primary: colors.stone来指定您的首选颜色。

const colors = require('tailwindcss/colors')

export default {
    content: [
        //...
        './vendor/combindma/dash-ui/resources/views/**/*.blade.php',
    ],
    darkMode: 'class',
    theme: {
        fontFamily: {
            sans: ['Inter', 'system-ui'],
        },
        fontSize: {
            xs: '0.75rem',
            sm: '0.8125rem',
            base: '0.875rem',
            lg: '1.25rem',
            xl: '1.5rem',
            '2xl': '1.875rem',
            '3xl': '2.25rem',
            '4xl': '3.052rem',
        },
        extend: {
            colors: {
                primary: colors.stone,
            }
        }
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio'),
        require("@tailwindcss/typography")
    ],
}

在项目根目录中创建一个postcss.config.js文件，并注册Tailwind CSS、PostCSS Nesting和Autoprefixer作为插件

export default {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
    }
}

3. 在CSS文件中添加Tailwind指令并导入库

将CSS文件导入并添加每个Tailwind层级的@tailwind指令到./resources/css/tailwind.css文件中。

@import '../../node_modules/system-font-css/system-font.css';
@import "tailwindcss/base";
@import "tailwindcss/components";
@import '../../vendor/combindma/dash-ui/resources/css/dashui.css';
@import "tailwindcss/utilities";

4. 将javascript组件导入到js文件

将js文件导入到./resources/js/app.js文件中。

import '../../vendor/combindma/dash-ui/resources/js/dashui.js';

5. 更新vite配置文件

将以下内容添加到您的vite.config.js文件中

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/tailwind.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

6. 启动构建过程

使用以下命令运行您的构建过程

npm run build

7. 在项目中开始使用Dash UI

确保您的编译CSS和JavaScript包含在您的主布局中。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <link rel="preconnect" href="https://rsms.me/">
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    @vite(['resources/css/tailwind.css'])
</head>
<body class="antialiased">


<script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>
@vite(['resources/js/app.js'])
</body>
</html>

用法

查看完整文档了解所有组件及其用法。

安全漏洞

请查看我们的安全策略了解如何报告安全漏洞。

致谢

许可证

MIT许可证（MIT）。请参阅许可证文件获取更多信息。

combindma / dash-ui

维护者

详情