小编ddu*_*upp的帖子

我想NextButton使用webpack 直接在我的组件中渲染一个材质设计图标.这是我的代码的相关部分:

var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg');

var NextButton = React.createClass({
  render: function() {
    return (
      <Link to={this.props.target} className='button--next'>
        {this.props.label} {NextIcon}
      </Link>
    )
  }
});

但这不符合我的想法.它似乎将svg输出为字符串,而不是元素.

我已经尝试使用raw-loader,img-loader,url-loader,file-loader和svg-loader,但我不能找到正确的方式来做到这一点.

我正在开发一个包含一个带有文本输入的表单的应用程序ng-model="description".现在我想用ng-maxlength="50"和验证这个文本输入required.这很好用,但我也想添加一个67/50始终显示的字符计数器(如).我正在使用以下代码来显示计数器:{{description.length || 0}}/50

但是,这个问题是description.length当它大于50时不返回值,因为description输入无效.在我的场景中,计数器将默认为0/50没有输入时(这很好),但是当输入超过最大长度时.

当输入长度无效时,我还想以红色显示我的计数器,但使用角度验证css类不应该太难.

当然我可以提供自定义验证,但我很肯定有一个更简单的解决方案.

我正在尝试创建一个菜单,在选中/取消选中复选框时切换.我创建了以下html结构:

<header>
  <div>
    <label for="navmenu"><span class="icon-menu"></span></label>
    <input type="checkbox" id="navmenu">
    <nav>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
  </div>
</header>

该<span>元素包含来自图标字体的图标,通过css.

这是我写的css:

header {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 1.25em;
  letter-spacing: 1px;
  line-height: 2em;
  background: #299a97;
  color: white; }
header h1 {
  font-size: 1em;
  font-weight: normal; }
header div {
  width: 2em;
  position: fixed;
  top: 0;
  left: 0; }
header div input[type=checkbox] {
  position: absolute;
  top: 1em;
  left: 1em;
  opacity: 0; }

nav {
  width: 100%;
  position: fixed; …