Skip to content

Passing css classes through to components #60

@tnorthcutt

Description

@tnorthcutt

It seems like it would be really handy to be able to pass CSS classes through to components. E.g. in nova-settings-tool.php being able to do this:

[
    'key' => 'setting_1',
    'label' => 'Custom delay setting',
    'type' => 'select',
    'options' => [
        '0' => 'No Delay',
        '7' => '1 Week',
        '14' => '2 Weeks',
        '21' => '3 Weeks',
        '28' => '4 Weeks',
    ],
    'classes' => ['form-input', 'whatever-other-classes'],
    'panel' => 'Customers',
];

And then in SelectSetting.vue (for this example) having (note the :class line added):

<select
    :id="setting.key"
    :value="setting.value"
    @change="
        $emit('update', {
            key: setting.key,
            value: $event.target.value,
        })
    "
    class="w-full block form-control form-select form-select-bordered"
    :class="setting.classes"
>
    <option value="" selected>{{ setting.placeholder || __('Choose an option') }}</option>
    <option v-for="(label, option) in setting.options" :key="option" :value="option">
        {{ __(label) }}
    </option>
</select>

But, maybe there's a reason for not doing this that I haven't thought of. Is this something you'd be open to adding support for?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions