Question

我正在尝试通过简单的消息对话框开始学习如何使用Google的Polymer 1.0组件。出现对话框，但它没有我在Google的Polymer演示中看到的样式，所以我试图在对话框中添加样式以匹配我在Google演示中看到的样式：

<html>
<head>
    <script src="scripts/polymer/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="scripts/polymer/paper-dialog/paper-dialog.html">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

    <style type="text/css">
        paper-dialog {
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            margin: 0;
            padding: 24px;
        }
    </style>
</head>
<body>

<paper-dialog opened="true">Dialog test</paper-dialog>

</body>
</html>

填充值工作正常，但字体系列和字体大小被忽略。我知道正在下载字体，因为在对话框出现之前，使用Roboto字体在页面顶部短暂显示“测试对话框”文本。控制台中没有错误。

让对话框接受我想要的风格的正确方法是什么？请注意，我可以使用所需字体设置div来包装对话框内容，但我怀疑这是在Polymer中执行此操作的正确方法。

Answer 1

您可能需要导入paper-styles-classes.html

根据您的示例，尝试添加

<link rel="import" href="scripts/polymer/paper-styles/paper-styles-classes.html">

或寻找类似的文件。

Answer 2

您可以添加<link rel="import" href="scripts/polymer/paper-styles/typography.html">以获取聚合物项目中的默认排版和字体，而不是像您在问题中那样明确指定字体为Roboto。

Answer 3

<Paper-dialog>没有文字样式属性。默认字体系列设置为Roboto。您可以在此处https://elements.polymer-project.org/elements/paper-dialog-behavior?active=Polymer.PaperDialogBehavior

查看更多内容

我建议您使用自定义类创建一个<div>容器。我在code.io here中尝试了类似的输出，因此您可以看到自定义样式的工作原理。

希望有所帮助。

如何更改Polymer Paper组件的字体

3 个答案: