首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

第三章 构建Markdown应用程序 | Electron in Action(中译)

我们的应用程序将由两个窗格组成,用户可以编写或编辑Markdown和一个右窗格,该窗格以HTML形式呈现用户的Markdown。...[figure31.png] 图3.1 我们的应用程序的线框显示,用户可以在左侧窗格中输入文本,或者从用户的文件系统的文件中加载文本。 在这一章中,我们为我们的应用奠定了基础。...我们创建项目的结构,安装依赖项,设置主进程和呈现器进程,构建用户界面,并在用户向左侧窗格输入文本时实现markdown到HTML的转换。 我们将在接下来的几章中分阶段构建应用程序的其余部分。...*/ .content { height: 100vh; display: flex; } /* 使用Flexbox将两个窗格设置为相同的宽度 */ .raw-markdown...[figure37.jpg] 图3.7 我们将在左侧窗格中添加一个事件监听器,它将以HTML的形式呈现标记并显示在右侧窗格中。

2.1K30

10分钟实现Typora(markdown)编辑器

我们的应用程序将由两个窗格组成,用户可以编写或编辑Markdown和一个右窗格,该窗格以HTML形式呈现用户的Markdown。...图3.1 我们的应用程序的线框显示,用户可以在左侧窗格中输入文本,或者从用户的文件系统的文件中加载文本。 在这一章中,我们为我们的应用奠定了基础。...我们创建项目的结构,安装依赖项,设置主进程和呈现器进程,构建用户界面,并在用户向左侧窗格输入文本时实现markdown到HTML的转换。 我们将在接下来的几章中分阶段构建应用程序的其余部分。...*/ .content { height: 100vh; display: flex; } /* 使用Flexbox将两个窗格设置为相同的宽度 */ .raw-markdown...图3.7 我们将在左侧窗格中添加一个事件监听器,它将以HTML的形式呈现标记并显示在右侧窗格中。 引入依赖项很容易,因为我们可以使用Node的require来引入marked。

2.8K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    可折叠设备、平板设备和大屏设备更新一览

    您的应用应该允许调整窗口大小,来无缝地支持多任务。请正确处理折叠和展开事件,并让您的应用支持多窗口模式,避免应用窗口区域内出现黑边。...为此,您可以使用更新的 SlidingPaneLayout 库。这个库如今支持双窗格布局,SlidingPaneLayout 会使用两个窗格的宽度来决定如何布局 UI。...例如,如果列表窗格的最小宽度为 200dp,而细节窗格需要 400dp,那么当窗口总宽度在 600dp 或以上时,SlidingPaneLayout 会自动将两个窗格并排显示。...如果您使用的是带铰链的设备,并且铰链挡住了部分屏幕,它将自动把内容放置在铰链两边。 我们还引入了锁定模式,允许您控制窗格重叠时的滑动操作 (也支持编程切换)。...例如,为了防止用户划进一个空窗格,您可能会让用户必须点击一个列表项来加载该窗格的信息,但允许用户通过划动返回列表。而在可折叠设备或平板电脑上,如果有空间并排显示两个视图,锁定模式会被忽略。

    2.1K20

    在Excel中制作甘特图,超简单

    项目被划分为可定义的任务,每个任务在另一个任务上画成一条单独的线,线/条的宽度显示任务的持续时间及其完成状态。持续时间越长,任务在图表上显示的范围就越广。...创建步骤 步骤1:将活动单元格置于数据区域内,按Ctrl+A选择整个数据区域,然后按Ctrl+T将数据转换成Excel表。 图1 步骤2:可以看到,日期的格式为数字或“常规”数字格式。...双击包含任务名称的垂直坐标轴,在右侧“设置坐标轴格式”任务窗格中,选取“坐标轴选项”栏中的“逆序类别”。 图5 步骤6:双击图表顶部的日期轴,并将“边界”的最小值设置为43337。...设置系列的分类间距,并重新填充颜色,使其更清晰。 图8 从动态Excel甘特图中添加/减少活动/任务 现在,如果想添加另一项任务,非常简单。...只需转到数据区域的最后一个单元格并单击Tab,这将自动添加一行,可以输入必要的信息,甘特图将自动更新。 甚至可以立即更新现有活动及其信息,以反映在excel甘特图中。

    7.9K30

    如何在Ubuntu 16.04上安装和使用Byobu进行终端管理

    这些为您提供了许多不同的选择和可能性,并且它足够灵活,可以让您完成任务并让您完成任务。 本教程将介绍如何安装和配置Byobu以及如何使用其最常用的功能。...虽然这通常是一个非常有用的功能,但是,例如,如果其中一个连接的窗口尺寸小得多(因为Byobu将自行调整大小以匹配最小窗口),则会导致问题。...第7步 - 使用窗格 Byobu提供了将窗口分成多个窗格的功能,包括水平和垂直分割。这些允许您在同一窗口中进行多任务,而不是跨多个窗口。...聚焦窗格将均匀分割,允许您根据需要拆分窗格以创建相当复杂的布局。请注意,如果没有足够的空间将窗格拆分为两个窗格,则无法拆分窗格。...您可以CTRL+F3/F4分别使用向上或向下移动当前窗格来重新排序窗格。 SHIFT+ALT+LEFT/RIGHT/UP/DOWN允许您操纵当前所选窗格的宽度和高度。

    10.3K00

    iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

    如果用户很难点中集合视图中的项,他们是不会愿意用你的应用的。跟所有用户可以点击的UI对象一样,请确保你的集合视图中每一个项的最小点击区域有44×44pt,尤其是在iPhone上。...而若是支持了缩放操作的话,你还应当根据用户当前的任务来设定在当前情景下允许缩放的最大值和最小值。如果你允许一个字符被放大到充满整个屏幕的话,用户会很难阅读当前内容。...使用对分视图控制器,在左侧主窗格展示固定的信息,在右侧详情窗格展示相关的详情或从属信息。以这种设计模式,当用户选择类主视图中的某一项,右侧详情窗格应当展示相应与这一项相关的内容。...这样会让用户很难分清这两个窗格的从属关系。 一般来说,始终显示左侧主窗格中当前选中的项。尽管右侧窗格中的内容会变化,但它应当始终保持着与当前选中窗格的相关性。...这样的体验有助于用户理解左侧窗格项与右侧窗格内容的关系。 合适的话,给用户提供不止一种获取主窗格的方式。

    10.1K51

    实践 | 为 Trackr app 适配大屏幕设备

    △ 横向显示的手机上的导航轨道 双窗格布局 调整前 : 任务 (Tasks) 和归档 (Archive) 界面完全占满了整个显示宽度,并且点击列表中某一项目时,其对应的详细信息会覆盖显示之前的列表。...△ 双窗格布局能更好地利用屏幕空间 编辑任务和新建任务 调整前 : 当您编辑一个任务时,编辑任务的界面会取代任务详细信息界面,并占据整个屏幕。和此前的任务详细信息界面一样,这样会使屏幕内容显得不平衡。...△ 悬浮的编辑组件将关注点放在用户当前的目标内容上 起初我们尝试将编辑任务界面取代任务详细信息 (Task Detail) 显示在详细信息窗格中。...在双窗格布局中,如果我们在详情窗格里将任务详细信息替换为编辑任务,那么看起来似乎没有发生什么变化——界面中必要的视觉强调还不够。...但是使用双窗格布局之后,我们还需要关注额外的情况: 用户可以点击导航轨道中的其他按钮,或是列表窗格中的其他任务来切换。临时禁用这些元素会很麻烦。

    1.7K20

    Android TV开发总结【适配】

    具体来说,设备的 smallestWidth 是屏幕可用高度和宽度的最小尺寸(您也可以将其视为屏幕的“最小可能宽度”)。...仅当可用屏幕的最小尺寸至少为 600dp 时,系统才会使用这些资源,而不考虑 600dp 所代表的边是用户所认为的高度还是宽度。...可用的宽度也是 确定是否对手机使用单窗格布局或是对平板电脑使用多窗格布局 的关键因素。因此,您可能最关注每部 设备上的最小可能宽度。...这对于确定是否使用多窗格布局往往很有用,因为即使是在 平板电脑设备上,您也通常不希望竖屏像横屏一样 使用多窗格布局。...因此,您可以使用此功能指定布局需要的最小宽度,而 无需同时使用屏幕尺寸和方向限定符。

    4.1K10

    折叠屏上应用设计规范,了解一下?

    请大家注意,这些布局采用的是宽度限定符 "-w",而非最小宽度限定符 "-sw"。剩余空间用于排列内容,我们可以在这些空间应用规范布局。...,剩余空间可通过 layout_weight 分配,如左图所示;如果空间不足,如右图所示,则每个窗格都使用父视图的全宽,详情窗格将被滑到一边,或直接覆盖第一个窗格。...在 Trackr 应用 中效果如下图所示: 关于如何使用 SlidingPaneLayout 实现双窗格布局的相关内容,请参阅 Android 开发者网站: 创建双窗格布局,该页面还介绍了其他内容,例如集成系统返回按钮以实现侧滑回退窗格等...在如下媒体类示例应用,它的首图限制在 16:9 的宽高比内,描述窗格占 60% 宽度,剩余空间留给其他元素。...只要两个窗格都能容纳进去,SlidingPaneLayout 会将窗格置于折叠姿态的另一侧。

    4.5K20

    windows10切换快捷键_Word快捷键大全

    + F 搜索电脑(如果你位于网络中) Win + Shift + M 将最小化的窗口还原到桌面 Win + 数字 打开桌面,并启动固定到任务栏的位于该数字所表示位置的应用。...+ Shift + 向下键 在垂直方向上还原/最小化活动桌面窗口,同时保持宽度不变 Win + Shift + 向左键或向右键 将桌面中的应用或窗口从一个监视器移动到另一个监视器 Win + 空格键 切换输入语言和键盘布局...Win + T 打开时钟 Win + W 发送到白板 Win + X 切换边栏 Win + 1 打开或关闭边栏中的“呼叫”窗格 Win + 2 打开或关闭边栏中的“人脉”窗格 Win + 3 打开或关闭边栏中的...“消息”窗格 Win + 4 打开或关闭边栏中的“内容”窗格 Win + F6 在边栏、顶栏和底栏之间移动键盘焦点 Win + Shift + F6 以相反方向在边栏、顶栏和底栏之间移动键盘焦点 Win...以及,常用却没有快捷键的功能,比如Word中的“编号”、Excel中的“冻结窗格”、PowerPoint中的“对齐”“选择窗格”等,或编写/录制的宏,可以将其添加到快速访问工具栏,配合Alt +数字快速调用

    5.5K10

    VBA专题10-4:使用VBA操控Excel界面之设置工作簿视图和窗口

    窗口视图 最大化、最小化、恢复,以全屏模式显示活动窗口 示例代码: '最大化,最小化,以及恢复活动窗口 With ActiveWindow .WindowState = xlMaximized...4列左右分格 With ActiveWindow .SplitRow = 0 .SplitColumn = 4 End With '拆分活动窗口中的活动工作表为4个窗格 '在第5行和第4...冻结活动窗口的拆分窗格 示例代码: '在第2行冻结活动窗口中的活动工作表 '即第1行和第2行被冻结 With ActiveWindow .SplitRow = 2 .SplitColumn...ActiveWindow .SplitRow = 2 .SplitColumn = 1 .FreezePanes = True End With 当冻结活动窗口的拆分窗格后,在滚动工作表时被冻结的列和行将保持可见...'取消冻结窗格 With ActiveWindow .FreezePanes = False '如果删除了拆分窗格,也需要下列代码行 '因为ActiveWindow对象的Split

    3.8K20

    实践 | Google IO 应用是如何适配大尺寸屏幕 UI 的?

    双窗格会一直存在,但根据屏幕的尺寸,第二窗格可能不会显示在可视范围当中。只有在给定的窗格宽度下仍然有足够的空间时,SlidingPaneLayout 才会同时将两者显示出来。...我们分别为会议列表和详情窗格分配了 400dp 和 600dp 的宽度。...经过一些实验,我们发现即使是在大屏幕的平板上,竖屏模式同时显示出双窗格内容会使得信息的显示过于密集,所以这两个宽度值可以保证只在横屏模式下才同时展现全部窗格的内容。...我们可以用某窗格的 NavController 来管理该窗格内包含的各个目的页面,比如会议详情、讲师详情。...如今此方法行不通了,因为在那种情况下,带有这些限定符的布局或是其他资源文件都会被按照整屏幕宽度解析,但事实上我们只关心那个特定窗格的宽度。 要实现这一特性,请参阅搜索 布局 的应用栏部分代码。

    2.1K20

    最佳实践:针对Rust 应用 Zellij 进行故障排除和性能提升

    Zellij 保持每个终端窗格的状态,以便在用户每次连接到现有会话时都能够重新创建它,甚至在内部选项卡之间切换。这个状态包括了窗格的文本和样式,以及窗格内的光标位置。...在 Zellij 窗格中显示大量数据时,性能问题会非常显著。例如 cat 一个非常大的文件时,Zellij 不仅比裸终端模拟器慢很多,而且比其他终端多路复用器也会慢很多。...PTY thread 查询 pty——后者作为我们与 shell(或在终端内运行的其他程序)的接口——并将原始数据发送到 Screen thread。该线程解析数据并建立相关终端窗格的内部状态。...每个这样的推送都涉及一个堆分配,用来调整 vector(注 1)的大小,这在性能方面是一项代价高昂的操作。我们可以在每次创建行或调整终端窗格大小时预先分配列向量来获得一些性能提升。...渲染速度更快 屏幕线程的渲染部分本质上执行的是与数据解析部分相反的操作。它获取由上述数据结构表示的每个窗格的状态,并将其转换为 ANSI/VT 指令,以发送到用户自己的终端仿真器并由其解析。

    69720

    最新iOS设计规范四|3大界面要素:视图(Views)

    二、活动视图(Activity Views) 活动视图通常出现在当前上下文中,而活动便是一项任务,例如复制、收藏、查找。一旦启动,活动可以立即执行任务,或者在之前页面的基础上访问更多信息。...分列视图由一个两列或三列的界面组成,分别显示一个主列,一个可选的补充列和一个辅助内容窗格。主列中的更改将导致可选补充列中内容的更改。...在这种类型的界面中,主要列显示侧边栏,可选补充列显示列表视图,辅助内容窗格显示有关所选内容的详细信息。 在iPad上,使用拆分视图而不是标签栏。...尽管辅助窗格的内容可以更改,但它应始终与其他列中可清楚识别的选择相对应。这种选择有助于人们理解列之间的关系并保持自己的方向。 如果合适,允许人们在列之间拖放内容。...行可以被分隔为不同标记的部分,并且会有索引标记显示在屏幕右侧。页眉可以出现在一节中的第一项之前,页脚可以出现在最后一项之后。 ? 分组列表。

    8.5K31

    Mac 下使用 tmux

    基本概念 Session会话,一组窗口的集合,通常来概括一个任务, Session 可以有自己的名字用来切换Window窗口,单个可见窗口,有自己的编号,可以快捷切换。...Pane窗格,被划分可小块的窗口,类似于 vim 中的 C-w +v 。 快捷键 ctrl + b 来激活快捷键,开启后可以使用一些特定按键来执行操作。 分类 快捷键 功能 基础 ?...l 在前后两个窗口间切换 w 通过窗口列表切换窗口 f 在所有窗口中查找指定文本 Pane管理 % 创建水平窗格 " 创建一个垂直窗格 h 将光标移入下左侧窗格 j 将光标移入下下方窗格...l 将光标移入下右侧窗格 k 将光标移入下上方窗格 q 显示窗格编号 o 在窗格间切换 } 与下一个窗格交换位置 { 与上一个窗格交换位置 !...在当前窗格显示时间 z 最大化和最小化当前窗口

    6.6K10

    IntelliJ IDEA 2021.2 中,您完全不需要鼠标的 10 种情况

    如果答案是肯定的,那接下来的内容正好适合您!在这篇文章中,我们将向您展示 10 个不必在日常任务中使用鼠标的位置。 1....在不移动光标位置的情况下滚动编辑器窗格中的文本 常见的做法是向上或向下滚动编辑器窗格来阅读代码。如果不需要编辑代码,您可能也不需要将光标从其当前位置移开。...在编辑器窗格中使用 Ctrl+Up 或 Ctrl+Down(或 ⌘Up/⌘Down),即可进行滚动而不更改光标位置。...额外提示: 为了便于阅读代码和在编辑器窗格中上下移动,您可以折叠方法、代码块或导入语句集,使其在编辑器窗口中仅占用少量空间。...另一项实用操作是以 Alt+Down (⌃Down) 或 Alt+Up(或⌃Up)从一个方法声明跳转到另一个方法声明。 结语 无论您是喜欢使用鼠标还是键盘,我们都祝您开发愉快!

    11310

    Power Query 真经 - 第 2 章 - 查询管理

    ,“暂存” 查询完成转换为干净格式的任务。...要重新配置 “Sales”(或任何其他查询)的加载目的地的方法如下所示,结果图 2-16 所示。 进入 Excel 的【查询 & 连接】窗格。 右击想更改的查询( “Sales” )【加载到】。...可以在 Power Query 编辑器中的 【查询】导航器窗格找到这个功能,也可以在 Excel 中的【查询 & 连接】窗格中找到这个功能。...2.4.1 查询文件夹 当创建新的文件夹时,无论是在【查询】导航器窗格中,还是在 Excel 中的【查询 & 连接】窗格中,都有两种不同的选择。 要创建一个新的(空)文件夹。...不幸的是,虽然在 Power Query 编辑器中的【查询】导航器窗格中是这样的,但在【查询 & 连接】窗格中并不支持拖放操作。要在这个窗格中分配查询,需要执行以下操作。

    2.8K40

    Win10 快捷键大全(史上最全)「建议收藏」

    Windows 徽标键 + Ctrl + F 搜索电脑(如果你位于网络中) Windows 徽标键 + Shift + M 将最小化的窗口还原到桌面 Windows 徽标键 + 数字 打开桌面,并启动固定到任务栏的位于该数字所表示位置的应用...) Windows 徽标键 + Shift + 向上键 将桌面窗口拉伸到屏幕的顶部和底部 Windows 徽标键 + Shift + 向下键 在垂直方向上还原/最小化活动桌面窗口,同时保持宽度不变 Windows...Home 显示活动窗口的顶端 F11 最大化或最小化活动窗口 虚拟桌面键盘快捷方式 按此键 执行此操作 Windows 徽标键 + Tab 打开任务视图 Windows 徽标键 + Ctrl + D...Microsoft Edge 键盘快捷方式 按此键 执行此操作 Ctrl + D 将当前站点添加到收藏夹或阅读列表 Ctrl + I 打开“收藏夹”窗格 Ctrl + J 打开“下载”窗格 Ctrl +...H 打开“历史记录”窗格 Ctrl + P 打印当前页面 Ctrl + F 在页面上查找 Alt + C 打开 Cortana 注意 Cortana 仅在特定的国家/地区中提供,并且某些 Cortana

    17.7K31
    领券