Attribute sticker

Statusstable
Published4.0.0

This document is a work in progress.

You can take a look, but nothing in here is set in stone.

As a value

Driver's license
Yes
<div class="jds-relative jds-bg-grey-100 jds-py-4 jds-rounded-t">
    <div class="jds-mx-auto" style="max-width: 250px;" >
        <jds-attribute-list-layout>
            <jds-attribute-sticker>
                <template>Driver's license</template>
                <template #value>Yes</template>
            </jds-attribute-sticker>
        </jds-attribute-list-layout>
    </div>
</div>

Identity mode

Driver's license
Yes / No
<div class="jds-relative jds-bg-grey-100 jds-py-4 jds-rounded-t">
    <div class="jds-mx-auto" style="max-width: 250px;" >
        <jds-attribute-list-layout>
            <jds-attribute-sticker identity>
                <template>Driver's license</template>
                <template #value>Yes / No</template>
            </jds-attribute-sticker>
        </jds-attribute-list-layout>
    </div>
</div>

Rich Dropdown

<div>
</div>

Multi-input

If you're letting users pick from some attributes, such as in the job setup wizard, you can use the multi-input field.

Required Attributes

Candidates that fulfill all of these requirements will instantly be scored an "A+", and if they fulfill some, they earn a "A". Otherwise, they'll get a "B".

Driver's license
Yes
Pilot license
Yes
Dentist license
Yes
Banana harvesting permit
Yes
<jds-attribute-field>
    <template #label>Required Attributes</template>
    <template #hint>Candidates that fulfill all of these requirements will
        instantly be scored an "A+", and if they fulfill some, they earn a
        "A". Otherwise, they'll get a "B".</template>
    <template #default>
        <jds-attribute-sticker allow-delete @delete="logDelete">
            <template>Driver's license</template>
            <template #value>Yes</template>
        </jds-attribute-sticker>
        <jds-attribute-sticker allow-delete @delete="logDelete">
            <template>Pilot license</template>
            <template #value>Yes</template>
        </jds-attribute-sticker>
        <jds-attribute-sticker allow-delete @delete="logDelete">
            <template>Dentist license</template>
            <template #value>Yes</template>
        </jds-attribute-sticker>
        <jds-attribute-sticker allow-delete @delete="logDelete">
            <template>Banana harvesting permit</template>
            <template #value>Yes</template>
        </jds-attribute-sticker>
    </template>
</jds-attribute-field>

JdsAttributeSticker

Props

PropValueDefault
valuestring (Empty string)
identityboolean false
allowDeleteboolean false
typebooleanscale 'boolean'

Events

EventPayload
click
delete

Slots

Slot
default
value

Changelog

JOBILLA DESIGN SYSTEM