mix-components
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    Mix Components

    一个基于 Web Components 实现的组件库, 使用了Stencil作为编译器
    支持作为普通 HTML 标签使用
    支持 React 和 Vue
    目前仅支持typescript项目
    不支持 IE

    安装

        yarn add mix-components
        # or
        npm install mix-components

    组件文档

    使用

    以下以 mix-button为例

    普通项目中

    // 在入口文件中引入即可
    import "mix-component/core/esm/loader.js";
    // 在html 模板上,和普通的 html元素使用方式一样
    <mix-button id="my-button" label="Hello Mix Button"></mix-button>;

    使用 DOM api

    const mixButton = document.getElementBydId("my-button");
    mixButton.classList.add("my-button-class-name");

    React 项目

    .tsx文件中添加

    import React from "react";
    import { MixButton } from "mix-components/react";
    
    function DemoComponent() {
      return (
        <div className="DemoComponent">
          <MixButton type="button"></MixButton>
        </div>
      );
    }
    export default DemoComponent;

    Vue 项目

    .vue 文件中添加

    <template>
      <div id="parent">
        <mix-button type="button" :label="label"> </mix-button>
      </div>
    </template>
    
    // 注意: lang为 ts
    <script lang="ts">
      import { MixButton } from "mix-components/vue";
      export default {
        components: {
          MixButon,
        },
        data() {
          return {
            label: "Hello Mix Button",
          };
        },
      };
    </script>

    Keywords

    none

    Install

    npm i mix-components

    DownloadsWeekly Downloads

    2

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    129 kB

    Total Files

    23

    Last publish

    Collaborators

    • fizwen