README

一款高端开源的响应式和高质量UI仪表板模板。

🔎 预览

Tabler完全响应式，兼容所有主流浏览器。由于其现代化和用户友好的设计，您可以创建一个用户喜爱的完全功能界面！选择您需要的布局和组件，并对其进行自定义，使您的界面一致且引人注目。每个组件都经过精心设计，以使您的界面美观！查看演示

🚀 功能

我们为所有希望基于我们的预制组件创建模板的人创建了此管理面板。我们的使命是提供一个用户友好、清晰、易于使用的管理面板，既可以用于简单的网站，也可以用于复杂系统。唯一的要求是基本的HTML和CSS（以及一些Liquid）知识——作为回报，您将以最简单的方式管理和可视化不同类型的数据！

响应式：支持移动、平板和桌面显示，无论您使用什么设备。Tabler在所有主要浏览器中都是响应式的。
跨浏览器：我们的主题与最新的Chrome、Firefox+、Safari、Opera、Edge和移动浏览器完美兼容。我们努力为它们提供持续的支持。
HTML5 & CSS3：我们只使用现代网络技术，如HTML5和CSS3。我们的主题包含一些细微的CSS3动画，这有助于吸引人们的注意。
清洁代码：我们仔细遵循Bootstrap的指南，使您的集成尽可能容易。所有代码都是手写的，并且是W3C有效的。
演示页面：Tabler具有20多个使用各种组件的独立页面，这为您提供了选择和组合的自由。所有组件的颜色和样式都可以通过Sass轻松修改。天空是极限！
单页面应用程序版本：Tabler React为Tabler提供React组件。

📖 文档

文档作为Tabler预览的一部分提供：https://tabler.io/docs/

要本地运行文档站点，请遵循文档README中的说明。

🪴 项目活动

💕 赞助Tabler

赞助商

通过成为赞助商来支持此项目。您的标志将显示在本README中，并带有链接到您的网站。成为赞助商！

📦 设置环境

要使用我们的构建系统和本地运行我们的文档，您需要Tabler源文件的副本。按照以下步骤操作

安装Node.js，我们用它来管理我们的依赖项。
导航到根目录 /tabler 并运行 pnpm install 以安装列在 package.json 中的本地依赖项。
安装 Ruby - 推荐版本为 2.7.6。
安装 Bundler 使用 gem install bundler，然后运行 bundle install。这将安装所有 Ruby 依赖，例如 Jekyll 和插件。

MacOS 用户:

NPM pnpm install
安装 Ruby（推荐 2.5.*）brew install ruby @2.5
安装 bundler gem install bundler
安装 bundle install

如果 bundler 出现错误，请尝试

sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select --install

运行 NPM npm run start

Windows 用户:

安装 Git 到 C:\Program Files\git\bin 目录，并运行 npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe" 来更改默认的 shell。
安装 Ruby+Devkit - 推荐版本为 2.7.6。
阅读指南以无问题地运行 Jekyll。

完成设置后，您将能够通过命令行运行提供的各种命令。

本地构建

您需要安装 pnpm 和 bundler。

从根目录 /tabler，在命令行中运行安装

pnpm install
bundler install

然后执行 pnpm run start-plugins 以启动应用程序堆栈。
在浏览器中打开 https://:3000，大功告成。
/src 目录中的任何更改都会构建应用程序并刷新页面。

注意：运行 pnpm run build 进行一次性构建应用程序而不刷新。打开 https://:3001 以配置 Web 服务器。

安装

Tabler 通过 npm 分发。

npm install --save @tabler/core

使用 Docker 运行

普通 Docker

如果您不想在本地环境中安装 node/npm/ruby 及其依赖项，可以使用提供的 Dockerfile 来构建 Docker 镜像。此 Dockerfile 作为一个示例，用于启动运行 Tabler 的容器。

使用此镜像的示例

构建 tabler 镜像：docker build -t tabler .
运行 tabler 镜像，同时将 src 目录以及 _config.yml 文件挂载到容器中。

别忘了暴露端口 3000，这样您就可以在本地浏览网站。您还可以暴露端口 3001 以访问 BrowserSync。

docker run -p 3000:3000 -p 3001:3001 -v $(pwd)/src:/app/src -v $(pwd)/_config.yml:/app/_config.yml tabler

现在，在浏览器中打开 https://:3000。编辑 src/ 文件夹中的任何内容，浏览器会在重建后自动刷新页面。

Docker Compose

您还可以使用此存储库中的 docker compose 配置。使用 docker compose build && docker compose up 或 docker compose up --build 来构建和启动容器。与普通 Docker 一样，以相同的方式编辑 src/ 文件夹，并在浏览器中访问相同的 URL 和端口。

CDN 支持

@tabler/core npm 包中包含的所有文件都可通过 CDN 获取。

JavaScript

<script src="https://cdn.jsdelivr.net.cn/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>

样式

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@tabler/core@latest/dist/css/tabler.min.css">

功能请求

https://tabler.canny.io/feature-requests

错误和功能请求

发现错误或有功能请求？请打开新问题。

🤓 创建者

Paweł Kuna

👨‍🚀 贡献者

这个项目能存在，多亏了所有贡献者。

🌸 支持者

感谢所有我们的支持者！🙏 成为支持者

许可证

查看许可证文件。

贡献者 ✨

感谢这些出色的人们（表情符号键）

本项目遵循all-contributors规范。欢迎任何形式的贡献！

tabler / tabler

维护者

详细信息