文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

占位符文本通常会写明控件的功能（比如上图里的 “Search”字样），或者提示用户输入的文本将在哪里搜索（如“Google”）。 书签按钮(The Bookmarks button)。...4.2.9 滚动视图(Scroll View) 滚动视图方便用户浏览尺寸超越滚动视图边界的图片（下图中地球的图片无论是长度还是宽度都超过了）。 ?...API注释 想要了解如何在代码里定义滚动视图，请参考UIScrollView....当用户在视图中拖拽内容，内容随之滚动；当用户轻扫屏幕时，内容将快速滚动——直到用户再次触摸屏幕或内容已经到达底部时停止。...文本视图： 是一个可定义为任何高度的矩形 当内容太多超出视图的边框时，文本视图支持滚动 支持自定义字体、颜色和对齐方式（默认情况下，文本视图会以左对齐的黑色系统字体显示） 可以支持用户编辑，当用户轻击文本视图内部时

10.1K51

css基础样式2

如url(flower.png) 4.background-position 设置背景图的起始位置（默认的参照点是左上角） x，y //x的值代表从左到右偏移x，y的值代表从上到下偏移y X%，y% /...参数 fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。 local 此关键字表示背景相对于元素的内容固定。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...二，display：inline-block 1.即呈现出inline的特性（不占据一整行，宽度由内容决定） 2.又呈现出block的特性（可以设置宽高，内外边距） 3.还有缝隙问题 两个行内元素并排放时...必须使用vertical-align: top;才能让inlineblock元素垂直方向能对齐 基线对齐的内容，比较复杂。

1.4K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    CSS 中 关于 Overflow ，你需要了解的这些知识点！

    但是，可以使用 Javascript 滚动内容。 Scroll ? 在上图中，无论内容是否长，滚动条总是可见的。注意，这取决于操作系统。...Auto auto这是一个聪明的关键字，仅当内容比其容器长时才显示滚动条。 ? 注意，在图中，只有当内容比其容器长时，滚动条才可见。...，每个按钮都有一个伪元素，该元素相应地过渡到左侧和底部。...要解决该问题，我们可以主按钮添加overflow: hidden，并更改其对齐方式： .button { vertical-align: top; } 事例源码：https://codepen.io...grid 项目 CSS 网格有三种情况可以导致水平滚动，来看看它们。 对列使用像素值 ? 当使用像素值时，这将在视口宽度较小时引起问题。

    4.6K20

    iOS 9人机界面指南(四)：UI元素（下）- 腾讯ISUX

    4.3.2 添加联系人按钮 添加联系人按钮让用户将现有联系人添加到文本框或者其它文字视图中。 ? API注释 想要了解如何在代码中定义添加联系人按钮，请参考UIButton....一般来说，你会在一个表格视图中使用详情展开按钮来让用户知道更多关于这个列表项的信息。当然你也可以将这个按钮用在其它类型的视图中来为用户展示更多与特定项目相关的信息和功能。...请在必要时调整分段控件中文本的对齐方式。如果你给分段控件添加了自定义底图，请确保控件里自动居中的文本依然清晰美观。...举个例子，你可以在文本框的左侧或者右侧加入自定义图形，或者加入系统按钮，如书签按钮等。一般来说，文本框的左侧用于表述文本框的含义，而右侧用于展示附加的功能，如书签。...避免让用户滚动操作列表。如果你的操作列表中存在过多按钮，用户必须要滚动才能看完所有操作。这样的体验是可能让用户不安，因为他们要花更多的时间来充分理解每个选项的区别。

    13.2K30

    bootstrap快速入门笔记（七）-表格,表单

    当屏幕大于 768px 宽度时，水平滚动条消失。 　　a,垂直方向的内容截断: 　　　　响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。....form-group也可以； 2，内联表单：  元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。...只适用于视口（viewport）至少在 768px 宽度时 　　a,可能需要手动设置宽度: 　　　　在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。...b,一定要添加 label 标签: 3,水平排列的表单.form-horizontal 类:联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。...2），输入控件组：如需在文本输入域  前面或后面添加文本内容或按钮控件，请参考输入控件组。 　　3），文本域：支持多行文本的表单控件。可根据需要改变 rows 属性。

    3K30

    Material Design — 菜单（Menus）

    行为 滚动 替代 Simple Dialogs ---- 用法 菜单是与按钮，动作，点或其他控件交互时出现的临时材料，至少包含两个菜单项。...每个菜单项都包含不关联的选项或操作，可影响app，页面或视图中已选定的元素。 菜单不应该被用作app内导航的主要方法。 ?...菜单项还可包含： ·图标和提示文本（如下图中展示的键盘快捷键）； ·如复选标记之类的控件（已选择的打勾），表明多个已选的项目或状态。 菜单排序 带有静态内容的菜单应该在菜单的顶部放置最常用的菜单项。...垂直对齐 靠近屏幕边缘时，简单菜单将垂直重新对齐，以使所有菜单项完全可见。...取消选择 触摸菜单外部或按下系统“后退”按钮，取消操作并关闭菜单。 ? 简单菜单 ·打开时，简单菜单会尝试将当前选定的菜单项目与列表项目垂直对齐。 当前选择的菜单项突出显示（如下图）。 ?

    5.8K100

    java怎么用_如何使用Java编写程序

    对于显示的图片，我正在运行32位，如系统信息栏中显示的那样。 步骤4：下载Java开发工具包 最后，我们将开始下载JDK。向下滚动页面；确保接受用户许可协议。...为了突出参考，我在图中突出显示了Windows下载。 步骤5：安装JDK第一部分 下载完成后，将自动弹出一个窗口。单击下一步，然后再次单击下一步。安装过程完成后，单击“关闭”。这样就完成了工厂安装！...点击这个按钮。在中间菜单中，滚动到Path变量，将其突出显示，然后单击页面底部附近的编辑按钮，如第一幅图所示。一长串计算机单词将弹出。滚动到开头，然后插入“bin;”。...这在第二张图中显示。最后，单击确定，直到退出所有菜单。现在，我们终于可以开始真正的编码了。 步骤7：准备编码 这是一个简单的步骤：打开“我的文档”。创建一个名为“JavaCoding”的新文件夹。...滚动到“附件”选项卡，然后打开一个记事本。键入以下单词，除了一件事外(完全大写)。成绩单下面将并排引用两个。在这些引号之间插入所需的任何文本。

    3.2K20

    万字总结 CSS 布局

    此时div和span没有什么区别，此时的div不能设置宽度和高度（即使设置了也并不显示出来，不信你去用代码验证一下呀），此时div可以和别人并排。...在块级维度上元素会一个接一个排列下去，当你滚动页面时元素也会随着滚动。 当你改变元素的position属性时，通常情况下你也会设置一些偏移量来使元素相对于参照点进行一定的移动。...当页面滚动时，固定的元素会留在相对于视口的位置，而其他正常流中的内容则和通常一样滚动。 当你想要一个固定导航栏一直停留在屏幕上时这会非常有效。...这样固定的元素就会相对于该块级元素偏移，而非视口。 接下来给出栗子： <!...上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

    5.7K20

    wxpython 窗口排版- proportionflagborder参数说明

    第二行依次为文本提示（控件居左，大小不变，文字横向左对齐，文字纵向居中对齐，），文本输入框（控件居左，大小横向向右缩放，纵向不缩放），按钮（控件居右，右边固定，大小向左缩放），按钮（控件居右，大小不变）...wx.TE_LEFT )         self.text_filename = wx.TextCtrl(panel,style=wx.TE_LEFT)         #创建文本内容框，多行，垂直滚动条...self.text_contents = wx.TextCtrl(panel,style=wx.TE_MULTILINE|wx.HSCROLL)              #添加容器，容器中控件按横向并排排列...        bsizer_top = wx.BoxSizer(wx.VERTICAL)         #添加容器，容器中控件按纵向并排排列         bsizer_center = wx.BoxSizer...当sizer的宽度从30变成60时，按钮1的宽度保持不变，仍然是10，按钮2的宽度约为（10+（60-30）*1/(1+2))=30 ，按钮2约为20。

    2.5K30

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

    通过在全屏模式视图中显示信息而不是在弹出窗口中来利用所有可用屏幕空间。 使用“关闭”按钮仅用于确认和指导。...如果你在滚动视图中显示页面控制元素，则需要关闭滚动视图中的滚动条以免为用户带来困扰。 不要在一个滚动视图中放置另一个滚动视图。...基础列表（默认）：行的左侧显示图像，其后紧跟左对齐标题。对于不需要显示其他附加信息的项目来说，这是一种很好的选择。 子标题模式：同一行中，包含左对齐标题和标题下面的左对齐文本。...右侧子标题：左对齐标题，右对齐子标题，位于同一行。 左侧子标题：右对齐标题，左对齐子标题，位于同一行。 ? 以上所有系统提供的标准列表单元格样式，同样都支持图形元素，例如勾选图标或其他指示性控件。...文本视图可以是任何高度，并可以通过滚动的方式显示额外的内容。 默认情况下，文本视图中的文本是左对齐的，并使用黑色的系统字体。如果文本视图可编辑，则在视图内部点击时，屏幕下方会弹出键盘。 ?

    8.5K31

    Flexbox 布局的最简单表单

    根据标准，这两个控件都是行内块级元素（inline-block），也就是说，它们默认并排在一行上。 ?...（2）弹性布局默认左对齐，所以两个控件会从行首开始排列。 如果我们希望，输入框占据当前行的所有剩余宽度，只需要指定输入框的flex-grow属性为1。...上图中，按钮的宽度没变，但是输入框变宽了，等于当前行的宽度减去按钮的宽度。 flex-grow属性默认等于0，即使用本来的宽度，不拉伸。等于1时，就表示该项目宽度拉伸，占据当前行的所有剩余宽度。...上图中，按钮变高了，输入框也自动变得一样高了！ 前面说过，弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度。...flex-start：顶边对齐，高度不拉伸 flex-end：底边对齐，高度不拉伸 center：居中，高度不拉伸 stretch：默认值，高度自动拉伸 （完）

    1.5K20

    Flexbox在表单布局的应用

    根据标准，这两个控件都是行内块级元素（inline-block），也就是说，它们默认并排在一行上。 ?...（2）弹性布局默认左对齐，所以两个控件会从行首开始排列。 如果我们希望，输入框占据当前行的所有剩余宽度，只需要指定输入框的flex-grow属性为1。...上图中，按钮的宽度没变，但是输入框变宽了，等于当前行的宽度减去按钮的宽度。 flex-grow属性默认等于0，即使用本来的宽度，不拉伸。等于1时，就表示该项目宽度拉伸，占据当前行的所有剩余宽度。...上图中，按钮变高了，输入框也自动变得一样高了！ 前面说过，弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度。...flex-start：顶边对齐，高度不拉伸 flex-end：底边对齐，高度不拉伸 center：居中，高度不拉伸 stretch：默认值，高度自动拉伸 如果项目很多，一个个地设置align-self属性就很麻烦

    1K20

    【UI 设计】PhotoShop基础工具 -- 移动工具

    -- 调整大小 : 之后使用 Ctrl + T 快捷键, 调整图像大小到合适位置; -- 缩小图像 : 使用鼠标拖动使图像缩小; -- 复制图层 : 复制上面的图层, 复制两份, 将三个图层的图片并排排列...与 最下面的底端对齐; -- 左对齐 : 与 最左侧像素左边对齐; -- 水平居中对齐 : 最左边的左侧 与 最右边的右侧 中间对齐; -- 右对齐 : 与 最右边的右侧对齐; 分布 :  -- 按顶分布...:  创建3D凸出 : 选择 菜单栏中 3D --> 从所选图层新建 3D 凸出, 之后弹出的对话框 点确定, 最后就会出现 3D 界面; 旋转工具 : 旋转工具, 可以旋转 3D 视图; 滚动工具...: 滚动工具, 可以使用鼠标左键拖动, 滚动图像; 平移工具 : 拖动鼠标 可以将3D 图形进行 上下左右平移; 滑动工具 : 与拖动工具类似, 但是只能左右滑动, 不能上下移动; 旋转工具 :...解锁图层 : 将第一张图片的图层解锁; 拖动图层 : 使用拖动工具, 直接将图片图层拖动到第一张图片的图层中; (3) 解析自动对齐 自动对齐解析 : 选中所有的图层, 点击自动对齐按钮, 弹出自动对齐对话框

    1.8K40

    iVX 倒计时制作

    使其可以居中对齐，并且给予对应的背景色，设置内部元素为居中对齐，接着为了使内部元素可以举例上下左右有一点举例，可以再设置内边距增加其边缘厚度： 接着创建一个行，命名为倒计时，在里面用于显示对应的文本...，设置其文本底部对齐显示： 接着咱们先将初始文本加入其中，并且设置好对应的大小： 这些文本宽度都是33%，这样才能占满一行： 接着添加两个对应的按钮，具体设置宽高不再赘述：...接着创建一个行，命名为记录区域用于记录记下的时间，设置宽度为 300px，还需要注意的是，为了使其可以滚动，咱们需要对应的为其设置可以y轴裁剪隐藏滚动即可： 接着咱们再到这个行下创建一个循环创建和一个文本...二、事件编写 2.1 点击事件 现在开始制作点击事件计时，咱们可以知道，计时的话肯定是需要一个触发器，那么此时咱们添加一个触发器： 点击按钮即可触发： 接下来还需要更改当前的按钮文本为停止计时...每次触发时这个秒数就应该设置为加1： 当加到60s时，那么这个秒变量置零，随后分加1，所以在这里我们还需要创建两个变量，分和时： 此时我们还需要知道一个问题，那就是如何在小于

    1.5K20

    小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了 ！

    1.重置button和input元素的背景 添加一个按钮时，重置它的背景，否则它会在不同的浏览器中看起来不同。...在下面的例子中，同样的按钮在 Chrome 和 Safari 中，后者添加了默认的灰色背景。 ?...当视口不够高时将元素固定在屏幕顶部 如果将元素固定在屏幕顶部，如果视口不够高会发生什么情况?很简单:它会占用屏幕空间，因此，用户浏览网站时可用的垂直区域就会变小，这会影响用户的体验。...要解决这个问题，将aside元素对齐到其父元素的开始位置，这样它的高度就不会扩大。...RTL 布局的电话号 在从右到左的布局中添加电话号码(如+ 972-123555777)时，加号将定位在电话号码的末尾。要解决这个问题，重新分配电话号码的方向即可。

    3.7K10

    干好这件事，卷死所有同行

    顶部标签 与输入域左垂直对齐 优点：节省水平空间，标签长度弹性大，可以加快浏览和处理速度。 缺点：垂直空间占用比较大，表单项多时需增加页面滚动。...左对齐标签 文字左对齐放置在输入域的左边 优点：文字开头按阅读视线对齐，方便用户快速浏览表单；节约垂直空间。 缺点：标签与表单域联系不紧密，视觉跳动大，填表不流畅；标签和输入域的弹性长度小。...善用开关按钮 允许用户在两个相反的状态之间进行选择，如：有效或无效、是或否、开或关等。...动作 “主动作”，如：提交、保存、下一步等；“次动作”，如：取消、撤销、返回等。...滚动条 表格宽度过长- 滚动条最好出现在表格中，不是在页面级别。 弹框过长-滚动条最好出现在弹框中，不是页面级别滚动。 避免出现滚动条套娃。 好啦以上就是全部啦！

    2.6K10

    WPF是什么_wpf documentviewer

    GridView及其辅助类能让你在表中来查看集合中的数据项，且可以通过表头来进行交互（表头是个按钮，可以给它加各种交互功能，如排序）。 2.2. GridView是什么？...添加可视化元素到GridView 要在GridView视图中添加可视化元素，如CheckBox和Button控件，需使用模板或样式。...ItemContainerStyle中的对齐问题 为了防止列标题和单元格之间的对齐问题，不要设置或指定影响ItemContainerStyle中项宽度的属性或模板。...滚动查看内容 若GridView的大小不足以显示所有项，用户可以使用ScrollViewer控件提供的滚动条水平或垂直滚动。若所有内容一开始都可见，滚动条将被隐藏。...通过单击列标题按钮与列交互 当用户单击列标题按钮时，如果你提供了排序算法，则可以对列中显示的数据进行排序。 你可以自定义标题按钮的Click事件，以便提供排序算法之类的功能。

    4.7K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券