Question

我有类似的代码

<div class="row">
  <div class="col-sm-12 visible-print">
    Stuff (print in full width)
  </div>
  <div class="col-sm-6 hidden-print">
    Stuff (same as above but only half width for screen)
  </div>
  <div class="col-sm-6 hidden-print">
    Other stuff (I don't want to print)
  </div>
</div>

我正在寻找的是一个函数，如果可见打印返回true，如果隐藏打印返回false以便我编写。该示例中的代码应视为伪代码

<div class="row">
  <div class="{{inPrintMode() ? 'col-sm-12' : 'col-sm-6'}}">
    Stuff (full width for paper, half for screen)
  </div>
  <div class="col-sm-6 hidden-print">
    Other stuff (i don't want to print)
  </div>
</div>

这种功能是否存在？我使用bootstrap和Angular

说明：当页面打印在纸上时，如何以一种方式为页面/显示器/显示器设置页面样式。我将class =“ visible-print”用于仅应出现在纸上的元素，将class =“ hidden-print”用于仅应出现在屏幕上的元素。没有这些标签的元素会同时出现在纸张和屏幕上。

我正在寻找如何编写函数，在此示例中，我称为“ inPrintMode（）”，该函数检测用户是在屏幕上查看页面还是正在渲染页面以进行打印并返回一个布尔值。

在这里讨论

visible-print和hidden-print： Hide a div in a page and make it visible only on print bootstrap 3 MVC 5

在此先感谢您的帮助。

Answer 1

当然有[ngClass]，您可以这样使用它：

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import image1 from "../public/parallax2.jpg";
import image2 from "../public/architecture-bridge-city-161853.jpg";

class Sidenav extends Component {
  componentDidMount() {
    const options = {
      inDuration: 250,
      outDuration: 200,
      draggable: true
    };

    M.Sidenav.init(this.Sidenav);

    let instance = M.Sidenav.getInstance(this.Sidenav);
    instance.open();
    console.log(instance.isOpen);
  }
  render() {
    return (
      <>
        <ul
          ref={Sidenav => {
            this.Sidenav = Sidenav;
          }}
          id="slide-out"
          className="sidenav"
        >
          <li>
            <div className="user-view">
              <div className="background">
                <img src={image2} />
              </div>
              <a href="#user">
                <img className="circle" src={image1} />
              </a>
              <a href="#name">
                <span className="white-text name">John Doe</span>
              </a>
              <a href="#email">
                <span className="white-text email">jdandturk@gmail.com</span>
              </a>
            </div>
          </li>
          <li>
            <a href="#!">
              <i className="material-icons">cloud</i>First Link With Icon
            </a>
          </li>
          <li>
            <a href="#!">Second Link</a>
          </li>
          <li>
            <div className="divider" />
          </li>
          <li>
            <a className="subheader">Subheader</a>
          </li>
          <li>
            <a className="waves-effect" href="#!">
              Third Link With Waves
            </a>
          </li>
        </ul>
        <a href="#!" data-target="slide-out" className="sidenav-trigger">
          <i className="material-icons">menu</i>
        </a>
      </>
    );
  }
}

export default Sidenav;

这是您推荐的Working Sample StackBlitz。

Answer 2

[ngClass]适合您的情况

<div class="row">
  <div [ngClass]="inPrintMode() == true ? 'col-sm-12' : 'col-sm-6'">
    Stuff (full width for paper, half for screen)
  </div>
  <div [ngClass]="col-sm-6 hidden-print">
    Other stuff (i don't want to print)
  </div>
</div>

Answer 3

尝试使用[ngClass]（使用正确的语法）：

<div class="row">
  <div class="col-sm-12 visible-print" [ngClass]="{ 'visible-print': inPrintMode(), 'hidden-print': !inPrintMode() }">
    Stuff
  </div>
  <div class="col-sm-6 hidden-print">
    Other stuff (I don't want to print)
  </div>
</div>

检查Angular中的“模式”可见打印还是隐藏打印

3 个答案: