Operator screens and process graphics

Pipe <smart-pipe>

Pipe displays a section of process line on a mimic diagram.

<smart-pipe> · 5 properties, 0 methods, 0 events · source/modules/smart.pipe.js

Usage in Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.pipe.js';

<smart-pipe ref="pipe" :flowing="true"></smart-pipe>



// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-pipe :items.prop="items"></smart-pipe>

Properties

Binding	Type, default	Description
:elbow elbow	PipeElbow none	Sets or retrieves whether the segment turns a corner, and which way.
:flowing flowing	boolean false	Sets or retrieves whether the line is carrying flow. A flowing pipe animates a marching dash and takes the active colour. With reduced motion the dash stands still and chevrons show the direction.
:orientation orientation	PipeOrientation horizontal	Sets or retrieves the direction of the segment.
:reverse reverse	boolean false	Sets or retrieves whether the flow animation runs the other way, for a line that returns.
:thickness thickness	number 3	Sets or retrieves the stroke width of the line in pixels. The stroke does not scale with the segment, so a long run has the same weight as a short one. 1 to 64; a value that is not a number draws the default 3. The direction chevrons are sized from it.

Types

type PipeElbow

'none' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'

type PipeOrientation

'horizontal' | 'vertical'

CSS variables

The component declares 3 CSS variables; the CSS page shows how to set them.

--smart-pipe-color --smart-pipe-flow-color --smart-pipe-flow-duration