@5amcode/sunrise-components 中文文档教程

Question

Sunrise Components

这是另一个组件库。 你可以将它与 Vue 一起使用。

<marketing-talk>
It's build with the power of the inspiring sunrises I experienced 
whenever I woke up at 5 am. Often it was build around 5am...
So beautiful, so inspiring, blah blah.
I need coffee.
</marketing-talk>

玩得开心！

---

所以，让我们认真一点。

5amco.de 的 Sunrise 是一个用 Typescript 编写的 Vue 组件库。 它基于 TailwindCSS，专注于极简、美观的设计。 您可以将越来越多的组件用作独立库或扩展现有的应用程序设计 - Sunrise Components 固执己见，但非常灵活。 有关详细使用信息，请参阅网站上的文档。

Usage

Prerequisites

让你的 Vue 项目在 Typescript 上启动并运行！ 为了完整起见：您将需要包 vue-property-decorator 以及 vue-class-component，但这些应该已经包含在您的 Vue 安装中。 接下来，您应该按照中所述通过 npm 安装和设置 Tailwind 他们的文档。 在那之后，如果你还没有这样做，你应该创建一个 Tailwind 配置文件——这在 文档。 Sunrise 使用手工定制的颜色来打造独一无二的 设计，所以请扩展（或合并）您的 Tailwind 配置文件 下面的配置。 喝一口您最喜欢的热饮总是一个好主意。 ☕️ ????

via npm

使用 Sunrise Components 最简单的方法是通过 npm 安装。

npm i @5amcode/sunrise-components --save

Adjust tailwind.config.js

在此之后，您应该通过文件 extend_tailwind.config.js 中给出的配置扩展您自己的 tailwind.config.js。 它位于包的根目录中。 此配置包含自定义颜色、附加实用程序类等。 （您也可以查看软件包网站上使用部分中的文件。）

如果您想使用完整的 Sunrise设计 - 我们强烈推荐这个！ - 请注意，您必须安装或嵌入字体 Open Sans（用作标准字体），Source Sans Pro（标题）和 Source Serif Pro（倾斜的花哨文字 ✨）。 从今天开始，这些字体的使用是免费的，但您应该在安装它们之前仔细检查您自己的要求。 您也可以使用自己的字体，只需调整 tailwind.config.js 中的字体属性即可：

...
// theme fonts
fontFamily: {
    'display': ["'Source Sans Pro'"], // headlines
    'sans': ["'Open Sans'"], // standard text
    'oblique': ["'Source Serif Pro'"], // oblique, fancy text
},
...

重新编译 CSS，大功告成！ ？？？

Icons

Sunrise 使用 Heroicons 的 SVG 版本以获得简洁的外观和感觉。 如果您使用的是 Fontawesome 或其他图标集，请替换以下组件中的图标以匹配您的图标：STypoQuote.vue。

Copy & Paste

如果您不需要包的所有组件，这是最好的方法。 你可以复制你想要的组件的源代码，并在你的 Vue 项目中创建它们作为自己的文件。 请注意，您仍然需要扩展 tailwind.config.js 文件才能正确呈现（请参阅上一节）。

Questions, bug reports, feature requests?

你开始吧！