Mantine UI 项目教程

最新推荐文章于 2025-04-24 12:01:16 发布

束恺俭Jessie

最新推荐文章于 2025-04-24 12:01:16 发布

阅读量1.1k

点赞数 18

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00148/article/details/142541287

Mantine UI 项目教程

ui.mantine.dev Mantine UI website and components 项目地址: https://gitcode.com/gh_mirrors/ui/ui.mantine.dev

1. 项目介绍

Mantine UI 是一个基于 Mantine 框架的开源组件库，提供了超过 120 个响应式组件。这些组件支持暗/亮主题切换，并且可以根据 Mantine 主题进行自定义。Mantine UI 是完全免费的，适用于任何项目，包括商业项目。

2. 项目快速启动

安装 Mantine UI

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 Mantine UI：

npm install @mantine/core @mantine/hooks

创建一个简单的应用

在你的项目中创建一个新的 React 组件文件，例如 App.js，并添加以下代码：

import React from 'react';
import { MantineProvider, Button } from '@mantine/core';

function App() {
  return (
    <MantineProvider theme={{ colorScheme: 'dark' }}>
      <Button>Hello Mantine</Button>
    </MantineProvider>
  );
}

export default App;

运行应用

在终端中运行以下命令启动你的应用：

npm start

3. 应用案例和最佳实践

应用案例

Mantine UI 可以用于构建各种类型的 Web 应用，包括管理面板、电子商务网站、博客等。以下是一个简单的电子商务网站头部组件示例：

import React from 'react';
import { Header, Group, Button, Text } from '@mantine/core';

function EcommerceHeader() {
  return (
    <Header height={60}>
      <Group position="apart" p="md">
        <Text size="lg" weight={700}>My Ecommerce</Text>
        <Button variant="outline">Login</Button>
      </Group>
    </Header>
  );
}

export default EcommerceHeader;