6

以下 html 在文本左侧显示了一个漂亮的相机图标。在尝试设计聚合物组件的样式时,这是如何实现的?

<!doctype html>
<html>
<head>
   <link rel="stylesheet" id="font-awesome-4-css" href="http://astronautweb.co/wp-content/themes/astro2012/css/font-awesome-4.0.3.css?ver=4.0.3" type="text/css" media="all">
</head>
<body>
  <p><i class="fa fa-camera-retro fa-lg"></i> Cool camera</p>
</body>

具体来说,链接应该包含在哪里,applyauthorstyles 应该设置为什么,模板中的样式应该是什么。

4

4 回答 4

6

编辑:CSS变量的解决方法:

字体真棒 CSS 文件包含一个 @font-face 定义,目前在 shadowDOM 中不起作用,至少在 Chrome 中(ref1ref2)。解决此问题的一种方法是将 @font-face 定义从 fa CSS 文件中移出,并将其放置为全局样式标记。例如:

<html>
  <head>
    <style>
      @font-face {
        font-family: 'FontAwesome';
        src: url('font-awesome-4.0.3/fonts/fontawesome-webfont.eot?v=4.0.3');
        src: url('font-awesome-4.0.3/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('font-awesome-4.0.3/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('font-awesome-4.0.3/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('font-awesome-4.0.3/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
        font-weight: normal;
        font-style: normal;
      }
    </style>
    <script type='application/dart'>export 'package:polymer/init.dart';</script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

然后,您可以在自定义聚合物元素内部引用已编辑 fa CSS 文件的本地副本,而无需applyAuthorStyles像这样使用:

<polymer-element name="dropdown-menu-element">
  <template>
    <link rel="stylesheet" href="../font-awesome-4.0.3/css/font-awesome.css">

确保您已将整个 fa 目录下载到您的项目中。fa 图标现在可以在您的聚合物元素中使用。

使用 applyAuthorStyles 的原始答案:

我只是在 index.html 文件的 head 部分中包含了 font awesome 的路径:

<head>
    <title>Working with Polymer</title>
    <link rel="stylesheet" href="css/font-awesome-4.0.0/css/font-awesome.min.css">
    <link rel="import" href="elements/navbar_element.html">
    <script type='application/dart'> export 'package:polymer/init.dart'; </script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>
</head>

然后在我的navbar_element.html文件中,我只是按照通常的方式引用图标:

<polymer-element name="navbar-element">
  <template>
    <style>
      /* other styles here */
      }
    </style>
    <div>
      <div class="st-container">
        <nav class="st-nav">
          <template repeat="{{item in menu}}" >
            <a id={{item.id}} href="#" class={{item.arrowClass}} on-click="{{menuHandler}}">
              <span class="menuName">{{item.text}}&nbsp;</span>
              <i class={{item.icon}}></i>
            </a>
          </template>
          <div class="arrow_box"></div>
        </nav>
      </div>
    </div>
  </template>
  <script type="application/dart" src="navbar_element.dart"></script>
</polymer-element>

在这种情况下,我<i class={{item.icon}}></i>在我的 navbar_element.dart 文件中使用如下可观察列表引用特定的字体真棒图标:

final ObservableList<Item> menu =
      toObservable([
                    new Item('Fourier', 'fourier', 'fa fa fa-sort-amount-desc fa-rotate-270', false),
                    new Item('Sequences', 'sequence', 'fa fa-tasks', false),
                    new Item('Convolution', 'convolution', 'fa fa-asterisk', true),
                    new Item('Deconvolution', 'deconvolution', 'fa fa-headphones fa-rotate-90', false),
                    new Item('Filters', 'filter', 'fa fa-filter', false)
                    ]);

icon字段只是Item类中的一个字段,我已经设置了bool get applyAuthorStyles => true;.

于 2013-11-19T02:21:33.867 回答
4

编辑

applyAuthorStyles已弃用或已删除。

我自己还没有尝试过,但是如果将字体很棒的样式添加到组件中,它应该可以工作。这很麻烦,因为需要将样式添加到使用 FA 的每个组件中。

Pixelate 使用带有这些变量的 SASS:https ://github.com/donny-dont/Pixelate-Flat/blob/master/lib/stylesheets/fonts/_variables.scss 我还没有使用 SASS,所以我不能提供更多细节。

另一种解决方案是* /deep/在每个选择器前面添加。

您可以使用此代码构建执行此操作的脚本:

import 'package:csslib/parser.dart';
import 'package:csslib/visitor.dart';

String transform(String src){
  var printer = new ShadowDOMTransformPrinter();
  printer.visitTree(parse(src), pretty: true);
  return printer.toString();
}

class ShadowDOMTransformPrinter extends CssPrinter {
  void visitSelector(Selector selector){
    emit(' * /deep/ ');
    super.visitSelector(selector);
  }
}

这个修改后的 CSS 在 shadowDOM 之外不起作用,因此需要修改和未修改的样式(每个选择器一次有,一次没有/deep/

另见这个讨论这个

--------

如果您 bool get applyAuthorStyles => true; 在自定义元素中需要的页面上有样式表引用。

如上所述,在自定义元素中引用样式表存在错误。该错误已修复,但包含该修复的 Dart 版本尚未发布。

同时,您可以将样式表的内容复制到自定义元素内的样式标记中<template>。在这种情况下,您不需要applyAuthorStyles.

于 2013-11-23T20:40:08.413 回答
1

看来这个包正在做这个 http://pub.dartlang.org/packages/fontawesome_elements

我发布了包bwu_fontawesome_iconset_svg使 FontAwesome 图标与核心元素和纸张元素兼容

于 2014-07-09T13:30:24.150 回答
0

这里有一个关于聚合物元素造型的指南,可能会有所帮助:

http://www.polymer-project.org/articles/styling-elements.html

基本上它说您应该在模板中使用 :host 。

于 2013-11-17T10:41:28.053 回答