npm 包 @sky-foundry/tachyons-extended 使用教程

前言

@sky-foundry/tachyons-extended 是一个使用 tachyons 作为基础样式，并在此基础上扩展了许多实用的组件和工具类的 npm 包。本文将详细介绍如何在前端项目中使用这个包，以及其常用的组件和工具类。

安装

使用该 npm 包需要你的项目中已经安装了 tachyons 这个包，如果你的项目中没有安装，可以通过以下命令进行安装：

npm install --save tachyons

安装了 tachyons 后，就可以通过以下命令安装 @sky-foundry/tachyons-extended：

npm install --save @sky-foundry/tachyons-extended

安装完成后，在项目的 css 文件中引入 tachyons 和 @sky-foundry/tachyons-extended 即可：

@import "tachyons";
@import "@sky-foundry/tachyons-extended";

如果你使用的是 webpack 或者 rollup 等打包工具，则可以在 js 入口文件中 import：

import "tachyons";
import "@sky-foundry/tachyons-extended";

辅助类

在 @sky-foundry/tachyons-extended 中，有许多实用的辅助类，这些类可以帮助你快速实现一些常见的布局效果。以下是几个常用的辅助类：

left-0、right-0、top-0、bottom-0

<div class="left-0 absolute">我在左边</div>
<div class="right-0 absolute">我在右边</div>
<div class="top-0 absolute">我在上面</div>
<div class="bottom-0 absolute">我在下面</div>

z-*

<div class="z-1">我在第一层</div>
<div class="z-2">我在第二层</div>
<div class="z-3">我在第三层</div>

truncate

<p class="truncate">这是一个很长的文本，但我只想显示一行</p>

center

<div class="flex justify-center items-center">我在居中</div>

组件

除了辅助类之外，@sky-foundry/tachyons-extended 还提供了许多实用的组件。以下是几个常用的组件：

CloseButton

可以帮助你快速实现一个关闭按钮。

<CloseButton onClick={handleClose} />

TextInput

可以帮助你快速实现一个文本输入框。

<TextInput label="名称" />

Button

可以帮助你快速实现一个按钮。

<Button onClick={handleClick}>提交</Button>

总结

@sky-foundry/tachyons-extended 是一个非常实用的 npm 包，可以帮助我们快速实现一些常见的布局效果和组件。本文介绍了如何在项目中使用该包，并介绍了常用的辅助类和组件。希望本文对读者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822b23