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
},
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>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>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 are licensed under the MIT license, see LICENSE for details.
Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com