Wondering what’s next for npm?Check out our public roadmap! »

    @_nu/react-button
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.6 • Public • Published

    NuButton

    npm package npm downloads github
    npm package npm downloads github

    没有 UI 依赖的按钮组件.

    <iframe src="https://codesandbox.io/embed/throbbing-leftpad-juijc?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FButton.js" title="throbbing-leftpad-juijc" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

    做了啥?

    • props 上有 href 时,会用 a 替换 button;
    • 默认为 button 添加 type="button";
    • 当元素标签不是 button 时会默认添加 role="button"

    安装

    yarn add @_nu/react-button @_nu/css-button
    

    二次封装

    /* @/components/Button/index.js */
    import NuButton from "@_nu/react-button";         // import
    import "@_nu/css-button";                         // core style
    import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap
    import './style.css';                             // custome style
    const Button = React.forwardRef(function Button(props, ref) {
      return <NuButton classNames="nu_btn" ref={ref} {...props} />;
    });
    
    export default Button;

    ⚠️:注意这里 classNamesclassName的区别, 见底部 API

    index.d.ts

    import { ComponentProps } from '@_nu/react-button';
    declare const _default: (props?: ComponentProps) => JSX.Element;
    export default _default;

    ⚠️:二次封装之后,代码提示会丢失,需要额外添加 index.d.ts 维持代码提示!

    使用

    import Button from '@/components/Button';
    
    // 这里省略了其它代码
    
    <Button className="_fill">hello</Button>
    <Button className="_fill" Component="strong">hello</Button>
    <Button className="_fill"><strong>hello</strong></Button>
    <Button className="_fill" disabled>hello</Button>
    <Button className="_fill _primary">hello</Button>
    <Button className="_fill _primary" href="." title="hello">hello</Button>

    会渲染成:

    <button class="nu_btn _fill" type="button">hello</button>
    <strong class="nu_btn _fill" role="button">hello</strong>
    <button class="nu_btn _fill" type="button"><strong>hello</strong></button>
    <button class="nu_btn _fill" type="button" disabled>hello</button>
    <button class="nu_btn _fill _primary" type="button">hello</button>
    <a class="nu_btn _fill _primary" role="button" href="." title="hello">hello</a>

    ⚠️:这里是在定义了 classNames="nu_btn" 的状况之下

    Api

    属性 类型 默认值 功能
    href string ' ' href for a
    Component string | func | object 'button' tagName
    className string '-' className
    classNames string 'nu_btn' 会添加到 className 之前

    ⚠️:classNames 主要是用于在二次封装到时候,添加默认的 className

    如何修改样式?

    查看样式组件 @_nu/css-button

    Install

    npm i @_nu/react-button

    DownloadsWeekly Downloads

    21

    Version

    1.4.6

    License

    MIT

    Unpacked Size

    23.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar
    • avatar