TA-Foodtrucks - Change the default configuration

TA-Foodtrucks uses a default configuration which you can overwrite easily. To explain more about each value I added some helpful comments.
default: {
    endpoint: '', // The Craftplaces API endpoint
    minHeight: '', // If you want to define the minimum height of the component
    duration: 1000, // Duration of the animation to hide the loading
    today: 'Today', // Relative date for today
    tomorrow: 'Tomorrow', // Relative date for tomorrow
    locale: 'de-DE', // Locale information like "en-US", "zh-CN", "ja-JP, ...
    seperator: ' - ', // Default seperator string between start and end time
    suffix: '', // If you want to have somethink like o'clock at the end
},

Overwrite with data attribute

The easiest way to update the default configuration is with HTML data attributes.

<div
    class="ta-foodtrucks"
    x-data="taFoodtrucks()"
    x-init="init()"
    x-cloak
    data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
    data-locale="de-DE"
    data-min-height="10rem"
    data-duration="1000"
    data-today="Today"
    data-tomorrow="Tomorrow"
    data-seperator=" - "
    data-suffix=""
>
    <!-- CONTENT -->
</div>

Overwrite as object

Another way to overwrite the default configuration is through the init function. Just hand over your changes as an object. There is no need to define the whole configuration, just add the changes you want to have.

<div
    class="ta-foodtrucks"
    x-data="taFoodtrucks()"
    x-init="init({
        endpoint: 'https://api.craftplaces.com/api/v1/dip/location/twodays',
        locale: 'de-DE',
        minHeight: '10rem',
        duration: 1000,
        today: 'Today',
        tomorrow: 'Tomorrow',
        seperator: ' - ',
        suffix: '',
    })"
    x-cloak
>
    <!-- CONTENT -->
</div>

Define the minimum height for loading

You can define the minimum height very easily by adding a value to the configuration. Alternatively you can define a minimum height for TA-Foodtrucks by using a Tailwind CSS utility like min-h-64 or define your own class and set min-height: 20rem to the value you want.

You can learn more about the minimum height utilities of Tailwind CSS in the documentation .

TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

Copyright © 2019-2021 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy