Electron控制台应用程序的样式（8）

fengjutian
208 阅读1分钟

image.png

现代终端虽然非常复杂，但是小型的终端只需要：

  • 一种输入命令的方式
  • 运行这些命令
  • 显示输出

在本文中，我们将忽略令人讨厌的“run commands”部分，只从外观开始。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Episode 8 - Terminal App</title>
    <link href="app.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>Very amazing terminal app</h1>
    <div id="terminal">
      <div id="history">
        <div class="input-line">
          <span class="prompt">$</span>
          <span class="input">uname -a</span>
        </div>
        <div class="output">Darwin pallas 20.5.0 Darwin Kernel Version 20.5.0: Sat May 8 05:10:33 PDT 2021; root:xnu-7195.121.3~9/RELEASE_X86_64 x86_64</div>

        <div class="input-line">
          <span class="prompt">$</span>
          <span class="input">date</span>
        </div>
        <div class="output">Sun 1 Aug 2021 15:53:55 BST</div>
      </div>

      <div class="input-line">
        <span class="prompt">$</span>
        <form>
          <input type="text" autofocus />
        </form>
      </div>
    </div>
  </body>
</html>

排版

首先，显然终端总是处于黑暗模式：

body {
  background-color: #444;
  color: #fff;
}

输入行的提示

命令传统上以$开头。我们把它放在一个单独的元素中，因为我们可能会在某个时候做自定义提示。

最简单的样式化方法是将容器设置为flexbox。

由于input被包装在一个form，我们也需要使其成为另一个flexbox。

.input-line {
  display: flex;
}

.input-line > * {
  flex: 1;
}

.input-line > .prompt {
  flex: 0;
  padding-right: 0.5rem;
}

.output {
  padding-bottom: 0.5rem;
}

form {
  display: flex;
}

input {
  flex: 1;
}

颜色

终端通常不会设置颜色，但我认为用不同的颜色清楚地标记输入和输出是有帮助的。

.input {
  color: #ffa;
}

.output {
  color: #afa;
}

最后几个调整：

.output {
  white-space: pre;
}

input {
  border: none;
}

结果

代码

app.css

body {
    background-color: #444;
    color: #fff;
  }
  
  h1 {
    font-family: monospace;
  }
  
  #terminal {
    font-family: monospace;
  }
  
  .input-line {
    display: flex;
  }
  
  .input-line > * {
    flex: 1;
  }
  
  .input-line > .prompt {
    flex: 0;
    padding-right: 0.5rem;
  }
  
  .output {
    padding-bottom: 0.5rem;
  }
  
  .input {
    color: #ffa;
  }
  
  .output {
    color: #afa;
    white-space: pre;
  }
  
  form {
    display: flex;
  }
  
  input {
    flex: 1;
    font-family: monospace;
    background-color: #444;
    color: #fff;
    border: none;
  }

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Episode 8 - Terminal App</title>
    <link href="app.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>Very amazing terminal app</h1>
    <div id="terminal">
      <div id="history">
        <div class="input-line">
          <span class="prompt">$</span>
          <span class="input">uname -a</span>
        </div>
        <div class="output">Darwin pallas 20.5.0 Darwin Kernel Version 20.5.0: Sat May 8 05:10:33 PDT 2021; root:xnu-7195.121.3~9/RELEASE_X86_64 x86_64</div>

        <div class="input-line">
          <span class="prompt">$</span>
          <span class="input">date</span>
        </div>
        <div class="output">Sun 1 Aug 2021 15:53:55 BST</div>
      </div>

      <div class="input-line">
        <span class="prompt">$</span>
        <form>
          <input type="text" autofocus />
        </form>
      </div>
    </div>
  </body>
</html>

index.js

let { app, BrowserWindow } = require("electron")

function createWindow() {
  let win = new BrowserWindow({})
  win.maximize()
  win.loadFile("index.html")
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

原文：dev.to/taw/electro…

avatar
文章
阅读
粉丝