介绍
虽然现在Electron可以做出非常漂亮UI的跨平台桌面应用程序，但是对于一个像快速进入开发阶段的项目来说，如果自己从头开始，无疑会带来很多重复性劳动的问题，那么有没有一种可以快速上手框架可供我们使用呢，那么答案是肯定的，今天就像大家介绍一下用于使用Electron构建桌面应用程序的UI工具包，用于快速构建漂亮的Election应用程序！
Github开源地址
https://github.com/connors/photon
预览DEMO
你可以有两种方式快速开始，一种是经过编译和压缩CSS和字体，不包含文档或原始源文件，另一种就是直接下载Photon的源文件，可以快速学习，本文作为演示就不在详细的去看源文件了：
我们直接采用第一种方式，下载后文件目录如下：
没错Photon就是纯粹的HTML+CSS,然后我们稍微进行下改造
cd template-app npm install electron-prebuilt npm install app npm install browser-window
进行上面一顿操作后，我们在改造下app.js
这个地方可能不是每个人都要这样，我在本地测试报错了，改造后，在运行
npm start
快速上手
- APP布局
每个Photon应用程序都具有相同的基本结构，包括主.window元素和cooresponding .window-content包装器
<div class="window"> <div class="window-content"> ... </div> </div>
- Paned布局
使用.pane-group和.pane元素以想要的任何方式划分您的应用程序内容。根据需要添加任意数量的窗格。它们将在应用程序中均匀布局。
<div class="window"> <div class="window-content"> <div class="pane-group"> <div class="pane">...</div> <div class="pane">...</div> <div class="pane">...</div> </div> </div> </div>
- 侧边栏布局
侧栏可用于在应用程序中容纳导航或其他补充信息。可选的.sidebar类将窗格的背景颜色设置为灰色。
<div class="window"> <div class="window-content"> <div class="pane-group"> <div class="pane-sm sidebar">...</div> <div class="pane">...</div> </div> </div> </div>
- 迷你侧边栏布局
<div class="window"> <div class="window-content"> <div class="pane-group"> <div class="pane-mini sidebar">...</div> <div class="pane">...</div> </div> </div> </div>
- 一般布局
许多应用程序遵循相同的简单布局，具有标题，内容和页脚结构。这在Photon中非常容易构建。
<div class="window"> <header class="toolbar toolbar-header"> <h1 class="title">Header</h1> </header> <div class="window-content"> <div class="pane-group"> <div class="pane-sm sidebar">...</div> <div class="pane">...</div> </div> </div> <footer class="toolbar toolbar-footer"> <h1 class="title">Footer</h1> </footer> </div>
- 最基本的模板
<!DOCTYPE html> <html> <head> <title>Photon</title> <!-- Stylesheets --> <link rel="stylesheet" href="photon.css"> <!-- Electron Javascript --> <script src="app.js" charset="utf-8"></script> </head> <body> <!-- Wrap your entire app inside .window --> <div class="window"> <!-- .toolbar-header sits at the top of your app --> <header class="toolbar toolbar-header"> <h1 class="title">Photon</h1> </header> <!-- Your app's content goes inside .window-content --> <div class="window-content"> <div class="padded-more"> <h1>Welcome to Photon</h1> <p> Thanks for downloading Photon. This is an example HTML page that's linked up to compiled Photon CSS, has the proper meta tags and the HTML structure. </p> </div> </div> </div> </body> </html>
组件预览
- Bars
- 标签（tab）
- Navs
- 列表
- 按钮
- 表单
- 表格
- 图标
总结
Photon是一个用于构建Electron应用程序的UI工具包，颇有一番苹果的风味在里面，可以用于快速构建Electron跨平台桌面应用程序！