基于omi的omim-tag组件

news/2025/1/11 0:38:34/

腾讯omi项目中的omim，基于typescript，pr了omim-tag组件，已被commit。

omim线上体验地址：omim

github地址： mac-tag

个人blog地址： blog

demo：

import '../../src/tag/index.tsx'
import { render, h } from 'omi'function clickHandler() {console.log(1)
}
render(<div><h3>基础用法</h3><m-tag onClick={clickHandler}>default</m-tag><m-tag onClick={clickHandler} type='primary'>primary</m-tag><m-tag onClick={clickHandler} type='danger'>danger</m-tag><m-tag onClick={clickHandler} type='warn'>warn</m-tag><m-tag onClick={clickHandler} type='success'>success</m-tag><h3>带图标</h3><m-tag onClick={clickHandler} icon={{path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',color: '#0052d9',scale: 1.3}}>default</m-tag><m-tag onClick={clickHandler} type='primary' icon={{path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',color: '#0052d9',scale: 1.3}}>primary</m-tag><m-tag onClick={clickHandler} type='danger' icon={{path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',color: '#0052d9',scale: 1.3}}>danger</m-tag><m-tag onClick={clickHandler} type='warn' icon={{path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',color: '#0052d9',scale: 1.3}}>warn</m-tag><m-tag onClick={clickHandler} type='success' icon={{path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',color: '#0052d9',scale: 1.3}}>success</m-tag><h3>不同尺寸</h3><m-tag onClick={clickHandler}>default</m-tag><m-tag onClick={clickHandler} type='danger' size='medium'>medium</m-tag><m-tag onClick={clickHandler} type='warn' size='small'>small</m-tag><m-tag onClick={clickHandler} type='success' size='mini'>mini</m-tag></div>, 'body')
复制代码

源码如下：

index.d.ts文件：

import { WeElement } from 'omi';
import '../icon';
interface Props {type: string;active: boolean;size: string;icon: object;
}
interface Data {
}
export default class Tag extends WeElement<Props, Data> {static css: any;static propTypes: {type: StringConstructor;active: BooleanConstructor;size: StringConstructor;icon: ObjectConstructor;};render(props: any): JSX.Element;
}
export {};复制代码

index.tsx文件：

import { tag, WeElement, h, extractClass } from 'omi'
import * as css from './index.scss'
import '../icon'interface Props {type: string,active: boolean,size: string,icon: object
}interface Data {}@tag('m-tag')
export default class Tag extends WeElement<Props, Data>{static css = cssstatic propTypes = {type: String,active: Boolean,size: String,icon: Object}render(props) {return (<div {...extractClass(props, 'mdc-tag',props.type ? 'mdc-tag--'+`${props.type}` : '',props.size ? 'mdc-tag--' + `${props.size}` : '')}><span><slot></slot></span>{(props.icon) && <m-icon class='m-icon' {...props.icon}></m-icon>}</div>)}
}复制代码

index.scss文件：

@import '../theme';.m-icon {margin-left: 0.6em;text-align: center;display: inline-block;
}.mdc-tag {margin: 5px 5px 0 0;background-color: #fff;color: #000;padding: 0 10px;height: 32px;font-size: 12px;box-sizing: border-box;border: 1px solid rgba(64, 158, 255, 0.2);white-space: nowrap;font-family: Roboto, sans-serif;font-size: 12px;line-height: 2.25rem;font-weight: 500;letter-spacing: 0.08929em;text-decoration: none;text-transform: uppercase;padding: 0 10px;display: inline-flex;position: relative;align-items: center;justify-content: center;box-sizing: border-box;line-height: inherit;user-select: none;overflow: hidden;vertical-align: middle;
}.mdc-tag--active {background-color: #ccc;
}.mdc-tag--success {background-color: rgba(103, 194, 58, 0.1);border-color: rgba(103, 194, 58, 0.2);color: #09bb07 !important;
}
.mdc-tag--primary {background-color: rgba(64, 158, 255, 0.1);border-color: rgba(64, 158, 255, 0.2);color: #0052d9 !important;
}
.mdc-tag--warn {background-color: rgba(230, 162, 60, 0.1);border-color: rgba(230, 162, 60, 0.2);color: #e6a23c !important;
}
.mdc-tag--danger {background-color: rgba(245, 108, 108, 0.1);border-color: rgba(245, 108, 108, 0.2);color: #e64340 !important;
}.mdc-tag--mediun {height: 28px;line-height: 26px;
}.mdc-tag--small {height: 24px;padding: 0 8px;line-height: 22px;
}.mdc-tag--mini {height: 20px;padding: 0 5px;line-height: 19px;
}复制代码

转载于:https://juejin.im/post/5cff20f8f265da1b5e72e9ab


http://www.ppmy.cn/news/674319.html

相关文章

基因数据处理38之dbSnpId到omimId的映射表

基因数据处理38之dbSnpId到omimId的映射表

1.下载&#xff1a; 首先收到【2】&#xff0c;来源是【2】 【1】中有描述&#xff1a; You can also get those SNPs with an OMIM ID number by downloading from the dbSNP FTP site: the OmimVarLocusIdSNP table contains the information you need for your organisim…
阅读更多...
基因数据处理88之vcf2omim得到omim和dbSnpId信息

基因数据处理88之vcf2omim得到omim和dbSnpId信息

1.代码&#xff1a; /** * author xubo * more code:https://github.com/xubo245/SparkLearning * more blog:http://blog.csdn.net/xubo245 */ package org.gcdss.cli.disease import java.text.SimpleDateFormat import java.util.Date import org.apache.spark.{Sp…
阅读更多...
d0711_NCBI_Gene_Search_OMIM数据格式_开源数据

d0711_NCBI_Gene_Search_OMIM数据格式_开源数据

1.NCBI 基因名称书写规则 示例&#xff1a;https://www.ncbi.nlm.nih.gov/gene/?termHUT11 Gene A searchable database of genes, focusing on genomes that have been completely sequenced and that have an active research community to contribute gene-specific da…
阅读更多...
1-辛基-3-甲基咪唑六氟磷酸盐([OMIM] PF6)负载修饰四氧化三铁( Fe3O4)为载体包覆二氧化硅材料

1-辛基-3-甲基咪唑六氟磷酸盐([OMIM] PF6)负载修饰四氧化三铁( Fe3O4)为载体包覆二氧化硅材料

辛基-3-甲基咪唑六氟磷酸盐([OMIM] PF6)负载修饰四氧化三铁( Fe3O4)为载体包覆二氧化硅材料 描述&#xff1a;以四氧化三铁(Fe3O4)为载体包覆二氧化硅涂层,用1-辛基-3-甲基咪唑六氟磷酸盐([OMIM]PF6)负载修饰,制备了一种功能化磁性纳米材料。 离子液体具有一系列突出的优点&am…
阅读更多...
python解析omim网页内容

python解析omim网页内容

利用zip()函数把四个列表一对一的组合成一个元组。 zip() 函数用于将可迭代的对象作为参数&#xff0c;将对象中对应的元素打包成一个个元组&#xff0c;然后返回由这些元组组成的列表。 利用map()函数对每一个元素进行函数操作&#xff0c;用匿名函数提取text和去掉\n map(…
阅读更多...
OMIM数据库简介

OMIM数据库简介

欢迎关注"生信修炼手册"&#xff01; OMIM 全称叫做Online Mendelian Inheritance in Man&#xff0c; 是一个不断更新的人类孟德尔遗传病的数据库。这个数据库主要关注人类基因变异和表型性状之间的关系。 网址如下&#xff1a; https://omim.org/ 数据库中的每一条…
阅读更多...
OMIM使用简要说明

OMIM使用简要说明

OMIM 使用简要说明 1.OMIM 为“0nline MendelianInheritance in Man”的简称&#xff0c;它通过对新的病症分类并命名、收录表型和相关病因基因的关系来收录人类孟德尔疾病信息。所以我们可以通过表型或者基因型来搜索对应的信息。通过网址登陆到OMIM的主页&#xff1a; https:…
阅读更多...
如何利用OMIM数据库获取肿瘤相关所有突变基因？

如何利用OMIM数据库获取肿瘤相关所有突变基因？

如何利用OMIM数据库获取肿瘤相关所有突变基因&#xff1f; OMIM是人类孟德尔遗传数据库&#xff08;线上版&#xff09;&#xff08;0nline Mendelian Inheritance in Man&#xff09;的简称。这是一个持续更新的关于人类基因和遗传紊乱的数据库&#xff0c;主要着眼于遗传性的…
阅读更多...
最新文章

Copyright @ 2022~2023