mix-components v0.0.4

Mix Components

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

安装

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

组件文档

• mix-button

• mix-icon

• mix-input

使用

以下以 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>