DynaCore UI Design

沉稳含巧，不逐流俗，返归本真。余观其风骨清雅，别具一格，私心甚悦

建议

Tip

每个项目皆具其独特气质，设计参考仅为起点，而非终点。

主要特性

• 现代化设计语言: 采用现代化设计语言，提供简洁直观的视觉风格，并高度注重用户体验。
• 响应式布局: 基于 Flexbox 与 CSS Grid 构建强大的响应式布局系统，确保在各类设备上均能实现完美显示。 (css/layout.css)
• 丰富的组件库:
  • 导航组件: 包含底部导航、标签页、面包屑、分页及下拉菜单等多种导航控件。 (css/navigation.css)
  • 表单控件: 提供样式化的输入框、选择器、复选框、单选按钮、文本区域及各类按钮。 (css/forms.css)
  • 内容展示: 包含卡片、折叠面板等组件，助力清晰地组织与呈现信息。 (css/content.css)
  • 反馈组件: 集成加载指示器、步骤条、轻提示 (Toast) 及进度条，以提供即时有效的用户反馈。 (css/feedback.css)
• 交互式元素: 众多组件均配备平滑的过渡与交互效果，旨在提升用户参与感。
• 可定制化: 支持通过 CSS 变量 (css/variables.css)便捷地调整主题颜色与基础样式，实现高度可定制化。
• 演示页面: demo/Index.html 提供全面的组件展示与使用范例。

项目结构

• css/: 存放核心 CSS 文件。
  • main.css: 主样式入口，负责导入所有其他 CSS 模块。
  • variables.css: 定义颜色、间距等核心 CSS 变量。
  • base.css: 基础 HTML 元素的样式重置及默认设置。
  • layout.css: 布局相关样式，涵盖容器、网格系统及 Flex 工具类。
  • navigation.css: 导航组件专属样式。
  • components.css: 通用组件样式 (注：此文件当前未在项目列表中，但通常包含此类文件)。
  • forms.css: 表单元素专属样式。
  • feedback.css: 反馈组件专属样式。
  • content.css: 内容展示组件专属样式。
• js/: 存放 JavaScript 文件。
  • dyna.js: 负责组件的交互逻辑，例如标签页、折叠面板及下拉菜单的初始化与动态行为。
• demo/: 包含演示页面及相关资源。
  • Index.html: DynaCore UI 组件的演示与示例页面。
  • demo.js: 演示页面专属的 JavaScript 逻辑。
  • strings.json: 演示页面所使用的文本内容资源。

快速开始

1. 克隆或下载本项目代码仓库。
2. 在浏览器中打开 demo/Index.html 文件，即可预览所有组件的演示效果并了解其基本用法，或者前往DynaCore Design Home
3. 您可以参照 demo/Index.html 的 HTML 结构以及 css/main.css (及其导入的各模块)，学习如何在您的项目中集成并使用这些组件与样式。

协议

本项目采用 MIT 许可证，您可以自由使用、修改和分发代码，但需保留原作者的版权声明和许可证信息。