jointjs/docs/src/joint/api/shapes/standard/HeaderedRectangle.html

JavaScript diagramming library

<p>A rectangle with header.</p>

<b>Supported <code>attrs</code> properties</b></p>

<table>
    <tr>
        <th>Selector</th>
        <th>Node</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>root</td>
        <td><i>SVGGElement</i></td>
        <td>Container of all nodes</td>
    </tr>
    <tr>
        <td>body</td>
        <td><i>SVGRectElement</i></td>
        <td>Rectangular body of the shape</td>
    </tr>
    <tr>
        <td>header</td>
        <td><i>SVGRectElement</i></td>
        <td>Rectangular header of the shape</td>
    </tr>
    <tr>
        <td>headerText</td>
        <td><i>SVGTextElement</i></td>
        <td>Text inside the header</td>
    </tr>
    <tr>
        <td>bodyText</td>
        <td><i>SVGTextElement</i></td>
        <td>Text inside the body</td>
    </tr>
</table>

<pre><code>var headeredRectangle = new joint.shapes.standard.HeaderedRectangle();
headeredRectangle.resize(150, 100);
headeredRectangle.position(25, 610);
headeredRectangle.attr('root/title', 'joint.shapes.standard.HeaderedRectangle');
headeredRectangle.attr('header/fill', 'lightgray');
headeredRectangle.attr('headerText/text', 'Header');
headeredRectangle.attr('bodyText/text', 'Headered\nRectangle');
headeredRectangle.addTo(graph);</code></pre>