atom/atom-space-pen-views项目,基于atom-archive/space-pen项目实现了一些常用的View,比如TextEditorView,SelectListView,ScrollView。
这些View用起来很方便,可以很迅速的做出和Atom本身风格一直的对话框等界面。
使用
在package.json中添加依赖:
"dependencies": {
"atom-space-pen-views": "^2.1.0",
}
注意:SpacePenViews已经不再更新,最新版本为2.1.0
TextEditorView
对应文本编辑框。最常用的控件。
{View,TextEditorView} = require "atom-space-pen-views"
module.exports =
class MyView extends View
@content: ->
@div =>
@div "Type your answer:"
@subview 'answer', new TextEditorView(mini: true,placeholderText:'hello')
效果如下:
注意:现在在HTML中插入
<atom-text-editor>
标签就可以直接生成一个编辑框,不需要再使用TextEditorView了
ScrollView
ScrollView只是预定义了一些操作的回调函数,看其源代码就明白了:
module.exports =
class ScrollView extends View
initialize: ->
atom.commands.add @element,
'core:move-up': => @scrollUp()
'core:move-down': => @scrollDown()
'core:page-up': => @pageUp()
'core:page-down': => @pageDown()
'core:move-to-top': => @scrollToTop()
'core:move-to-bottom': => @scrollToBottom()
SelectListView
这是很经典的一个空间。fuzzy-finder, command-palette, symbols-view这些插件都是用他实现的。
默认底下会显示所有的选项,通过在输入框中输入关键字,列表会只显示符合的条目。默认就支持模糊搜索,所以用起来非常方便。
要实现图中的选择列表,一下的代码就能实现:
{SelectListView} = require 'atom-space-pen-views'
class MySelectListView extends SelectListView
initialize: ->
super
@addClass('overlay from-top')
@setItems(['Hello', 'World'])
@panel ?= atom.workspace.addModalPanel(item: this)
@panel.show()
@focusFilterEditor()
viewForItem: (item) ->
"<li>#{item}</li>"
confirmed: (item) ->
console.log("#{item} was selected")
cancelled: ->
console.log("This view was cancelled")
SelectListView的子类必须实现两个方法:
::viewForItem
SelectListView每次在生成一个条目时,都会调用该函数,并用该函数返回的结果作为条目的view。
该函数可以放回HTML字符串,DOM元素,jQuery对象,View对象。注意:返回的对象的root元素必须是
li
::confirmed
当一个条目被选中时,会调用该函数。
以上两个函数传入的参数,都是::setItems
设置的条目之一。
SelectListView还有几个有用的函数,大家可以看github页面上的说明。