Giter VIP home page Giter VIP logo

maker-tag's Introduction

Maker tag

Demo

Maker tag is a customizable HTML and CSS based widget that displays a text tag on a web page. The widget is designed to be added to any website with minimal configuration.

Usage

To add the Maker tag widget to your website, simply add the following JavaScript code to your web page:

<script src="https://cdn.jsdelivr.net/gh/alohe/[email protected]/dist/mwl.min.js"></script>

The widget can be customized by passing an object to the MakerTag constructor. The following code shows the default configuration:

Configuration

To add the Maker tag widget to your website, simply add the following JavaScript code to your web page:

<script src="https://cdn.jsdelivr.net/gh/alohe/[email protected]/dist/mwl.min.js"></script>
<script>
    new MakerTag({
        text: "Made with ❤️ by Alohe",
        link: "https://twitter.com/alemalohe",
    });
</script>

The widget can be customized by passing an object to the MakerTag constructor. The following code shows the default configuration:

<script>
  new MakerTag({
    text: "Made with ❤️ by Alohe",
    link: "https://alohe.github.io",
    position: "bottom-left",
    background: "radial-gradient(circle at left, #FFE2A3 0%, #fff 50%, #FFE2A3 100%)",
    color: "#E59F0D",
    animated: true,
    padding: "10px 20px",
    margin: "10px",
    font: {
        size: "13px",
        weight: "700",
    },
    borderRadius: "13px",
    hover: {
        color: "",
        background: "",
        shadow: "",
    },
    shadow: "none",
  });
</script>
Attribute Type Description Default
text string The text to display in the tag. "Made with ❤️"
link string The link that the tag points to. "https://twitter.com/alemalohe"
color string The color of the text in the tag. "white"
background string The background of the tag. Can be set to any valid CSS background value. Including gradients! "black"
margin string The margin of the tag. "20px"
padding string The padding of the tag. "10px 20px"
font.size string The font size of the tag. "0.8rem"
font.weight string The font weight of the tag. "bold"
borderRadius string The border radius of the tag. 0
position string The position of the tag. Valid values are "bottom-left", "bottom-right", "top-left", and "top-right". "bottom-left"
shadow string The box shadow of the tag. "0 0 0 rgba(0, 0, 0, 0)"
hover.color string The text color of the tag on hover. "white"
hover.background string The background color of the tag on hover. "black"
hover.shadow string The box shadow of the tag on hover. "0 0 0 rgba(0, 0, 0, 0)"
animated boolean Whether to enable the animated gradient background. Only works if the background attribute is set to a gradient value. false

License

This project is licensed under the Apache License 2.0. See the LICENSE file for more information.

maker-tag's People

Contributors

alohe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.