Class TJSSlotLabel

Provides a slotted component wrapped in a label element. The label prop can either be a string or a Svelte configuration object to be used as the label text. The label element uses display: contents which ignores the label element and lays out the children as if the label element does not exist which is perfect for a grid layout. Optionally, there are CSS variables available to change the display and additional flex layout configuration possibilities.

CSS Variables

The following CSS variables control the associated styles with the default values:

For layout:
-----------------------------------------------------
--tjs-slot-label-display - contents
--tjs-slot-label-flex - unset
--tjs-slot-label-flex-direction - unset
--tjs-slot-label-flex-wrap - unset

For text / string label:
-----------------------------------------------------
--tjs-slot-label-color - inherit
--tjs-slot-label-font-family - inherit
--tjs-slot-label-font-size - inherit
--tjs-slot-label-line-height - inherit
--tjs-slot-label-text-align - right
--tjs-slot-label-white-space - nowrap
Copy