Spacing directives

import { TgMarginDirective, TgPaddingDirective } from '@trademe/tangram';

Spacing directives are used when it isn’t possible to add custom spacing to component stylesheets.

Improve performance in templates Reduce code bloat by using component stylesheets to add custom spacing where possible.

<div
    tgPaddingBottom
    tgPaddingBottomSize="unit"
    tgMarginRight
    tgMarginRightSize="base">
    <tg-icon name="heart"></tg-icon>
</div>

Set the appropriate directive and direction, followed by the amount (e.g. tgPaddingSize="base" or tgMarginBottomSize="none")

Multiple spacing settings can be applied by using the generic directive before the sizes (e.g. tgPadding="none", tgPaddingTopSize=”medium”)