fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

TamagUI
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://tamagui.dev/
GitHub:https://github.com/tamagui/tamagui
网站描述:一个 CSS-IN-JS的组件库

Tamagui 允许您在 Web 和本机应用程序之间共享更多代码,而不会牺牲通常会受到影响的两件事:性能和代码质量。

它通过优化编译器来实现这一点,该编译器输出特定于平台的优化,将样式组件(即使具有复杂的逻辑或跨模块导入)转换为div网络上简单的原子css,或将其样式对象提升到本机的视图。

整个Tamagui 在编译时和运行时工作,并且可以逐步设置,初始使用就像导入它并使用基本视图和样式化函数一样简单。


安装 Tamagui

要安装 Tamagui 及其所有组件,请运行:

npm install tamagui @tamagui/config

接下来,创建一个名为的 Tamagui 配置文件tamagui.config.ts:

import { config } from '@tamagui/config/v2'

import { createTamagui } from 'tamagui'
const tamaguiConfig = createTamagui(config)
// this makes typescript properly type everything based on the config

type Conf = typeof tamaguiConfig

declare module 'tamagui' {

interface TamaguiCustomConfig extends Conf {}

}
export default tamaguiConfig
// depending on if you chose tamagui, @tamagui/core, or @tamagui/web
// be sure the import and declare module lines both use that same name

注意:该v2配置在Web上导入css驱动程序,在本机上导入react-native。对于react-native,导入@tamagui/config/v2-native配置,对于reanimated,导入@tamagui/config/v2-reanimated配置。


用法

要在您的 Expo 或 Next.js 项目中使用 Tamagui,您所需要做的就是将您的应用程序包装在TamaguiProvider:

// this provides some helpful reset styles to ensure a more consistent look
// only import this from your web app, not native
import '@tamagui/core/reset.css'

import { TamaguiProvider } from 'tamagui'
import tamaguiConfig from './tamagui.config'

export default function App() {
return (
<TamaguiProvider config={tamaguiConfig}>
{/* your app here */}
</TamaguiProvider>
)
}

完毕!现在尝试一些组件:

import { Button, Text } from 'tamagui'

function Example() {
return (
<Button>
<Text>My button</Text>
</Button>
);
}

链接: https://fly63.com/nav/4048

more>>
相关栏目
Materialize
基于Material Design的现代响应式前端框架
官网GitHub
Element UI
一套基于 Vue 2.0 的桌面端组件库
官网GitHub
Material Design(MDB)
领先的Bootstrap UI套件之一
点击进入
Muse-UI
基于 Vue2.0 的 Material Design UI 库
官网GitHub
sb-admin
基于Bootstrap简约美观的后台管理模板
官网GitHub
Vue-Access-Control
Vue权限管理解决方案
官网GitHub
RmlUI
桌面端GUI开发框架
官网GitHub
kitty-ui
基于 Vue + Element 实现的权限管理系统
点击进入GitHub
vue-multiselect
Vue.js 打造的下拉组件
官网GitHub
Structor
先进的React GUI编辑器
点击进入GitHub
lulu ui
基于jQuery,针对PC网站,兼容IE7+的前端UI框架
官网GitHub
Ant Design
是一个致力于提升『用户』和『设计者』使用体验的中台设计语言
官网GitHub
vue-design-system
一个用于基于 Vue.js 构建 UI 设计系统的开源工具
官网GitHub
Tauri
使用Web前端构建更小,更快,更安全的桌面应用
官网GitHub
Element Plus
基于 Vue 3,面向设计师和开发者的组件库
官网GitHub
vue-blu
基于Vuejs和Bulma开发的开源UI组件库
官网GitHub

手机预览