QuikieApps

反应热情:主题,功能等等

什么是热情?

反应 zest是一个多功能的高级管理仪表板,可以在功能强大的台湾宾果28开奖 Framework,Bootstrap4,台湾宾果28开奖strap和create-react-app的基础上构建。因此,它为管理面板提供了独特而优雅的外观。 反应 zest对开发人员友好,易于编码和定制。它具有大量不同主题,页面数不胜数。 

它具有很高的响应速度,可以适应任何大小的视口。因此,我们可以找到许多可重复使用的UI组件和最新的流行插件。我们可以使用此主题创建不同类型的项目应用程序。因此,它是各种利基二手应用程序(例如音乐,CRM,自由职业,博客,电子商务等)的最佳来源。 

 

反应 zest的基本示例:

 

从“反应”导入台湾宾果28开奖;

从“ react-zest”导入Zest;

 

const SomeComponent =道具=> {

  return (

    <Zest

      animationName =” wiggle”

      animationTrigger =“悬停”

      animationDuration = {700}

    >

      <button>Click here!</button>

    </Zest>

  );

};

 

导出默认的SomeComponent;

 

对错误输入进行动画处理的示例:

 

从“反应”导入台湾宾果28开奖;

从“ react-zest”导入Zest;

 

const SomeComponent =道具=> {

  constructor(props) {

    super(props);

 

    this.state = {

      input: ”,

      valid: true

    };

  }

 

  checkValidity() {

    如果(this.state.input.length<3){返回this.setState({valid:false}); }

    返回this.setState({有效:true});

  }

 

  return (

    <Zest

      animationName =“脉冲”

      animationTrigger = {!this.state.valid}

    >

      <input

        type=”text”

        值= {this.state.input}

        onChange={e =>this.setState({输入:e.target.value})}

        onBlur = {this.checkValidity} />

    </Zest>

  );

};

 

导出默认的SomeComponent;

 

react zest的主题:

反应热情最适合新鲜 reactjs开发人员 还是设计师。可以将多个管理主题功能合而为一。 热情共提供9种不同的管理主题。他们是:

一般管理员

医院管理员

音乐管理员

大学行政

客户关系管理

自由职业管理员

社交媒体管理员

电子商务管理员和 

博客管理员

热情管理员的功能:

热情的管理员还具有多重布局选项。在zest管理员中有两种菜单样式。打开宽度和菜单宽度。即使这些菜单也包含12种不同的样式。不仅像zest菜单一样,App Header还具有12种不同的样式选项。它使我们能够使用这些种类的菜单和标题样式来创建自己的独特布局。使用此功能可以创建超过250个以上的唯一布局。我们还可以在zest管理员上找到一个聊天栏。它具有3种不同的样式。 

当您要对其进行更改时,SASS会自动从项目中编译CSS文件。可以在一个简单的变量文件中编辑所有CSS设置,例如字体,颜色,大小等。在几分钟之内就可以轻松更改适合您品牌的管理样式。 

我们还可以看到不同的图标字体,例如Font Awesome和简单线条图标集。除了这些,还可以使用Google字体,可以在需要的时候进行配置。 

从第一批开始到最终生产部署,它遵循适当的文档编制过程,并具有完全的隐私权。 

到目前为止,最新开发的版本是1.1.0版。它从2020年1月25日开始可用。

 

热情管理员插件:

热情管理员拥有广泛的集成插件和组件。列出的示例很少是,

图形图表,邮箱,日历,小部件,博客,图库,定价表,数据库,访问和错误页面,UI元素,台湾宾果28开奖strap组件,日期选择器,时间选择器,颜色选择器等 

 

热情中的第三部分插件:

我们还可以在admin主题中找到第三方插件。列出的第三方管理插件是,

Bootstrap 4,Chart.js,字体超赞图标,jQuery,jVectormap,Moment,Node SASS,Perfect Scrollbar,台湾宾果28开奖 Color Picker,台湾宾果28开奖 Slider,台湾宾果28开奖 Auto-Suggest,台湾宾果28开奖 Big Calendar,台湾宾果28开奖 Bootstrap Data table,台湾宾果28开奖 CKEditor,台湾宾果28开奖 Count to ,台湾宾果28开奖 Data网格,台湾宾果28开奖 Date选择器,台湾宾果28开奖 Date范围选择器,台湾宾果28开奖 Date时间选择器,台湾宾果28开奖 Wysiwyg编辑器,台湾宾果28开奖 Dropzone,台湾宾果28开奖 Google地图,台湾宾果28开奖输入蒙版,台湾宾果28开奖 Masonry库,台湾宾果28开奖通知警报,台湾宾果28开奖数字输入,台湾宾果28开奖脚本,台湾宾果28开奖标签输入,台湾宾果28开奖时间选择器,台湾宾果28开奖strap。

 

使用台湾宾果28开奖创建仪表板:

仪表板是一个紧凑的监视器,可以处理公司的所有指标。因此最好使用react,因为它具有许多可以使仪表板看起来具有交互性的功能。最好在使用react编写应用程序代码时使用JSX。要创建仪表板,我们需要执行以下步骤:

 

步骤1为仪表板创建HTML页面,包括CSS文件:

HTML代码:

 

<div class =“ chart-row”>

    <div id =“ country-revenue”></div>

</div>

 

<div class =“ chart-row”>

<div id =“每月收入” class =“ inline-chart”>

</div>

<div id =“ product-revenue” class =“ inline-chart”>

</div>

</div>

 

CSS代码:

 

.chart-row {

  margin-bottom: 15px;

}

.inline-chart {

  显示:inline-block;

  width: 48%;

  margin-left: 1%;

}

 

第2步:创建一个台湾宾果28开奖组件:

 

var DashboardApp = 反应.createClass({

  render: function() {

返回(

   <div>

     <h1 className =“主标题”>Acme Inc. 2015年收入分析</h1>

     <div id =“ interactive-dashbaord”></div>

     <div className =“ chart-row”>

       <div id =“ country-revenue”>

         //此处的国家/地区收入图表

       </div>

     </div>

     <div className =“ chart-row”>

          <div id =“每月收入” className =“ inline-chart”>

         //此处的图表2 –样条曲线

       </div>

       <div id =“ product-revenue” className =“ inline-chart”>

         //图表3 –甜甜圈

       </div>

     </div>

   </div>

);

  }

});

 

步骤3要将react组件呈现为HTML:

 

反应.render(

<DashboardApp />,

document.getElementById(“仪表板”)

);

 

步骤4创建多个图表组件:

步骤4.1准备图表数据:

 

[{

“ label”:“ Orange”,

“值”:“ 90”

},{

“标签”:“黄色”,

“值”:“ 60”

}…]

步骤4.2创建图表配置:

 

{

  type: “doughnut2d”,

  renderAt:“产品收入”,

  width: ‘100%’,

  height: 400,

  dataFormat: “json”,

  dataSource: {

图表:{

   标题:“上个月收入排名前5位的商店”,

   主题:“碳”

},

数据:[{

        “label”: “Jan”,

        “value”: “657000”

   },{

        “label”: “Feb”,

        “value”: “138000”

   },

   …{

        “label”: “Dec”,

        “value”: “730000”

   }

]

  }

}

 

步骤5使用react插件创建图表

 

<react_fc.FusionCharts {…countryChartConfigs} />

 

步骤6将组件放置在JSX仪表板中:

 

<div>

  <h1 className =“主标题”>Acme Inc. 2015年收入分析</h1>

  <div id =“ interactive-dashbaord”></div>

  <div className =“ chart-row”>

<div id =“ country-revenue”>

      <react_fc.FusionCharts {…countryChartConfigs} />

</div>

  </div>

  <div className =“ chart-row”>

<div id =“每月收入” className =“ inline-chart”>

      <react_fc.FusionCharts {…monthlyChartConfigs} />

</div>

<div id =“ product-revenue” className =“ inline-chart”>

      <react_fc.FusionCharts {…productChartConfigs} />

</div>

  </div>

</div>

 

Exit mobile version