First Example
Let's create a simple form example to demonstrate the basic usage of Punch-UI.
Example: User Registration Form
This example will show how to create a user registration form using Punch-UI's form components.
User Registration
Male
Female
Other
I have read and agree to the user agreement
Register
Code Analysis
1. Import necessary files
First, we need to import ofa.js, global styles, and the required components:
<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. Using Components
Each Punch-UI component is prefixed with p-:
<p-input>- Input component<p-button>- Button component<p-radio>- Radio button component<p-radio-group>- Radio group component<p-checkbox>- Checkbox component
3. Component Properties
Components support multiple properties to customize behavior and appearance:
<p-input placeholder="Please enter username" type="email"></p-input>
<p-button color="primary">Register</p-button>
<p-radio-group>
<p-radio value="male">Male</p-radio>
<p-radio value="female">Female</p-radio>
</p-radio-group>4. Style Customization
You can customize the component style through the style attribute or CSS class:
<p-input style="width: 100%"></p-input>
<p-button color="primary" style="width: 100%">Register</p-button>More Examples
Button Group Example
Basic Button
Default Button
Primary Button
Success Button
Error Button
Button Group
Button 1
Button 2
Button 3
Next Step
Now that you have understood the basic usage of Punch-UI, you can continue to explore:
- Color System - Learn about Punch-UI's themes and color system
- Component Documentation - View detailed documentation for each component