Mishka Chelekom：Phoenix LiveView终极UI组件库，10分钟快速上手指南

Mishka Chelekom：Phoenix LiveView终极UI组件库，10分钟快速上手指南

【免费下载链接】mishka_chelekomMishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView项目地址: https://gitcode.com/gh_mirrors/mi/mishka_chelekom

Mishka Chelekom是一个功能齐全的组件和UI工具包库，专为Phoenix和Phoenix LiveView打造。它能帮助开发者快速构建现代化、交互式的用户界面，无需复杂配置，让开发过程更加高效愉悦。

🚀 为什么选择Mishka Chelekom？

Mishka Chelekom专注于开发者体验和性能优化，与其他解决方案相比具有以下显著优势：

• 零依赖设计：生成的组件直接集成到项目中，没有隐藏依赖项，保持生产构建轻量级
• 高度可定制：通过属性轻松调整样式、布局和交互，支持Tailwind CSS自定义
• 无障碍支持：遵循WAI-ARIA标准，确保组件对所有用户可访问
• 响应式设计：组件自动适应不同屏幕尺寸，提供一致的用户体验
• 丰富组件库：包含从基础UI元素到复杂交互组件的完整集合

⚡ 快速安装步骤

1. 项目设置（推荐）

使用Igniter快速创建带有Mishka Chelekom的Phoenix项目：

mix igniter.new my_app --with phx.new --install mishka_chelekom

2. 现有项目集成

在mix.exs中添加依赖：

defp deps do [ {:mishka_chelekom, "~> 0.1", only: :dev} ] end

安装依赖并设置：

mix deps.get mix setup

📦 核心组件类型

Mishka Chelekom提供多种类型的组件，满足不同开发需求：

基础UI组件

• 按钮(Button)：支持多种样式、尺寸和状态
• 卡片(Card)：灵活的内容容器，支持图片、标题和操作
• 徽章(Badge)：用于显示通知、标签或状态
• 表单元素：包括输入框、选择器、复选框等

布局组件

• 导航栏(Navbar)：响应式顶部导航
• 页脚(Footer)：页面底部信息展示
• 网格系统：灵活的布局工具
• 侧边栏(Sidebar)：可折叠的导航面板

交互组件

• 模态框(Modal)：用于显示重要信息或收集用户输入
• 抽屉(Drawer)：侧边滑出式面板
• 手风琴(Accordion)：可折叠的内容区域
• 选项卡(Tabs)：组织相关内容

特殊功能组件

• 轮播(Carousel)：图片或内容轮播展示
• 时间线(Timeline)：展示事件序列
• 加载状态(Skeleton)：内容加载时的占位符
• 通知(Toast)：轻量级消息提示

🔍 组件使用示例

以下是几个常用组件的基本用法：

按钮组件

<.button variant="primary" size="medium" class="mr-2"> 主要按钮 </.button> <.button variant="outline" icon="hero-heart"> 带图标按钮 </.button>

卡片组件

<.card variant="shadow" class="max-w-md"> <:header> <.card_title title="用户资料" icon="hero-user" /> </:header> <:content> <p>这是一个用户资料卡片示例，包含头像、名称和简介。</p> </:content> <:footer> <.button variant="secondary" size="small">编辑资料</.button> </:footer> </.card>

模态框组件

<.modal id="example-modal" title="示例模态框"> <:content> <p>这是一个模态框示例，用于显示重要信息或收集用户输入。</p> </:content> <:actions> <.button variant="outline" phx-click={JS.hide(to: "#example-modal")}>取消</.button> <.button phx-click={JS.hide(to: "#example-modal")}>确认</.button> </:actions> </.modal> <.button phx-click={JS.show(to: "#example-modal")}>打开模态框</.button>

⚙️ 自定义配置

Mishka Chelekom提供灵活的配置选项，可在config/config.exs中设置全局样式：

config :my_app, MishkaChelekom, theme: [ primary_color: "blue", secondary_color: "gray", border_radius: "medium" ], default_variant: "outline"

📚 学习资源

• 官方文档：usage-rules/docs/
• 组件示例：priv/demos/
• Mix任务帮助：usage-rules/mix-tasks.md

🔄 组件管理命令

生成组件

# 生成单个组件 mix mishka.ui.gen.component button # 生成多个组件 mix mishka.ui.gen.components button,card,modal # 生成所有组件 mix mishka.ui.gen.components all

卸载组件

# 卸载单个组件 mix mishka.ui.uninstall button # 卸载多个组件 mix mishka.ui.uninstall button,card # 卸载所有组件 mix mishka.ui.uninstall --all

🎯 总结

Mishka Chelekom为Phoenix LiveView开发者提供了一个功能全面、易于使用的UI组件库。通过其丰富的组件集合和灵活的定制选项，你可以在短时间内构建出专业、美观的Web应用界面。无论是新手还是有经验的开发者，都能快速上手并发挥其强大功能。

立即尝试Mishka Chelekom，体验高效Phoenix LiveView开发！

【免费下载链接】mishka_chelekomMishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView项目地址: https://gitcode.com/gh_mirrors/mi/mishka_chelekom