Mask
🌏 Translated with the assistance of DeepSeek and ChatGPT
Used to overlay something, indicating that it is waiting or that there is a higher-priority matter.
Basic Usage
The component is absolutely positioned. You can control the grid spacing and line size via the step
and lineWidth
properties.
The man-month as a unit for measuring the size of a job is a dangerous and deceptive myth. It implies that men and months are interchangeable. This is only true when a task can be partitioned among many workers with no communication among them. This is true of reaping wheat or picking cotton; it is not even approximately true of systems programming. When a task cannot be partitioned because of sequential constraints, the application of more effort has no effect on the schedule. The bearing of a child takes nine months, no matter how many women are assigned. Many software tasks have this characteristic because of debugging and testing constraints. The second fallacy is that progress is proportional to the number of people. Yet, adding people to a late software project makes it later, due to training and communication overhead.
<template>
<div style="position: relative">
The man-month as a unit for measuring the size of a job is a dangerous and deceptive myth.
It implies that men and months are interchangeable. This is only true when a task can be
partitioned among many workers with no communication among them. This is true of reaping
wheat or picking cotton; it is not even approximately true of systems programming. When a
task cannot be partitioned because of sequential constraints, the application of more effort
has no effect on the schedule. The bearing of a child takes nine months, no matter how many
women are assigned. Many software tasks have this characteristic because of debugging and
testing constraints. The second fallacy is that progress is proportional to the number of
people. Yet, adding people to a late software project makes it later, due to training and
communication overhead.
<px-mask :step="1" :line-width="2"></px-mask>
</div>
</template>
Background Color
Control the mask color through the color
property.
The programming project is a tar pit. No matter how carefully one plans, no matter how carefully one designs, no matter how carefully one codes, the project seems inevitably to slip. The schedule stretches, the budget expands, the team grows, and still the end recedes. The tar pit is not merely a matter of poor management or inadequate tools; it is inherent in the nature of software itself. Software is invisible, unvisualizable, and therefore unmanageable. It is complex, with innumerable states and paths, each a potential source of error. It is changeable, subject to whims of users and marketers. And it is unforgiving; a single misplaced comma can bring the whole system crashing down. Thus the programmer, like the prehistoric beast, struggles deeper into the tar with every movement.
<template>
<div style="position: relative">
The programming project is a tar pit. No matter how carefully one plans, no matter how
carefully one designs, no matter how carefully one codes, the project seems inevitably to
slip. The schedule stretches, the budget expands, the team grows, and still the end recedes.
The tar pit is not merely a matter of poor management or inadequate tools; it is inherent in
the nature of software itself. Software is invisible, unvisualizable, and therefore
unmanageable. It is complex, with innumerable states and paths, each a potential source of
error. It is changeable, subject to whims of users and marketers. And it is unforgiving; a
single misplaced comma can bring the whole system crashing down. Thus the programmer, like
the prehistoric beast, struggles deeper into the tar with every movement.
<px-mask color="#A4A4A47F"></px-mask>
</div>
</template>
Solid Background
Set grid
to false
to display a solid color background.
There is no single development, in either technology or management technique, which by itself promises even one order-of-magnitude improvement in productivity, in reliability, in simplicity. We cannot expect ever to see two programmers producing ten times as much useful software as two others. The hard part of building software is the specification, the design, and the testing of the conceptual construct, not the labor of coding or testing. This is the essence of the 'No Silver Bullet' argument. The complexity, conformity, changeability, and invisibility of software make it inherently difficult to build. We can make incremental improvements, but there will be no magical breakthrough that makes software development easy. The difficulties are fundamental, not incidental.
<template>
<div style="position: relative">
There is no single development, in either technology or management technique, which by
itself promises even one order-of-magnitude improvement in productivity, in reliability, in
simplicity. We cannot expect ever to see two programmers producing ten times as much useful
software as two others. The hard part of building software is the specification, the design,
and the testing of the conceptual construct, not the labor of coding or testing. This is the
essence of the 'No Silver Bullet' argument. The complexity, conformity, changeability, and
invisibility of software make it inherently difficult to build. We can make incremental
improvements, but there will be no magical breakthrough that makes software development
easy. The difficulties are fundamental, not incidental.
<px-mask :grid="false"></px-mask>
</div>
</template>
API
MaskProps
Attribute | Type | Optional | Default | Description | Version |
---|---|---|---|---|---|
color | string | True |
| Mask color. | 0.0.2 |
step | number | True | 1 | Grid spacing. | 0.0.2 |
lineWidth | number | True | 2 | Line size. | 0.0.2 |
grid | boolean | True | true | Whether the background is a grid. | 0.0.2 |
zIndex | number | True | 20 | The z-index of the mask. | 0.0.2 |