安装

• 安装 Konsta UI
• 添加配置
• Roboto 字体
• 使用

我们假设您已经拥有一个使用 Svelte 和 Tailwind CSS 配置的项目。

安装 Konsta UI

首先，我们需要安装 Konsta UI 库

npm i konsta

添加配置

然后，我们需要使用 Konsta UI 配置扩展我们的 Tailwind CSS 配置。

在您的 tailwind.config.js 文件中

const konstaConfig = require('konsta/config');

// wrap your config with konstaConfig
module.exports = konstaConfig({
  // rest of your usual Tailwind CSS config here
  ...
});

konstaConfig 将使用一些 Konsta UI 所需的额外变体和辅助工具扩展默认（或您自定义的）Tailwind CSS 配置。

Roboto 字体

Konsta UI 使用系统字体作为 iOS 主题，并使用 Roboto 字体 作为 Material Design 主题。

如果您开发的是 Web 应用程序，则需要将 Roboto 字体 添加到您的应用程序才能正确显示。

例如，可以从 Google Fonts 添加

在 HTML 中

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>

或者在 CSS 中

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

使用

安装过程完成后，让我们检查一下如何在我们的 Svelte 应用程序中 使用 Konsta UI 组件。