@nerd-coder/cta-bar
Advanced tools
Readme
A web component written in Svelte
Desktop
Mobile
cta-bar<!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>
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 |
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 |
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
...
<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>
...
MIT
FAQs
A web component written in Svelte
We found that @nerd-coder/cta-bar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.