Vim基于文本的UI框架

Vim基于文本的UI框架

VUI - Vim Ui Framework

Create applications that run inside Vim buffers

See it in action:

⚠️ This plugin is in very early stage. Be aware that there are a few bugs yet to fix, documentation are non-existent and API is unstable (can change).

Installation

The installation is simple, use your preferred plugin manager:

" vim-plugPlug 'waldson/vui'" Pathogengit clone https://github.com/waldson/vui.git" NeoBundleNeoBundle 'waldson/vui'" VundlePlugin 'waldson/vui'

Usage

VUI is composed of a bunch of autoload-functions that are used to create applications.

The first step is to create a screen. A screen is the responsible for receiving input events, displaying components, and keeping track of the buffer:

let my_app = vui#screen#new()

After that, you can begin laying out your application using components. A component is an object (I mean a dictionary) that render something on screens.

You create your applications by combining components. For example, to create a box with a text inside you could do something like this:

let my_panel = vui#component#panel#new("Title", 10, 10)let my_text = vui#component#text#new('Text')call my_panel.add_child(my_text)

This will display something like this:

+--------+| Title |+--------+|Text || || || || || |+--------+

Here are some core components that you can use:

vui#component#box#new(x, y, width, height) Creates boxes like this: +------------------+ | | | | | | | | +------------------+ vui#component#button#new(text) Creates an interactive text component that can react to action events: let my_button = vui#component#button#new("Do something") function! my_button.on_action(button) " execute your action here endfunction vui#component#input#new(width) Creates a component that ask users for information: let my_input = vui#component#input#new(30) call my_input.set_placeholder("Enter your name: ") vui#component#panel#new(title, width, height) Creates a panel with a title and a content area: let my_panel = vui#component#panel#new('Title', 20, 10) " call my_panel.get_content_component().add_child(my_other_component) This component will be displayed like this: +------------------+ | Title | +------------------+ | | | | | | | | | | | | +------------------+ vui#component#toggle#new(text) Creates a switch (on/off) component: let my_panel = vui#component#toggle#new('Activate something')

There are others components. Please check components' folder for further information.

Show the screen

After you set up your screen and component hierarchy, it's time to show it. You have to set the root component that must be displayed when screen opens:

call my_app.set_root_component(my_root_component)call my_app.show()

Mappings

Here are the default mappings:

| j focus on next component | k focus on previous componentJ focus on last componentK focus on first component | perform action on focused componentr refresh screen

Besides that, commands that enter insert and visual mode are disabled (noremap ).

You can add your custom mappings to your screen:

" you can only map functions that belongs to your screenfunction! my_app.do_something() enewendfunctioncall my_app.map('a', 'do_something')

In this case, when you press a, a new buffer will be created.

Example Application

Please check out the to-do example on examples folder.

To-do mappings

a add a new itemo add a new itemm toggle visibility of items (all or only pending)dd delete an item toggle item

How to run

open todo.vim file (e examples/todo.vim)source the file (source %)press td

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。