2.1   链接 link

创建一个连接:

link = ui.link('click me', href='http://google.com')

如果链接名字有html字符(比如 <>)，希望保持可以:

link = ui.link('click <me>', href='http://google.com', escape=False)

ui.link('title', href='#')\
      .add(ui.h1('大标题'))\
      .add(ui.text('一些描述信息'))

ui.link('title').button().icon('add')

ui.link('title').on('submit', context, request, 'zopen.xxx:xxx', aa=1)

2.2   一段文字 text

生成html中的span:

ui.text('some html text')

以黯淡的方式显示次要文字:

ui.text('lalal a').discreet()

可以保留文本中的html内容:

ui.text('click <font size="12">me</font>', escape=False)

2.3   段落文字 paragraph

生成html中的 p:

ui.paragraph('blabla')

可以保留文本中的html内容:

ui.paragraph('click <font size="12">me</font>', escape=False)

2.4   保持格式 pre

如果需要完全保留原始格式, 不折行:

ui.pre('some html text')

可以保留文本中的html内容:

ui.pre('click <font size="12">me</font>', escape=False)

2.5   图片 image

ui.image(src="path/to/image")

2.6   按钮ui.button (html: button)

典型的按钮如下:

button = ui.button('发起新流程')\   # 按钮的连接
         .on('click', context, request, 'xxx.xxx:xxx', param1='xxx', param2='xxxx')  # 发起请求

点击之后提交到某个脚本，传递相关的参数。

点击之后，可以修改提示符:

button.loading('请稍等...')  # 点击发起之后，显示正在加载

可以改为圆角的按钮:

button.pill() # 圆角按钮

改按钮加上图标:

button.icon('add') # 使用图标

让按钮处于选中状态:

button.active() # 选中

可选的size:

button.size('large')  # 大尺寸
button.size('small')  # 小尺寸
button.size('xsmall')  # 最小尺寸

可选的按钮样式klass:

ui.button('ok', klass="primary")
ui.button('ok', klass="danger")

一般建议对每个表单添加至少一个primary样式的按钮

类似ui.link, 在表单中，可以点击某个按钮提交表单到指定位置:

ui.button('title').on('submit', context, request, 'xxx.xxx:xxx', aa=1)

可以保留文本中的html内容:

ui.button('click <font size="12">me</font>', escape=False)

2.7   HTML展示 ui.html

也可以直接显示一段html代码:

html = ui.html('asdf')

我们不希望你用html/css/js，如果你还是想用，可以使用 .html() 转换为html:

blabla = ui.link('a') + ui.link('b')
html = blabla.html() + ' you html code'
return html

另外一种方法是，使用 ui.html 将html变成ui组件:

ui.link('a') + ui.html(' you html code')

3.1   用户信息 principal

显示当前用户的信息，如果被禁用，会显示禁用字样，点击会进入用户的profile页面:

ui.principal(request.me.id)

3.2   本地化的时间 local_time

自动根据当前浏览器的时区，显示时间:

ui.local_time(datetime.datetime.now())

如果要格式化的显示，可参照:

ui.local_time(datetime.datetime.now()).format("YYYY-MM-DD")

具体格式参照 http://momentjs.cn/

也可以使用相对的时间:

ui.local_time(datetime.datetime.now()).from_now()

或者日历时间:

ui.local_time(datetime.datetime.now()).calendar()

3.3   大小信息 ui.size(size_bytes)

人性化的显示文件大小信息:

ui.size(1024)
ui.size(file_obj.get_size())

3.4   图标 ui.icon

采用Font Awesome图标，位于：

http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

如果需要显示一个图标:

ui.icon('edit', color='red', title="编辑")

我们底层采用的是 fontawesome字体 ，有更多参数:

ui.icon('ok', color='red', size="large", spin=True, rotate="90", flip="horizontal", pull="left", border=False, muted=False)

其中:

• size是大小，可以：large/1x/2x/3x/4x
• spin可控制旋转动画
• rotate表示固定旋转角度
• flip表示是否反转
• pull放置位置：left/right
• border: 是否显示边框
• muted: 是否淡化显示

ui.button / ui.link / ui.text /ui.paragraph 都支持设置图标，方法为:

ui.button('add').icon('add')

3.5   徽章ui.badge

通常在徽章上显示数字:

ui.badge('12')

可以在链接上显示徽章:

ui.link('blabla', href='')\
      .add(ui.badge('12'))

3.6   二维码 ui.qrcode

二维码就是对字符串的图形化编码:

ui.qrcode('blablabla')

3.7   分页条ui.paging

ui.paging(count, start, size).on('click', context, rquest, 'zopen.sales:listing')

其中:

1. on('click', context, reqeust, 'PKG_NAME:SCRPIT_NAME') 是定义分页处理脚本，需要自己来写这个脚本的。

3.8   graphviz图

最简单的一个a->b的图:

ui.graph()\
      .node('a')\
      .node('b')\
      .edge('a', 'b')

完整的参数:

ui.graph()\
     .node(name, label='', url='', shape='box', color='black', tooltip='')\
     .edge(start, end, label='', url='', color='black')\
     .subgraph(name, nodes, title='', url='', style='dotted', color='black')

其中的url是点击发起的ajax请求。

4.1   图标前缀

使用方法:

ui.link('添加', url).icon('plus')
ui.button('通知').icon('bell')

这个 .icon 方法参数和 ui.icon 是相同的。

所有图标采用Font-Awesome提供的，名字可参考这里：http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

4.2   加载提示 loading

调用后端脚本，默认会出现转动提示。

如果是小的改变，可以仅仅改变连接的提示信息:

link.loading('请稍等...') # 修改链接文字

如果希望整个页面主区域出现加载等待，可以设置所在的layout区域:

link.loading('正在加载...', 'main')

如果不希望显示任何加载信息，可以:

link.loading(None)

4.3   站点z-index

• 上方导航条：3000
• 批量操作条：4000
• 弹出遮罩：>=9999
• 消息提示和日历组件，图片预览： 65536
• 聊天消息：2000
• 扩展应用z-index规范：
• 如果置顶，需要大于65536