@5amcode/sunrise-components 中文文档教程
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?
你开始吧！
Sunrise Components
This is another component library. You can use it with 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>
Have fun!
So, let's get serious.
Sunrise by 5amco.de is a Vue component library written in Typescript. It's based on TailwindCSS and focused on minimal, beautiful design. You can use the growing number of components as a standalone library or extend your existing application design - Sunrise Components are lightly opinionated, but very flexible. For detailed used information, see the documentation on the website.
Usage
Prerequisites
Have your Vue project up and running on Typescript! For the sake of completeness: You will need the packages vue-property-decorator as well as vue-class-component, but these should already come with your Vue Installation. Next up, you should install and setup Tailwind via npm like described in their docs. After that, if you haven't done it yet, you should create a Tailwind configuration file - this is also well documented in the documentation. Sunrise is using handcrafted, custom colors for the unique design, so please extend (or merge) your Tailwind configuration file with the configuration below. And a sip of your favorite hot beverage is always a great idea. ☕️ ????
via npm
The easiest way to use Sunrise Components is to install via npm.
npm i @5amcode/sunrise-components --save
Adjust tailwind.config.js
After this, you should extend your own tailwind.config.js by the configuration given in the file extend_tailwind.config.js. It is located in the root of the package. This configuration contains the custom colors, additional utility classes and more. (You can also take a look at the file in the Usage Section on the package website.)
If you want to use the full Sunrise Design - and we highly recommend this! - note that you have to install or embed the Fonts Open Sans (used as standard font), Source Sans Pro (headlines) and Source Serif Pro (oblique, fancy text stuff ✨). As of today, the usage of the fonts is free, but you should double-check with your own requirements before installing them. You can use your own fonts as well, just tweak the font-properties in your tailwind.config.js:
...
// theme fonts
fontFamily: {
'display': ["'Source Sans Pro'"], // headlines
'sans': ["'Open Sans'"], // standard text
'oblique': ["'Source Serif Pro'"], // oblique, fancy text
},
...
Recompile your CSS and you're done! ????
Icons
Sunrise uses the SVG versions of Heroicons for a clean look and feel. If you're using Fontawesome or another icon set, replace the icons in the following components to match yours: STypoQuote.vue.
Copy & Paste
This is the best approach if you don't need all components of the package. You can copy the source code of the components you want and create them as own files in your Vue project. Please note that you still have to extend your tailwind.config.js file for correct rendering (see section above).
Questions, bug reports, feature requests?
There you go!
