Cupertino Gallery - Vue.js Example

This is a comprehensive Vue.js example application demonstrating all the WebF Cupertino UI components.

Setup

1. Install dependencies

npm install

2. Development server

npm run serve

The app will be available at http://localhost:8080

3. Build for production

npm run build

This will create a dist folder with the built application.

Running in WebF

After building the Vue.js app, you can run the Flutter example:

cd ../.. # Go back to example root
flutter run

Then select "Cupertino Gallery (Vue.js)" from the menu.

Features

This gallery demonstrates:

• All Cupertino UI components
• Different component variants and states
• Proper event handling
• CSS styling integration
• Dark mode support
• Responsive layouts

Component Pages

• Button Page: All button variants, sizes, and states
• Input Page: Text fields, search inputs, and text areas
• Switch Page: Toggle switches with different configurations
• Slider Page: Various slider configurations
• Checkbox Page: Checkbox states and groups
• Radio Page: Radio button groups
• Picker Page: Standard pickers with different options
• Date Picker Page: Date selection components
• Timer Picker Page: Time selection components
• Alert Page: Alert dialog examples
• Action Sheet Page: Action sheet examples
• Context Menu Page: Context menu demonstrations
• Form Section Page: Form layout examples
• List Section Page: List layout examples
• And more...

Customization

You can modify the Vue.js app to test different configurations and use cases for the Cupertino components.