第一个示例
让我们创建一个简单的表单示例，展示 Punch-UI 的基本用法。
示例：用户注册表单
这个示例将展示如何使用 Punch-UI 的表单组件创建一个用户注册表单。
用户注册
男
女
其他
我已阅读并同意用户协议
注册
代码解析
1. 引入必要的文件
首先，我们需要引入 ofa.js、全局样式和所需的组件：
<link rel="stylesheet" href="https://punch-ui-v2.pages.dev/packages/css/pui-global.css" />
<l-m src="https://punch-ui-v2.pages.dev/packages/input/input.html"></l-m>
<l-m src="https://punch-ui-v2.pages.dev/packages/button/button.html"></l-m>
<l-m src="https://punch-ui-v2.pages.dev/packages/radio/radio.html"></l-m>
<l-m src="https://punch-ui-v2.pages.dev/packages/radio/group.html"></l-m>
<l-m src="https://punch-ui-v2.pages.dev/packages/checkbox/checkbox.html"></l-m>2. 使用组件
每个 Punch-UI 组件都以 p- 为前缀：
<p-input>- 输入框组件<p-button>- 按钮组件<p-radio>- 单选框组件<p-radio-group>- 单选框组组件<p-checkbox>- 复选框组件
3. 组件属性
组件支持多种属性来自定义行为和外观：
<p-input placeholder="请输入用户名" type="email"></p-input>
<p-button color="primary">注册</p-button>
<p-radio-group>
<p-radio value="male">男</p-radio>
<p-radio value="female">女</p-radio>
</p-radio-group>4. 样式定制
你可以通过 style 属性或 CSS 类来自定义组件样式：
<p-input style="width: 100%"></p-input>
<p-button color="primary" style="width: 100%">注册</p-button>更多示例
按钮组示例
基础按钮
默认按钮
主要按钮
成功按钮
错误按钮
按钮组
按钮 1
按钮 2
按钮 3
下一步
现在你已经了解了 Punch-UI 的基本用法，可以继续探索：