purescript-lumi-components 使用教程

purescript-lumi-components 使用教程

purescript-lumi-components Library of our UI components 项目地址: https://gitcode.com/gh_mirrors/pu/purescript-lumi-components

1. 项目介绍

purescript-lumi-components 是一个专注于 Lumi 特定 UI 和 UX 需求的组件库。该项目旨在提供一组可重用的 UI 组件，帮助开发者快速构建符合 Lumi 设计标准的应用程序。组件库的源代码位于 src/components 目录下。

2. 项目快速启动

安装

首先，使用 Bower 安装 purescript-lumi-components：

bower install -S purescript-lumi-components

使用组件样式

为了使用组件附带的样式，需要将 CSS 注入到页面中。最简单的方法是在应用程序初始化时运行 attachGlobalComponentStyles 效果：

import Lumi.Components.Styles (attachGlobalComponentStyles)

main = do
  attachGlobalComponentStyles
  -- 其他初始化代码

本地开发

在本地开发环境中，运行以下命令来安装依赖并启动开发服务器：

npm install
npx bower install
npx pulp build
npm start

生产构建

使用以下命令生成生产环境的静态文件：

npm run build

3. 应用案例和最佳实践

应用案例

假设你正在开发一个基于 Lumi 设计标准的管理后台，你可以使用 purescript-lumi-components 中的 Button 和 Modal 组件来构建用户界面。

import Lumi.Components.Button (button)
import Lumi.Components.Modal (modal)
import React.Basic.DOM as R
import React.Basic.Hooks as React

main = do
  let app = React.component "App" \_ -> React.do
        state /\ setState <- React.useState false
        pure $ R.div_
          [ button { onClick: setState true } "Open Modal"
          , if state then modal { onClose: setState false } "Modal Content" else R.text ""
          ]
  React.render app (R.unsafeCreateDOMComponent "div")

最佳实践

• 组件复用：尽量复用现有的组件，避免重复造轮子。
• 样式管理：使用 attachGlobalComponentStyles 确保样式正确注入。
• 版本管理：确保 npm 依赖版本与项目兼容。

4. 典型生态项目

• purescript-react：purescript-lumi-components 基于 purescript-react 构建，提供了 React 组件的 PureScript 绑定。
• purescript-css：用于处理 CSS 的 PureScript 库，可以与 purescript-lumi-components 结合使用，增强样式管理能力。
• purescript-aff：异步编程库，常用于处理组件中的异步操作。

通过以上步骤，你可以快速上手并使用 purescript-lumi-components 构建符合 Lumi 设计标准的应用程序。

purescript-lumi-components Library of our UI components 项目地址: https://gitcode.com/gh_mirrors/pu/purescript-lumi-components