bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 180 forks source link

Documentation on color handling is incorrect #572

Closed amyipdev closed 7 months ago

amyipdev commented 10 months ago

Seen first at https://sveltestrap.js.org/?path=/story/components-button--button

For setting buttons, for example - you can't just put the color name, it has to be color=colorname, such as:

<div>
    <Button outline color=danger>Test example bootstrap button</Button>
</div>
dysfunc commented 7 months ago

Hey @amyipdev 👋🏻 Thanks for submitting an issue!

The example uses shorthand, so it's actually assigning the color that is currently being processed by the each block.

Example:

<script lang="ts">
  import { Button } from 'sveltestrap';
  const colors: any = [
    'primary',
    'secondary',
    'success',
    'danger',
    'warning',
    'info',
    'light',
    'dark'
  ];
</script>

{#each colors as color}
  <div>
    <Button {color}>{color}</Button>
  </div>
{/each}

This

 <Button {color}>{color}</Button>

is the same as

<Button color={color}>{color}</Button>

Which renders as

<Button color="primary">primary</Button>