[{"data":1,"prerenderedAt":298},["ShallowReactive",2],{"content-/guide/component-library":3,"related-guide":266},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":260,"_id":261,"_source":262,"_file":263,"_stem":264,"_extension":265},"/guide/component-library","guide",false,"","组件库","使用 HTMLPAGE 的组件库快速构建页面","组件库, UI 组件, 复用组件, HTMLPAGE","HTMLPAGE","2025-11-27","工具","/content-images/guide/guide.jpg",{"type":16,"children":17,"toc":247},"root",[18,25,31,38,45,70,76,99,105,128,134,157,163,186,192,215,221,234,238],{"type":19,"tag":20,"props":21,"children":22},"element","h1",{"id":8},[23],{"type":24,"value":8},"text",{"type":19,"tag":26,"props":27,"children":28},"p",{},[29],{"type":24,"value":30},"HTMLPAGE 提供丰富的组件库，让你快速构建页面。",{"type":19,"tag":32,"props":33,"children":35},"h2",{"id":34},"组件分类",[36],{"type":24,"value":37},"📌 组件分类",{"type":19,"tag":39,"props":40,"children":42},"h3",{"id":41},"_1-基础组件",[43],{"type":24,"value":44},"1. 基础组件",{"type":19,"tag":46,"props":47,"children":48},"ul",{},[49,55,60,65],{"type":19,"tag":50,"props":51,"children":52},"li",{},[53],{"type":24,"value":54},"按钮",{"type":19,"tag":50,"props":56,"children":57},{},[58],{"type":24,"value":59},"输入框",{"type":19,"tag":50,"props":61,"children":62},{},[63],{"type":24,"value":64},"下拉菜单",{"type":19,"tag":50,"props":66,"children":67},{},[68],{"type":24,"value":69},"复选框",{"type":19,"tag":39,"props":71,"children":73},{"id":72},"_2-布局组件",[74],{"type":24,"value":75},"2. 布局组件",{"type":19,"tag":46,"props":77,"children":78},{},[79,84,89,94],{"type":19,"tag":50,"props":80,"children":81},{},[82],{"type":24,"value":83},"导航栏",{"type":19,"tag":50,"props":85,"children":86},{},[87],{"type":24,"value":88},"页脚",{"type":19,"tag":50,"props":90,"children":91},{},[92],{"type":24,"value":93},"侧边栏",{"type":19,"tag":50,"props":95,"children":96},{},[97],{"type":24,"value":98},"模态框",{"type":19,"tag":39,"props":100,"children":102},{"id":101},"_3-内容组件",[103],{"type":24,"value":104},"3. 内容组件",{"type":19,"tag":46,"props":106,"children":107},{},[108,113,118,123],{"type":19,"tag":50,"props":109,"children":110},{},[111],{"type":24,"value":112},"卡片",{"type":19,"tag":50,"props":114,"children":115},{},[116],{"type":24,"value":117},"图库",{"type":19,"tag":50,"props":119,"children":120},{},[121],{"type":24,"value":122},"评价",{"type":19,"tag":50,"props":124,"children":125},{},[126],{"type":24,"value":127},"推荐",{"type":19,"tag":39,"props":129,"children":131},{"id":130},"_4-表单组件",[132],{"type":24,"value":133},"4. 表单组件",{"type":19,"tag":46,"props":135,"children":136},{},[137,142,147,152],{"type":19,"tag":50,"props":138,"children":139},{},[140],{"type":24,"value":141},"文本输入",{"type":19,"tag":50,"props":143,"children":144},{},[145],{"type":24,"value":146},"文件上传",{"type":19,"tag":50,"props":148,"children":149},{},[150],{"type":24,"value":151},"日期选择",{"type":19,"tag":50,"props":153,"children":154},{},[155],{"type":24,"value":156},"表单验证",{"type":19,"tag":32,"props":158,"children":160},{"id":159},"组件使用",[161],{"type":24,"value":162},"🎯 组件使用",{"type":19,"tag":46,"props":164,"children":165},{},[166,171,176,181],{"type":19,"tag":50,"props":167,"children":168},{},[169],{"type":24,"value":170},"📋 拖拽添加",{"type":19,"tag":50,"props":172,"children":173},{},[174],{"type":24,"value":175},"⚙️ 属性配置",{"type":19,"tag":50,"props":177,"children":178},{},[179],{"type":24,"value":180},"🎨 样式定制",{"type":19,"tag":50,"props":182,"children":183},{},[184],{"type":24,"value":185},"🔄 复用保存",{"type":19,"tag":32,"props":187,"children":189},{"id":188},"最佳实践",[190],{"type":24,"value":191},"💡 最佳实践",{"type":19,"tag":46,"props":193,"children":194},{},[195,200,205,210],{"type":19,"tag":50,"props":196,"children":197},{},[198],{"type":24,"value":199},"建立自己的组件库",{"type":19,"tag":50,"props":201,"children":202},{},[203],{"type":24,"value":204},"保持命名规范",{"type":19,"tag":50,"props":206,"children":207},{},[208],{"type":24,"value":209},"编写文档",{"type":19,"tag":50,"props":211,"children":212},{},[213],{"type":24,"value":214},"版本管理",{"type":19,"tag":32,"props":216,"children":218},{"id":217},"相关资源",[219],{"type":24,"value":220},"🔗 相关资源",{"type":19,"tag":46,"props":222,"children":223},{},[224],{"type":19,"tag":50,"props":225,"children":226},{},[227],{"type":19,"tag":228,"props":229,"children":231},"a",{"href":230},"/guide/visual-editing.md",[232],{"type":24,"value":233},"可视化编辑",{"type":19,"tag":235,"props":236,"children":237},"hr",{},[],{"type":19,"tag":26,"props":239,"children":240},{},[241],{"type":19,"tag":242,"props":243,"children":244},"em",{},[245],{"type":24,"value":246},"组件库加速了页面构建过程。",{"title":7,"searchDepth":248,"depth":248,"links":249},3,[250,257,258,259],{"id":34,"depth":251,"text":37,"children":252},2,[253,254,255,256],{"id":41,"depth":248,"text":44},{"id":72,"depth":248,"text":75},{"id":101,"depth":248,"text":104},{"id":130,"depth":248,"text":133},{"id":159,"depth":251,"text":162},{"id":188,"depth":251,"text":191},{"id":217,"depth":251,"text":220},"markdown","content:guide:component-library.md","content","guide/component-library.md","guide/component-library","md",[267,279,290],{"_path":268,"_dir":269,"_draft":6,"_partial":6,"_locale":7,"title":270,"description":271,"keywords":272,"author":11,"date":273,"category":274,"image":275,"_type":260,"_id":276,"_source":262,"_file":277,"_stem":278,"_extension":265},"/blog/accessibility-guidelines","blog","无障碍设计指南","WCAG 标准和无障碍设计最佳实践","无障碍设计指南, Blog, HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg","content:blog:accessibility-guidelines.md","blog/accessibility-guidelines.md","blog/accessibility-guidelines",{"_path":280,"_dir":269,"_draft":6,"_partial":6,"_locale":7,"title":281,"description":282,"keywords":283,"author":284,"date":285,"category":286,"image":275,"_type":260,"_id":287,"_source":262,"_file":288,"_stem":289,"_extension":265},"/blog/accessible-ux-research-guide","无障碍用户研究完全指南：从规划到实施的每一步","深入了解如何进行包容性的用户体验研究，确保残障用户的声音被听见，让产品真正为所有人而设计","用户研究, 无障碍设计, 包容设计, UX研究, 残障用户, 无障碍访问","HTMLPAGE 内容团队","2025-12-01","无障碍与设计","content:blog:accessible-ux-research-guide.md","blog/accessible-ux-research-guide.md","blog/accessible-ux-research-guide",{"_path":291,"_dir":269,"_draft":6,"_partial":6,"_locale":7,"title":292,"description":293,"keywords":294,"author":11,"date":273,"category":274,"image":275,"_type":260,"_id":295,"_source":262,"_file":296,"_stem":297,"_extension":265},"/blog/react-hooks-guide","React Hooks 实战指南","深入理解 React Hooks，包括 useState、useEffect、自定义 Hooks 等","React Hooks 实战指南, Blog, HTMLPAGE","content:blog:react-hooks-guide.md","blog/react-hooks-guide.md","blog/react-hooks-guide",1774945278897]