Guard UI

A semantic UI component library based on W3C's web component standard

Quick start

At it's core, Guard UI leverages the idea of semantic programming. So in order to implement authentication page, all your need to is simply place some components on the page and add some event listener to handle the result. All the heavy lifting is done inside our semantic components.

<g-guard>
  <g-guard-container>
    <g-app-logo marginTop="24px" marginBottom="24px"></g-app-logo>
    <g-app-name marginBottom="20px"></g-app-name>
    <g-account-input marginBottom="20px" text=""></g-account-input>
    <g-password-input marginBottom="20px" text=""></g-password-input>
    <g-login-button marginBottom="20px"></g-login-button>
  </g-guard-container>
</g-guard>

<script type="module">
  import { Guard } from 'https://unpkg.com/guard-ui/dist/index.mjs'

  const guard = await Guard.initialize({appId: "62ac18c93134e5fafcd29435"});
  guard.on('login', (code, message, userInfo) => {
    if (code === 200) {
      console.log(userInfo);
      guard.message.success('Welcome! ' + userInfo.nickname);
    } else {
      guard.message.error(message);
    }
  });
</script>

📚 Documentation

To check out live examples and docs, visit docs

❓ Questions

For questions and support please use the official forum. The issue list of this repo is exclusively for bug reports and feature requests.

🤝 Contribution

• Fork it
• Create your feature branch (git checkout -b my-new-feature)
• Commit your changes (git commit -am 'Add some feature')
• Push to the branch (git push -u origin my-new-feature)
• Create new Pull Request

Thank you to all the people who already contributed to Guard UI!

🎁 License

MIT