[PC组件]-内容组件创建-菜鸟教程

云小米

组件基础样式依赖：http://s.jinyunweb.com/jinyunui/  进云框架页面默认会加载这些基础样式，建议在创建组件时，可以不用另外加样式，在基础样式的基础上添加组件，让页面更简洁统一
1、展示代码：

//{{{item}.style.contbackground}}这个是背景色，凡是属于style.的都是样式参数;params.的就是编辑器的参数，例如{{{item}.params.title}}表示自定义的标题<div class="container" style="background:{{{item}.style.background}};">    <div class="jumbotron" style="padding-left:{{{item}.style.paddingleft}}%;padding-top:{{{item}.style.paddingtop}}%;background:{{{item}.style.background}}">        <h1 style="color:{{{item}.style.color}};font-size:{{{item}.style.font-size || '58'}}">{{{item}.params.title}}</h1>        <p style="color:{{{item}.style.descolor}};font-size:{{{item}.style.desfont-size || '15'}}">{{{item}.params.descriprtion}}</p>        <p>          <a class="btn btn-lg btn-primary" href="{{{item}.params.link}}" role="button">详情 »</a>        </p>    </div></div>2、编辑器页面代码：

//所有编辑器里面设置的变量，必须在pagedata.current_edit.下面，用ng-model来绑定<div class="row"><button ng-click="pagedata.show_edit=false;" class="close" style="padding:2px" type="button">×</button><ul class="nav nav-tabs"><li class="active">基本设置</li></ul></div><div class="row"><div class="pc-model-h5"><i class="fa fa-chevron-circle-down"></i> 设置</div><div class="form-group">    <div class="col-sm-2 control-label">文章标题</div>    <div class="col-sm-10">        <div class="input-group form-group" style="margin: 0;">            <input class="form-control input-sm diy-bind" ng-model="pagedata.current_edit.title" data-placeholder="" placeholder="请输入标题" value="{{pagedata.current_edit.title}}" />        </div>    </div></div><div class="form-group">    <div class="col-sm-2 control-label">文章描述</div>    <div class="col-sm-10">        <textarea  type="text" class="form-control diy-bind" ng-model="pagedata.current_edit.descriprtion" cols="30"></textarea>    </div></div><div class="form-group">        <div class="col-sm-2 control-label">标题链接</div>        <div class="col-sm-10">            <div class="input-group form-group" style="margin: 0;">                <input class="form-control input-sm diy-bind" ng-model="pagedata.current_edit.link" data-placeholder="" placeholder=""/>                <span data-toggle="selectUrl" class="input-group-addon btn btn-default" ng-click="pagedata.link(pagedata.current_edit,'link')">选择链接</span>            </div>        </div></div></div>3、生成的代码

//用单个{}来表示替换变量，例如{style.background}表示系统背景色；{params.title}表示编辑页自定义的标题<div class="container" style="background:{style.background}">    <div class="jumbotron" style="padding-left:{style.panddingleft}%;padding-top:{style.paddingtop}%;background:{style.background}">        <h1 style="font-size:{{'{style.font-size}' || '58'}};color:{style.color}">{params.title}</h1>        <p style="font-size:{{'{style.desfont-size}' || '15'}};color:{style.descolor}">{params.descriprtion}</p>        <p>          <a class="btn btn-lg btn-primary" href="{params.link}" role="button">详情 »</a>        </p>    </div></div>4、默认参数
//默认参数很重要，便于体验{"title":"内容标题","descriprtion":"这里填写文章内容详情描述，简易40-50个字左右！效果会好些哦！"}