个人中心
gpt4 book ai didi

dart - 如何在 Dart 组件中加入很棒的字体？

转载 作者：行者123 更新时间：2023-12-04 13:50:57 29 4
gpt4 key购买 nike

以下 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 应该设置为什么，模板中的样式应该是什么。

最佳答案

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

Font Awesome CSS 文件包含一个 @font-face 定义，该定义目前在 shadowDOM 中不起作用，至少在 Chrome 中( ref1 ， ref2 )。解决此问题的一种方法是将 @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>

在这种情况下，我引用了特定的 Font Awesome 图标， <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 中的一个字段类(class)，我已经设置 bool get applyAuthorStyles => true; .

关于dart - 如何在 Dart 组件中加入很棒的字体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20026280/

29 4 0
文章推荐： asp.net-mvc-4 - 防伪 token 和网络测试
文章推荐： qt - 动态添加数据到 QTableView
文章推荐： wpf - 将 UserControl 属性公开给 XAML
文章推荐： ember.js - 传递数组以链接到助手
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com