0.0.7 • Published 2 years ago
dsl-webcomponent v0.0.7
DSL WEB COMPONENT
Feature
- Svetle
- Vite
- Typescript
- TailwindCSS CDN
- Web Component
Install dsl-webcomponent
pnpm i dsl-webcomponentuse by unpkg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dsl Web Component</title>
<script src="https://cdn.tailwindcss.com"></script>
<script type="module" src="https://unpkg.com/dsl-webcomponent@0.0.1/dist/esm/index.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<style>
:root {
--color: rgb(250, 250, 250);
--padding:0.5em;
--margin: 0.25em;
--background-color: rgb(0, 214, 46);
--font-size: 2rem;
--border: 2px;
--border-rabius: 60px;
--border-focus: 3px;
--background-color-active: rgba(255, 0, 0, 0.699);
--background-color-hover: rgb(3, 117, 32);
}
</style>
</head>
<body>
<div>
<s-button label="custom css properties" style="--padding: 6px; --color:blue;">
</s-button>
</div>
<div>
<s-button label="custom props" padding="6px" fontsize="20px" color="red">
</s-button>
</div>
<div>
<s-button>
<div slot="content" class="bg-blue-300 rounded-2xl p-3 w-48 hover:bg-red-600 hover:text-white">
<i class="fa fa-user"></i> TEXT
</div>
</s-button>
</div>
<div>
<s-button label="Button With Icon Right" icon="far fa-chevron-down" position="right" />
</div>
<div>
<s-button label="Button With Icon Right" icon="far fa-cloud-download"
style="--background-color: #62A420; --padding: 12px;" />
</div>
<div>
<s-button label="ACTION RED" icon="far fa-chevron-down" position="right"
style="--background-color: #E62700; --padding: 12px;" />
</div>
<div>
<s-button label="Button With Icon Right" icon="far fa-cloud-download" position="left"
style="--background-color: #CCCCCC; --padding: 12px; --color: black;" />
</div>
<div>
<s-button label="Button With Icon Right" icon="far fa-cloud-download" position="left" />
</div>
<!-- Modal -->
<div>
<dsl-modal>
<div class="logo">
<dsl-logo class="w-5" />
</div>
<h2 class="text-3xl my-4">
ขออภัยในความไม่สะดวก
</h2>
<div class="text-xl my-4">
ในวันเสาร์ที่ 12 กุมภาพันธ์ 2565 <br />
เวลา 5:00 น. ถึงเวลา 20:00 น.
</div>
<h2 class="text-3xl my-4">
แจ้งปิดปรับปรุง <br />
ระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา (DSL) ชั่วคราว
</h2>
<div class="text-xl">
เพื่อเพิ่มประสิทธิภาพการให้บริการ กองทุนจะทำการปิดปรับปรุงระบบ
</div>
</dsl-modal>
<dsl-button label="Open Modal" icon="far fa-cloud-download" position="left" onClick="showModal()" />
</div>
<script>
window['SV_WC'] = "https://pro.fontawesome.com/releases/v5.10.0/css/all.css";
const sheet = new CSSStyleSheet();
sheet.replaceSync(':root { --x: green; }');
document.adoptedStyleSheets = [sheet];
// AddEventListener Modal
function showModal() {
const modal = document.querySelector('dsl-modal')
modal.setAttribute('opened', true)
modal.setAttribute('hideclosebtn', true)
modal.setAttribute('hideoutsideclick', true)
}
</script>
</body>
</html>