npm package: @nerd-coder/cta-bar
Description: A web component written in Svelte
Latest version: 0.5.8

# CTA Bar

A web component written in Svelte

Desktop

![Screenshoot 01](./docs/ss01.png)

Mobile

![Screenshoot 02](./docs/ss02.png)

---

## How to Use

- Include script to web site
- Use custom element tag `cta-bar`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@nerd-coder/cta-bar/dist/main.js" async></script>
  </head>

  <body>
    <cta-bar></cta-bar>
  </body>
</html>
```

## Settings

Html attribute you can use to custom the component

| Property         | Default Value            | Description             |
| ---------------- | ------------------------ | ----------------------- |
| `phone`          | `'true'`                 | Show Phone icon         |
| `wechat`         | `'true'`                 | Show WeChat icon        |
| `whatsapp`       | `'true'`                 | Show WhatsApp icon      |
| `zalo`           | `'true'`                 | Show Zalo icon          |
| `label_phone`    | `'CALL US'`              | Label for phone icon    |
| `label_wechat`   | `'WE CHAT'`              | Label for WeChat icon   |
| `label_whatsapp` | `'WHATS APP'`            | Label for WhatsApp icon |
| `label_zalo`     | `'ZALO'`                 | Label for Zalo icon     |
| `link_phone`     | `'tel:+84999999999'`     | Phone link              |
| `link_wechat`    | `'https://wechat.com'`   | WeChat link             |
| `link_whatsapp`  | `'https://whatsapp.com'` | WhatsApp link           |
| `link_zalo`      | `'https://zalo.me'`      | Zalo link               |
| `order_phone`    | `'0'`                    | Phone order             |
| `order_wechat`   | `'0'`                    | WeChat order            |
| `order_whatsapp` | `'0'`                    | WhatsApp order          |
| `order_zalo`     | `'0'`                    | Zalo order              |

## Stylable

CSS Variables you can use to custom the component

| Variable Name     | Default Value                    |
| ----------------- | -------------------------------- |
| `--font`          | `'Open Sans', Arial, sans-serif` |
| `--color`         | `#ffffff`                        |
| `--colorT7`       | `#ffffffb3`                      |
| `--bgColor`       | `#1b2127`                        |
| `--bgColorT7`     | `#1b2127b3`                      |
| `--zIndex`        | `1000`                           |
| `--spacingBottom` | `0px`                            |
| `--spacingTop`    | `15vh`                           |
| `--spacingRight`  | `0px`                            |
| `--spacingLeft`   | `0px`                            |

## Change Icon

You can use component slot to change default icons, but must add the style rule (se example below) to allow the icon react to component state

```html
...
<style>
  /* 
  Due to Web Components limitation, must include this style if you want to use custom svg icon
  */
  cta-bar svg path {
    fill: var(--color);
  }
</style>

<cta-bar>
  <svg slot="phone" width="30" height="30" viewBox="0 0 172 172">
    <g fill="#000000">
      <path
        d="M30.96,10.32c-5.65719,0 -10.32,4.66281 -10.32,10.32v9.74219c-0.06719,0.37625 -0.06719,0.7525 0,1.11531v105.52469c-0.06719,0.37625 -0.06719,0.7525 0,1.11531v13.2225c0,5.65719 4.66281,10.32 10.32,10.32h68.8c5.65719,0 10.32,-4.66281 10.32,-10.32v-13.18219c0.06719,-0.37625 0.06719,-0.7525 0,-1.11531v-105.52469c0.06719,-0.37625 0.06719,-0.7525 0,-1.11531v-9.7825c0,-5.65719 -4.66281,-10.32 -10.32,-10.32zM30.96,17.2h68.8c1.90813,0 3.44,1.53188 3.44,3.44v6.88h-75.68v-6.88c0,-1.90812 1.53188,-3.44 3.44,-3.44zM27.52,34.4h75.68v99.76h-75.68zM139.79031,42.52969l-4.87781,4.87781c10.06469,9.1375 16.4475,22.23906 16.4475,36.8725c0,13.74656 -5.61687,26.20313 -14.64687,35.23313l4.82406,4.82406c10.29313,-10.26625 16.70281,-24.4025 16.70281,-40.05719c0,-16.52812 -7.14875,-31.36312 -18.44969,-41.75031zM125.19719,57.12281l-4.90469,4.90469c6.35594,5.34813 10.4275,13.31656 10.4275,22.2525c0,8.0625 -3.3325,15.31875 -8.62687,20.61313l4.86437,4.86437c6.54406,-6.53062 10.6425,-15.52031 10.6425,-25.4775c0,-10.83062 -4.82406,-20.5325 -12.40281,-27.15719zM27.52,141.04h75.68v10.32c0,1.90813 -1.53187,3.44 -3.44,3.44h-68.8c-1.90812,0 -3.44,-1.53187 -3.44,-3.44zM55.04,144.48c-1.23625,-0.01344 -2.39187,0.63156 -3.02344,1.70656c-0.61813,1.075 -0.61813,2.39187 0,3.46687c0.63156,1.075 1.78719,1.72 3.02344,1.70656h20.64c1.23625,0.01344 2.39188,-0.63156 3.02344,-1.70656c0.61813,-1.075 0.61813,-2.39187 0,-3.46687c-0.63156,-1.075 -1.78719,-1.72 -3.02344,-1.70656z"
      ></path>
    </g>
  </svg>
</cta-bar>
...
```

## License

MIT