Open TaroXin opened 4 years ago
Github | 官方文档
项目分类:开发框架 开发团队:百度
amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大提升开发前端页面的效率。
强大的配置项页面生成让它适用于标准化的中台项目以及通用后台管理项目,在效率提升上可谓是独占鳌头;amis 也有其劣势,较低的可定制型,固化主题都成为限制项目发展的一道坎坷,但就小型后台2B项目而言,业务明显比UI要更重要一些,快速的迭代业务功能才是 amis 所建立的初衷。
以下提供几个 amis 组件使用案例
Page 组件是 amis 页面 JSON 配置中,唯一的 顶级容器组件,是整个页面配置的入口组件。
使用案例:
{ "type": "page", "aside": [{ "type": "tpl", "tpl": "这是侧边栏部分" }], "toolbar": [{ "type": "tpl", "tpl": "这是工具栏部分" }], "body": [{ "type": "tpl", "tpl": "这是内容区域" }] }
演示结果:
Action 按钮是触发页面行为的主要方法之一,type: button 的声明方式是 action 的别名
type: button
action
{ "type": "page", "body": { "type": "button-toolbar", "buttons": [ { "type": "action", "label": "默认" "actionType": "dialog", "dialog": { "title": "弹框", "body": "这是个简单的弹框。" } }, { "type": "action", "label": "主要", "level": "primary" }, { "type": "action", "label": "次要", "level": "secondary" }, { "type": "action", "label": "成功", "level": "success" }, { "type": "action", "label": "警告", "level": "warning" }, { "type": "action", "label": "危险", "level": "danger" }, { "type": "action", "label": "浅色", "level": "light" }, { "type": "action", "label": "深色", "level": "dark" }, { "type": "action", "label": "链接", "level": "link" } ] } }
{ "type": "page", "body": { "type": "icon", "icon": "cloud" } }
表单是任何一个框架的核心组件之一
{ "type": "page", "body": { "type": "form", "api": "https://houtai.baidu.com/api/mock2/form/saveForm", "controls": [ { "type": "text", "name": "name", "label": "姓名:" }, { "name": "email", "type": "email", "label": "邮箱:" } ] } }
{ "type": "page", "body": { "type": "tabs", "mode": "card", "tabs": [ { "title": "选项卡1", "body": "选项卡内容1" }, { "title": "选项卡2", "body": "选项卡内容2" }, { "title": "选项卡3", "body": "选项卡内容3" } ] } }
更多使用方案请参考 amis 快速开始
amis 提供了两种使用方式,一种是基于 React 项目的 npm 包,一种是基于普通前端项目的 JS SDK 以下是一些 amis 入门使用的案例
Amis 官方示例 Amis Admin Amis 可视化编辑器
amis
Github | 官方文档
项目分类:开发框架 开发团队:百度
简介
amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大提升开发前端页面的效率。
强大的配置项页面生成让它适用于标准化的中台项目以及通用后台管理项目,在效率提升上可谓是独占鳌头;amis 也有其劣势,较低的可定制型,固化主题都成为限制项目发展的一道坎坷,但就小型后台2B项目而言,业务明显比UI要更重要一些,快速的迭代业务功能才是 amis 所建立的初衷。
特性
组件介绍
以下提供几个 amis 组件使用案例
Page 组件
Page 组件是 amis 页面 JSON 配置中,唯一的 顶级容器组件,是整个页面配置的入口组件。
使用案例:
演示结果:
Action 行为按钮(Button)
Action 按钮是触发页面行为的主要方法之一,
type: button
的声明方式是action
的别名使用案例:
演示结果:
Icon 图标
使用案例:
Form 表单
表单是任何一个框架的核心组件之一
使用案例:
演示结果:
Tab 选项卡
使用案例:
演示结果:
更多使用方案请参考 amis 快速开始
入门案例
amis 提供了两种使用方式,一种是基于 React 项目的 npm 包,一种是基于普通前端项目的 JS SDK 以下是一些 amis 入门使用的案例
Amis 官方示例 Amis Admin Amis 可视化编辑器
推荐理由
适用团队