📅 最后修改于: 2023-12-03 14:57:42.810000 🧑 作者: Mango
语义UI是一种基于语义化的设计理念和实现方式的UI框架，它强调了组件的语义化，并尽可能简化组件的使用，使得开发者可以更专注于业务逻辑而非UI实现。
语义UI最初由React框架主导的Semantic UI开源项目提出，但随着Semantic UI的组件形式越来越复杂，社区内出现了许多基于语义UI理念的拓展UI框架，如Ant Design、Element UI等。
语义UI的组件设计是基于对用户体验的语义化描述的，而非单纯的样式和DOM结构的组合。这种方式带来的好处是，开发者使用时只需要关心组件的语义含义，而无需关心具体的样式和DOM结构。
语义UI的组件都是可复用的，因为它们的设计思想是面向组合的。这意味着，每个语义UI的组件都是由独立的、可嵌套的子组件构成的。这种设计风格符合React框架无状态组件的规范，使得开发者可以轻松将组件拆分、组装，并实现自己业务的功能。
语义UI组件的数据传递是单向的，即只会由父组件传递给子组件，不会反过来。这种设计方式让组件更加可控和易于维护。
语义UI是一个渐进增强的UI框架，它不依赖于JavaScript、CSS或任何浏览器特定的功能。这意味着，无论使用者是什么环境，语义UI都能够正常运行。同时，开发者可以根据业务需要，逐步引入语义UI组件到自己的项目中。
语义UI框架中主要包括以下基础组件：
语义UI中的按钮组件，支持多种颜色、形状、大小、禁用状态等属性。
<Button>Default Button</Button>
<Button primary>Primary Button</Button>
<Button secondary>Secondary Button</Button>
语义UI中的输入框组件，支持多种类型、大小、带标签等属性。
<Input type="text" placeholder="Enter something..." />
<Input type="password" placeholder="Enter password..." />
语义UI中的复选框组件，支持多选、禁用、标记、不同形状等属性。
<Checkbox label="Option 1" />
<Checkbox label="Option 2" checked />
<Checkbox label="Option 3" disabled />
语义UI中的下拉菜单组件，支持多选、单选、可搜索、禁用、动态选项等属性。
<Dropdown options={options} placeholder="Select an option" />
<Dropdown options={options} selection />
<Dropdown options={options} search />
语义UI框架是一个强调语义化的UI框架，这种设计理念具有可复用性、单向数据流、渐进增强等特点，其基础组件包括按钮、输入框、复选框、下拉菜单等。语义UI框架不但适合React项目，也可以用于其他框架或JS编写的应用。