前言
@sky-foundry/tachyons-extended
是一个使用 tachyons
作为基础样式,并在此基础上扩展了许多实用的组件和工具类的 npm 包。本文将详细介绍如何在前端项目中使用这个包,以及其常用的组件和工具类。
安装
使用该 npm 包需要你的项目中已经安装了 tachyons
这个包,如果你的项目中没有安装,可以通过以下命令进行安装:
--- ------- ------ --------
安装了 tachyons
后,就可以通过以下命令安装 @sky-foundry/tachyons-extended
:
--- ------- ------ ------------------------------
安装完成后,在项目的 css 文件中引入 tachyons
和 @sky-foundry/tachyons-extended
即可:
------- ----------- ------- ---------------------------------
如果你使用的是 webpack 或者 rollup 等打包工具,则可以在 js 入口文件中 import:
------ ----------- ------ ---------------------------------
辅助类
在 @sky-foundry/tachyons-extended
中,有许多实用的辅助类,这些类可以帮助你快速实现一些常见的布局效果。以下是几个常用的辅助类:
left-0
、right-0
、top-0
、bottom-0
---- ------------- -------------------- ---- -------------- -------------------- ---- ------------ -------------------- ---- --------------- --------------------
z-*
---- ----------------------- ---- ----------------------- ---- -----------------------
truncate
-- ---------------------------------------
center
---- ----------- -------------- ------------------------
组件
除了辅助类之外,@sky-foundry/tachyons-extended
还提供了许多实用的组件。以下是几个常用的组件:
CloseButton
可以帮助你快速实现一个关闭按钮。
------------ --------------------- --
TextInput
可以帮助你快速实现一个文本输入框。
---------- ---------- --
Button
可以帮助你快速实现一个按钮。
------- ---------------------------------
总结
@sky-foundry/tachyons-extended
是一个非常实用的 npm 包,可以帮助我们快速实现一些常见的布局效果和组件。本文介绍了如何在项目中使用该包,并介绍了常用的辅助类和组件。希望本文对读者有所帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600671d530d0927023822b23