Neumorphic 开源项目教程

Neumorphic 开源项目教程

neumorphic🚀Neumorphic is a SwiftUI utility to build Neumorphism Soft UI (supports both *outer shadow and *inner shadow) 项目地址:https://gitcode.com/gh_mirrors/ne/neumorphic

1. 项目的目录结构及介绍

neumorphic/
├── assets/
│   ├── images/
│   └── styles/
├── components/
│   ├── Button.js
│   ├── Card.js
│   └── ...
├── config/
│   ├── theme.js
│   └── ...
├── App.js
├── index.js
└── package.json

• assets/: 存放项目的静态资源，如图片和样式文件。
• components/: 存放项目的React组件，如按钮、卡片等。
• config/: 存放项目的配置文件，如主题配置。
• App.js: 项目的根组件。
• index.js: 项目的入口文件。
• package.json: 项目的依赖和脚本配置文件。

2. 项目的启动文件介绍

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

• ReactDOM.render(): 将App组件渲染到root元素中。
• React.StrictMode: 用于启用React的严格模式，帮助发现潜在问题。

3. 项目的配置文件介绍

config/theme.js

export const theme = {
  colors: {
    primary: '#3498db',
    secondary: '#2ecc71',
    background: '#ecf0f1',
  },
  fonts: {
    primary: 'Arial, sans-serif',
  },
};

• theme: 定义了项目的主题颜色和字体。
• colors: 包含主要颜色、次要颜色和背景颜色。
• fonts: 包含主要字体。

以上是基于开源项目 https://github.com/costachung/neumorphic.git 的教程内容，希望对你有所帮助。

neumorphic🚀Neumorphic is a SwiftUI utility to build Neumorphism Soft UI (supports both *outer shadow and *inner shadow) 项目地址:https://gitcode.com/gh_mirrors/ne/neumorphic