- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
有没有人使用 react.js 构建网页?和 Material UI图书馆?我应该如何调整图标大小?它是一个 svg 图标。我刚刚构建了一个“新建”组件,它是一张 Material 纸,上面有一个内容添加按钮。这是代码。
import React from 'react';
import Paper from 'material-ui/lib/paper';
import ContentAdd from 'material-ui/lib/svg-icons/content/add';
import IconButton from 'material-ui/lib/icon-button';
const styleForPaper = {
width: '96vw',
height: '20vh',
margin: 20,
textAlign: 'center',
display: 'inline-block',
};
const styleForButton = {
'marginTop': '7vh',
};
const PaperToAddNewWidgets = () => (
<div>
<Paper style={styleForPaper} zDepth={2}>
<IconButton
style={styleForButton}
touch={true}
tooltip="Add New Widget">
<ContentAdd/>
</IconButton>
</Paper>
</div>
);
export default PaperToAddNewWidgets;
它看起来不错(确保您以全尺寸查看它),但图标太小了。然后我打开chrome dev工具,看到了下面的html代码。
<div style="background-color:#ffffff;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;box-sizing:border-box;font-family:Roboto, sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0 3px 10px rgba(0,0,0,0.16),
0 3px 10px rgba(0,0,0,0.23);border-radius:2px;width:96vw;height:20vh;margin:20px;text-align:center;display:inline-block;mui-prepared:;" data-reactid=".0.2.0.1.0"><button style="border:10px;background:none;box-sizing:border-box;display:inline-block;font:inherit;font-family:Roboto, sans-serif;tap-highlight-color:rgba(0, 0, 0, 0);cursor:pointer;text-decoration:none;outline:none;transform:translate3d(0, 0, 0);position:relative;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;padding:12px;width:48px;height:48px;font-size:0;margin-top:7vh;mui-prepared:;-webkit-appearance:button;" tabindex="0" type="button" data-reactid=".0.2.0.1.0.0"><div data-reactid=".0.2.0.1.0.0.0"><span style="height:100%;width:100%;position:absolute;top:0;left:0;overflow:hidden;mui-prepared:;" data-reactid=".0.2.0.1.0.0.0.0"></span><div style="position: absolute; font-family: Roboto, sans-serif; font-size: 14px; line-height: 32px; padding: 0px 16px; z-index: 3000; color: rgb(255, 255, 255); overflow: hidden; top: -10000px; border-radius: 2px; opacity: 0; left: -44px; transition: top 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; -webkit-user-select: none;" data-reactid=".0.2.0.1.0.0.0.1:0"><div style="position: absolute; left: 50%; top: 0px; transform: translate(-50%, -50%); border-radius: 50%; transition: width 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, height 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, backgroundColor 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 0px; height: 0px; background-color: transparent;" data-reactid=".0.2.0.1.0.0.0.1:0.0"></div><span style="position:relative;white-space:nowrap;mui-prepared:;" data-reactid=".0.2.0.1.0.0.0.1:0.1">Add New Widget</span></div><svg style="display:inline-block;height:24px;width:24px;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;fill:rgba(0, 0, 0, 0.87);mui-prepared:;-webkit-user-select:none;" viewBox="0 0 24 24" data-reactid=".0.2.0.1.0.0.0.1:2:$/=10"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" data-reactid=".0.2.0.1.0.0.0.1:2:$/=10.0"></path></svg></div></button></div>
使用chrome dev tool,我修改了svg的图标大小和svg的viewbox属性,使图标在浏览器中变大。但我不确定如何在我的代码中调整图标大小。如果我编写一个 CSS 文件来修改 svg,那么如果有多个 svg 元素,就会出现问题。
最佳答案
这样做
<SomeIcon className="svg_icons"/>
.svg_icons {
transform: scale(1.8);
}
只需使用比例 :D 就可以了
关于css - 如何放大material-ui iconButtons中的SVG图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36482126/
我正在开发这样的摄影应用程序: https://play.google.com/store/apps/details?id=com.photo.editor.collage.maker.photobl
我正在尝试创建一个可以像在 Excel 中一样放大和缩小的 QTableView。 此处提出了类似的问题:Zooming function on a QWidget 但是,我在 PyQt 而不是 C
我想找到放大/缩小 TVirtualStringTree 的“最佳方法”。 “放大”的意思是模仿放大镜。 必须通过优先使用 TVirtualStringTree 控件中专门用于此目的的属性/方法来理解
有没有办法在emacs上放大和缩小(动态改变字体大小,相当流畅)? 最佳答案 尝试 C-x C-+ 和 C-x C--;即 Control-x Control-减号/Control-再加上。 在一个组
我在使用 Leaflet 时遇到问题。我在 map 上找到了一堆标记(在我的例子中它代表高尔夫球场)。但是,当我放大/缩小时,标记在 map 上移动。 浏览网页后,解决方案似乎是 iconAnchor
我在使用 Leaflet 时遇到问题。我在 map 上找到了一堆标记(在我的例子中它代表高尔夫球场)。但是,当我放大/缩小时,标记在 map 上移动。 浏览网页后,解决方案似乎是 iconAnchor
我正在开发一款非常低分辨率的游戏,我需要放大它才能看到。我知道我可以使用 Graphics.scale(float x, float y) 但我想放大到中心。如何缩放中心的图形?有没有更简单的方法来制
我有这种方法可以向前/向后和向左/向右平移相机。我不确定为什么,但是是什么导致相机在靠近地形放大时移动得很好,但在缩小时移动得非常慢? 这是我平移相机的方式: void CameraPan(){
我正在尝试像这样进行缩放:zoom the imageview on the double click in viewflipper in android 我尝试将该代码改编为我的项目,但它不起作用.
$(window).height() 获取页面加载时窗口的高度。但是,在放大/缩小时,我想要新的视点高度。这可能吗? 它可以很好地调整普通浏览器的大小,但我想在移动设备上放大/缩小不会触发 $(win
我正在尝试制作一个显示图像、 block 文本和按钮的面板,与下一个模型上显示的面板保持相似的比率,无论页面大小/缩放比例是多少。 我首先尝试使用横写文本的图像(即不对文本、图像和背景使用不同的部分或
Blockquote 大家好,请问是否可以在此代码中添加放大、缩小功能?我对 html 很陌生。任何帮助将不胜感激。 Career Center
我有一个由 3 个元素组成的搜索栏。 首先 a 保存从下拉列表中选择的值。 第二个清除选择的元素 第三个供用户在下拉菜单之间切换。 我的问题 - 当我缩放超过 100% 时,img 和按钮元素变大了一
我目前遇到网站页脚的问题。 当以 100% 大小(正常大小)处理时,页脚对齐得很好。但是,当我调整它的大小时,它完全不对齐并位于左侧,它需要保持居中。 屏幕截图: 相关 CSS: /* Dark bl
我实现了 3 个按钮来允许用户放大、缩小和返回到默认大小。 脚本可以进行放大和缩小,但我还有 2 个问题无法解决。 第一个问题: 每次放大时,要缩放的图像仍然到达我的窗口的限制,当图像左右没有任何空间
即使我在网页上放大或缩小,我也试图让 shadowbox 保持在同一个地方。我尝试以百分比而不是像素为单位来制作尺寸,但我不知道应该使用哪种属性组合。 这是我想要实现的结果:来自这里的外部阴影框效果h
我有点困惑。我按照 Apple 的建议放大 ScrollView ,但没有任何反应。 代码: import UIKit import SpriteKit class ScrollViewControl
我正在尝试通过导航实现类似 Bootstrap 的 header ,但我刚刚发现当我缩小窗口时, header 内的内容变得困惑并且 header 也最小化而不是保持相同的大小。我已经在页眉上使用了
我正在开发一个包含许多 UIView 的 iOS 应用程序。 UINavigation 用于在这些 View 之间导航。 我的一个 UIView 包含 UITextField。我的问题是,当我缩放时,
我正在尝试从 FITS 文件中绘制一些数据,我想知道是否有人知道如何关注绘图轴的某些区域?下面是一些示例代码: import pyfits from matplotlib import pyplot
我是一名优秀的程序员,十分优秀!