@uiw/react-button
Advanced tools
Comparing version 4.21.23 to 5.0.0-bate.2.0
import React from 'react'; | ||
import { IconProps } from '@uiw/react-icon'; | ||
import { IProps, HTMLButtonProps } from '@uiw/utils'; | ||
import './style/index.less'; | ||
export * from './style'; | ||
export declare type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'link'; | ||
@@ -13,4 +12,14 @@ export declare type ButtonSize = 'large' | 'default' | 'small'; | ||
block?: boolean; | ||
icon?: IconProps['type']; | ||
icon?: React.ReactNode; | ||
focus?: boolean; | ||
/** | ||
* 按钮类型 | ||
* @mytag {@link link } | ||
* @beta | ||
*/ | ||
type?: ButtonType; | ||
/** | ||
* 按钮尺寸 | ||
* @defaultValue 'large' | 'default' | 'small' | ||
*/ | ||
size?: ButtonSize; | ||
@@ -20,3 +29,5 @@ htmlType?: 'button' | 'submit' | 'reset'; | ||
} | ||
declare const _default: React.ForwardRefExoticComponent<Pick<ButtonProps, "basic" | "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "active" | "block" | "start" | "open" | "name" | "color" | "content" | "translate" | "value" | "loading" | "hidden" | "cite" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "dir" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "wrap" | "icon" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "htmlType" | "prefixCls"> & React.RefAttributes<HTMLButtonElement>>; | ||
export default _default; | ||
/**@internal */ | ||
declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>; | ||
export default Button; | ||
//# sourceMappingURL=index.d.ts.map |
@@ -7,2 +7,3 @@ "use strict"; | ||
}); | ||
var _exportNames = {}; | ||
exports["default"] = void 0; | ||
@@ -12,6 +13,19 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); | ||
var _react = _interopRequireDefault(require("react")); | ||
var _reactIcon = _interopRequireDefault(require("@uiw/react-icon")); | ||
var _style = require("./style"); | ||
Object.keys(_style).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _style[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _style[key]; | ||
} | ||
}); | ||
}); | ||
var _reactIcon = require("@uiw/react-icon"); | ||
var _jsxRuntime = require("react/jsx-runtime"); | ||
var _excluded = ["prefixCls", "disabled", "active", "loading", "block", "basic", "htmlType", "type", "size", "icon", "className", "children"]; | ||
var _default = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) { | ||
/**@internal */ | ||
var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) { | ||
var _props$prefixCls = props.prefixCls, | ||
@@ -40,3 +54,4 @@ prefixCls = _props$prefixCls === void 0 ? 'w-btn' : _props$prefixCls, | ||
var cls = [className, prefixCls, size ? "".concat(prefixCls, "-size-").concat(size) : null, type ? "".concat(prefixCls, "-").concat(type) : null, basic ? "".concat(prefixCls, "-basic") : null, loading ? "".concat(prefixCls, "-loading") : null, disabled || loading ? 'disabled' : null, active ? 'active' : null, block ? 'block' : null].filter(Boolean).join(' ').trim(); | ||
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, { | ||
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.ButtonStyleWarp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, { | ||
as: type === 'light' ? _style.ButtonStyleBaseLight : 'button', | ||
ref: ref, | ||
@@ -46,5 +61,15 @@ type: htmlType, | ||
className: cls, | ||
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon["default"], { | ||
type: icon | ||
}), children && _react["default"].Children.map(children, function (child) { | ||
param: { | ||
focus: !!props.focus, | ||
type: type, | ||
size: size, | ||
basic: basic, | ||
loading: loading, | ||
disabled: disabled || loading, | ||
active: active, | ||
block: block | ||
}, | ||
children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon.IconStyleBase, { | ||
children: icon | ||
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {}), children && _react["default"].Children.map(children, function (child) { | ||
if (!child) return child; | ||
@@ -58,4 +83,4 @@ if ( /*#__PURE__*/_react["default"].isValidElement(child)) return child; | ||
}); | ||
var _default = Button; | ||
exports["default"] = _default; | ||
module.exports = exports.default; | ||
//# sourceMappingURL=index.js.map |
import React from 'react'; | ||
import { IconProps } from '@uiw/react-icon'; | ||
import { IProps, HTMLButtonProps } from '@uiw/utils'; | ||
import './style/index.less'; | ||
export * from './style'; | ||
export declare type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'link'; | ||
@@ -13,4 +12,14 @@ export declare type ButtonSize = 'large' | 'default' | 'small'; | ||
block?: boolean; | ||
icon?: IconProps['type']; | ||
icon?: React.ReactNode; | ||
focus?: boolean; | ||
/** | ||
* 按钮类型 | ||
* @mytag {@link link } | ||
* @beta | ||
*/ | ||
type?: ButtonType; | ||
/** | ||
* 按钮尺寸 | ||
* @defaultValue 'large' | 'default' | 'small' | ||
*/ | ||
size?: ButtonSize; | ||
@@ -20,3 +29,5 @@ htmlType?: 'button' | 'submit' | 'reset'; | ||
} | ||
declare const _default: React.ForwardRefExoticComponent<Pick<ButtonProps, "basic" | "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "active" | "block" | "start" | "open" | "name" | "color" | "content" | "translate" | "value" | "loading" | "hidden" | "cite" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "dir" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "wrap" | "icon" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "htmlType" | "prefixCls"> & React.RefAttributes<HTMLButtonElement>>; | ||
export default _default; | ||
/**@internal */ | ||
declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>; | ||
export default Button; | ||
//# sourceMappingURL=index.d.ts.map |
@@ -5,7 +5,9 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
import React from 'react'; | ||
import Icon from '@uiw/react-icon'; | ||
import "./style/index.css"; | ||
import { ButtonStyleWarp, ButtonStyleBaseLight } from './style'; | ||
import { IconStyleBase } from '@uiw/react-icon'; | ||
import { jsx as _jsx } from "react/jsx-runtime"; | ||
import { jsxs as _jsxs } from "react/jsx-runtime"; | ||
export default /*#__PURE__*/React.forwardRef((props, ref) => { | ||
export * from './style'; | ||
/**@internal */ | ||
var Button = /*#__PURE__*/React.forwardRef((props, ref) => { | ||
var { | ||
@@ -27,3 +29,4 @@ prefixCls = 'w-btn', | ||
var cls = [className, prefixCls, size ? prefixCls + "-size-" + size : null, type ? prefixCls + "-" + type : null, basic ? prefixCls + "-basic" : null, loading ? prefixCls + "-loading" : null, disabled || loading ? 'disabled' : null, active ? 'active' : null, block ? 'block' : null].filter(Boolean).join(' ').trim(); | ||
return /*#__PURE__*/_jsxs("button", _extends({}, others, { | ||
return /*#__PURE__*/_jsxs(ButtonStyleWarp, _extends({}, others, { | ||
as: type === 'light' ? ButtonStyleBaseLight : 'button', | ||
ref: ref, | ||
@@ -33,5 +36,15 @@ type: htmlType, | ||
className: cls, | ||
children: [icon && /*#__PURE__*/_jsx(Icon, { | ||
type: icon | ||
}), children && React.Children.map(children, child => { | ||
param: { | ||
focus: !!props.focus, | ||
type, | ||
size, | ||
basic, | ||
loading, | ||
disabled: disabled || loading, | ||
active, | ||
block | ||
}, | ||
children: [icon ? /*#__PURE__*/_jsx(IconStyleBase, { | ||
children: icon | ||
}) : /*#__PURE__*/_jsx(React.Fragment, {}), children && React.Children.map(children, child => { | ||
if (!child) return child; | ||
@@ -45,2 +58,3 @@ if ( /*#__PURE__*/React.isValidElement(child)) return child; | ||
}); | ||
export default Button; | ||
//# sourceMappingURL=index.js.map |
{ | ||
"name": "@uiw/react-button", | ||
"version": "4.21.23", | ||
"version": "5.0.0-bate.2.0", | ||
"description": "Button component", | ||
@@ -13,2 +13,3 @@ "author": "Kenny Wong <wowohoo@qq.com>", | ||
"main": "cjs/index.js", | ||
"typings": "cjs/index.d.ts", | ||
"module": "esm/index.js", | ||
@@ -45,8 +46,9 @@ "files": [ | ||
"react": ">=16.9.0", | ||
"react-dom": ">=16.9.0" | ||
"react-dom": ">=16.9.0", | ||
"styled-components": ">=5.3.5" | ||
}, | ||
"dependencies": { | ||
"@uiw/react-icon": "^4.21.23", | ||
"@uiw/utils": "^4.21.23" | ||
"@uiw/react-icon": "^5.0.0-bate.2.0", | ||
"@uiw/utils": "^5.0.0-bate.2.0" | ||
} | ||
} |
707
README.md
@@ -0,1 +1,3 @@ | ||
[ButtonProps](./api_doc/markdown/react-button.buttonprops.md) | ||
Button 按钮 | ||
@@ -19,9 +21,41 @@ === | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button, Divider, Icon } from 'uiw'; | ||
export default function Demo() { | ||
return( | ||
<div> | ||
const Demo = ()=>( | ||
<div> | ||
<Button type="primary" >主要按钮</Button> | ||
<Button type="success">成功按钮</Button> | ||
<Button type="warning">警告按钮</Button> | ||
<Button type="danger">错误按钮</Button> | ||
<Button type="light">亮按钮</Button> | ||
<Button type="dark">暗按钮</Button> | ||
<Divider /> | ||
<Button basic type="primary">主要按钮</Button> | ||
<Button basic type="success">成功按钮</Button> | ||
<Button basic type="warning">警告按钮</Button> | ||
<Button basic type="danger">错误按钮</Button> | ||
<Button basic type="light">亮按钮</Button> | ||
<Button basic type="dark">暗按钮</Button> | ||
<Divider /> | ||
<Button>Normal</Button> | ||
<Button disabled>Disabled</Button> | ||
<Button type="primary" active>Button</Button> | ||
<Button type="primary" size="small">more <Icon type="down" /></Button> | ||
<Button type="link"> (超连接样式)link </Button> | ||
</div> | ||
); | ||
export default Demo | ||
``` | ||
### 按钮组 | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button, Divider, ButtonGroup,Icon } from 'uiw'; | ||
const Demo = ()=>( | ||
<div> | ||
<ButtonGroup> | ||
<Button type="primary">主要按钮</Button> | ||
@@ -33,91 +67,57 @@ <Button type="success">成功按钮</Button> | ||
<Button type="dark">暗按钮</Button> | ||
<Divider /> | ||
<Button basic type="primary">主要按钮</Button> | ||
<Button basic type="success">成功按钮</Button> | ||
<Button basic type="warning">警告按钮</Button> | ||
<Button basic type="danger">错误按钮</Button> | ||
<Button basic type="light">亮按钮</Button> | ||
<Button basic type="dark">暗按钮</Button> | ||
<Divider /> | ||
<Button>Normal</Button> | ||
<Button disabled>Disabled</Button> | ||
<Button type="primary" active>Button</Button> | ||
<Button type="primary" size="small">more <Icon type="down" /></Button> | ||
<Button type="link"> (超连接样式)link </Button> | ||
</div> | ||
); | ||
} | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button size="small" type="primary">按钮</Button> | ||
<Button size="small" type="primary">按钮</Button> | ||
<Button size="small" type="primary">按钮</Button> | ||
<Button size="small" type="primary">按钮</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
</ButtonGroup> | ||
<Divider style={{ maxWidth: 220 }}>添加图标</Divider> | ||
<ButtonGroup> | ||
<Button icon={<Icon type="copy" />} type="primary">复制</Button> | ||
<Button icon={<Icon type="delete" />} type="success">删除</Button> | ||
<Button icon={<Icon type="file-add" />} type="warning">添加文件</Button> | ||
<Button icon={<Icon type="map" />} type="danger">地图</Button> | ||
<Button icon={<Icon type="linux" />} type="light">Linux</Button> | ||
<Button icon={<Icon type="apple" />} type="dark">Apple</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button icon={<Icon type="copy" />} type="primary">复制</Button> | ||
<Button icon={<Icon type="delete" />} type="primary">删除</Button> | ||
<Button icon={<Icon type="file-add" />} type="primary">添加文件</Button> | ||
<Button icon={<Icon type="map" />} type="primary">地图</Button> | ||
<Button icon={<Icon type="linux" />} type="primary">Linux</Button> | ||
<Button icon={<Icon type="apple" />} type="primary">Apple</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button icon={<Icon type="copy" />}>复制</Button> | ||
<Button icon={<Icon type="delete" />} >删除</Button> | ||
<Button icon={<Icon type="file-add" />} >添加文件</Button> | ||
<Button icon={<Icon type="map" />} >地图</Button> | ||
<Button icon={<Icon type="linux" />}>Linux</Button> | ||
<Button icon={<Icon type="apple" />} >Apple</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button icon={<Icon type="copy" />} /> | ||
<Button icon={<Icon type="delete" />} /> | ||
<Button icon={<Icon type="file-add" />} /> | ||
<Button icon={<Icon type="map" />} /> | ||
<Button icon={<Icon type="linux" />} /> | ||
<Button icon={<Icon type="apple" />} /> | ||
</ButtonGroup> | ||
</div> | ||
); | ||
export default Demo | ||
``` | ||
### 按钮组 | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
import { Button, Divider, ButtonGroup } from 'uiw'; | ||
export default function Demo() { | ||
return( | ||
<div> | ||
<ButtonGroup> | ||
<Button type="primary">主要按钮</Button> | ||
<Button type="success">成功按钮</Button> | ||
<Button type="warning">警告按钮</Button> | ||
<Button type="danger">错误按钮</Button> | ||
<Button type="light">亮按钮</Button> | ||
<Button type="dark">暗按钮</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button size="small" type="primary">按钮</Button> | ||
<Button size="small" type="primary">按钮</Button> | ||
<Button size="small" type="primary">按钮</Button> | ||
<Button size="small" type="primary">按钮</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
</ButtonGroup> | ||
<Divider style={{ maxWidth: 220 }}>添加图标</Divider> | ||
<ButtonGroup> | ||
<Button icon="copy" type="primary">复制</Button> | ||
<Button icon="delete" type="success">删除</Button> | ||
<Button icon="file-add" type="warning">添加文件</Button> | ||
<Button icon="map" type="danger">地图</Button> | ||
<Button icon="linux" type="light">Linux</Button> | ||
<Button icon="apple" type="dark">Apple</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button icon="copy" type="primary">复制</Button> | ||
<Button icon="delete" type="primary">删除</Button> | ||
<Button icon="file-add" type="primary">添加文件</Button> | ||
<Button icon="map" type="primary">地图</Button> | ||
<Button icon="linux" type="primary">Linux</Button> | ||
<Button icon="apple" type="primary">Apple</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button icon="copy">复制</Button> | ||
<Button icon="delete">删除</Button> | ||
<Button icon="file-add">添加文件</Button> | ||
<Button icon="map">地图</Button> | ||
<Button icon="linux">Linux</Button> | ||
<Button icon="apple">Apple</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button icon="copy" /> | ||
<Button icon="delete" /> | ||
<Button icon="file-add" /> | ||
<Button icon="map" /> | ||
<Button icon="linux" /> | ||
<Button icon="apple" /> | ||
</ButtonGroup> | ||
</div> | ||
); | ||
} | ||
``` | ||
### 图标按钮 | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button, Icon, Divider } from 'uiw'; | ||
@@ -130,24 +130,24 @@ | ||
export default function Demo() { | ||
return( | ||
<div> | ||
<Button icon="weibo" type="primary">主要按钮</Button> | ||
<Button icon="chrome" type="success">成功按钮</Button> | ||
<Button icon="taobao" type="warning">警告按钮</Button> | ||
<Button icon="weibo" type="danger" /> | ||
<Button type="danger"> | ||
<Icon type="reload" spin={true} /> | ||
<span>错误<span>按钮</span></span> | ||
<Icon type="weibo" /> | ||
</Button> | ||
<Button icon="chrome" type="light">亮按钮</Button> | ||
<Button icon="apple" type="dark">暗按钮</Button> | ||
<Button icon={chat} type="dark">暗按钮</Button> | ||
<Divider style={{ maxWidth: 220 }}>GitHub</Divider> | ||
<Button icon={open} type="success">Open</Button> | ||
<Button icon={merged} type="light" style={{ backgroundColor: '#6f42c1', color: '#fff' }}>Merged</Button> | ||
<Button icon={closed} type="danger">Closed</Button> | ||
</div> | ||
); | ||
} | ||
const Demo = ()=>( | ||
<div> | ||
<Button icon={<Icon type="weibo" />} type="primary">主要按钮</Button> | ||
<Button icon={<Icon type="chrome" />} type="success">成功按钮</Button> | ||
<Button icon={<Icon type="taobao" />} type="warning">警告按钮</Button> | ||
<Button icon={<Icon type="weibo" />} type="danger" /> | ||
<Button type="danger"> | ||
<Icon type="reload" spin={true} /> | ||
<span>错误<span>按钮</span></span> | ||
<Icon type="weibo" /> | ||
</Button> | ||
<Button icon={<Icon type="chrome" />} type="light">亮按钮</Button> | ||
<Button icon={<Icon type="apple" />} type="dark">暗按钮</Button> | ||
<Button icon={<Icon type={chat} />} type="dark">暗按钮</Button> | ||
<Divider style={{ maxWidth: 220 }}>GitHub</Divider> | ||
<Button icon={<Icon type={open} />} type="success">Open</Button> | ||
<Button icon={<Icon type={merged} />} type="light" style={{ backgroundColor: '#6f42c1', color: '#fff' }}>Merged</Button> | ||
<Button icon={<Icon type={closed} />} type="danger">Closed</Button> | ||
</div> | ||
); | ||
export default Demo | ||
``` | ||
@@ -157,28 +157,28 @@ | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button, Icon, Divider } from 'uiw'; | ||
export default function Demo() { | ||
return( | ||
<div> | ||
<Button type="danger"> | ||
<Icon type="reload" spin={true} /> | ||
<span>错误<span>按钮</span></span> | ||
<Icon type="weibo" /> | ||
</Button> | ||
<Button loading type="primary">主要按钮</Button> | ||
<Button loading type="success">成功按钮</Button> | ||
<Button loading type="warning">警告按钮</Button> | ||
<Button loading type="danger">错误按钮</Button> | ||
<Button loading type="light">亮按钮</Button> | ||
<Button loading type="dark">暗按钮</Button> | ||
<Button loading type="danger">亮按钮</Button> | ||
<Divider style={{ maxWidth: 220 }}>Size</Divider> | ||
<Button loading size="small" type="primary">主要按钮</Button> | ||
<Button loading size="default" type="success">成功按钮</Button> | ||
<Button loading size="large" type="warning">警告按钮</Button> | ||
</div> | ||
); | ||
} | ||
const Demo = ()=>( | ||
<div> | ||
<Button type="danger"> | ||
<Icon type="reload" spin={true} /> | ||
<span>错误<span>按钮</span></span> | ||
<Icon type="weibo" /> | ||
</Button> | ||
<Button loading type="primary">主要按钮</Button> | ||
<Button loading type="success">成功按钮</Button> | ||
<Button loading type="warning">警告按钮</Button> | ||
<Button loading type="danger">错误按钮</Button> | ||
<Button loading type="light">亮按钮</Button> | ||
<Button loading type="dark">暗按钮</Button> | ||
<Button loading type="danger">亮按钮</Button> | ||
<Divider style={{ maxWidth: 220 }}>Size</Divider> | ||
<Button loading size="small" type="primary">主要按钮</Button> | ||
<Button loading size="default" type="success">成功按钮</Button> | ||
<Button loading size="large" type="warning">警告按钮</Button> | ||
</div> | ||
); | ||
export default Demo | ||
``` | ||
@@ -188,64 +188,66 @@ | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
import { Button, ButtonGroup, Divider } from 'uiw'; | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button, ButtonGroup, Divider ,Icon} from 'uiw'; | ||
export default function Demo() { | ||
return( | ||
<div> | ||
<ButtonGroup> | ||
<Button disabled type="primary">主要按钮</Button> | ||
<Button disabled type="success">成功按钮</Button> | ||
<Button disabled type="warning">警告按钮</Button> | ||
<Button disabled type="danger">错误按钮</Button> | ||
<Button disabled type="light">亮按钮</Button> | ||
<Button disabled type="dark">暗按钮</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button disabled type="primary">按钮</Button> | ||
<Button disabled type="primary">按钮</Button> | ||
<Button disabled type="primary">按钮</Button> | ||
<Button disabled type="primary">按钮</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button disabled type="light">按钮</Button> | ||
<Button disabled type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
<Button disabled type="light">按钮</Button> | ||
</ButtonGroup> | ||
<Divider style={{ maxWidth: 220 }}>添加图标</Divider> | ||
<ButtonGroup> | ||
<Button disabled icon="copy" type="primary">复制</Button> | ||
<Button disabled icon="delete" type="success">删除</Button> | ||
<Button disabled icon="file-add" type="warning">添加文件</Button> | ||
<Button disabled icon="map" type="danger">地图</Button> | ||
<Button disabled icon="linux" type="light">Linux</Button> | ||
<Button disabled icon="apple" type="dark">Apple</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button disabled icon="copy" type="primary">复制</Button> | ||
<Button disabled icon="delete" type="primary">删除</Button> | ||
<Button icon="file-add" type="primary">添加文件</Button> | ||
<Button disabled icon="map" type="primary">地图</Button> | ||
<Button disabled icon="linux" type="primary">Linux</Button> | ||
<Button disabled icon="apple" type="primary">Apple</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button disabled icon="copy">复制</Button> | ||
<Button disabled icon="delete">删除</Button> | ||
<Button disabled icon="file-add">添加文件</Button> | ||
<Button disabled icon="map">地图</Button> | ||
<Button disabled icon="linux">Linux</Button> | ||
<Button disabled icon="apple">Apple</Button> | ||
</ButtonGroup> | ||
<div style={{ marginTop: 5 }}> | ||
<Button disabled icon="weibo" basic type="primary" /> | ||
<Button disabled icon="chrome" basic type="success" /> | ||
<Button disabled icon="taobao" basic type="warning" /> | ||
<Button disabled icon="apple" basic type="danger" /> | ||
<Button disabled icon="weibo" basic type="dark" /> | ||
</div> | ||
const Demo = ()=>( | ||
<div> | ||
<ButtonGroup> | ||
<Button disabled type="primary">主要按钮</Button> | ||
<Button disabled type="success">成功按钮</Button> | ||
<Button disabled type="warning">警告按钮</Button> | ||
<Button disabled type="danger">错误按钮</Button> | ||
<Button disabled type="light">亮按钮</Button> | ||
<Button disabled type="dark">暗按钮</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button disabled type="primary">按钮</Button> | ||
<Button disabled type="primary">按钮</Button> | ||
<Button disabled type="primary">按钮</Button> | ||
<Button disabled type="primary">按钮</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button disabled type="light">按钮</Button> | ||
<Button disabled type="light">按钮</Button> | ||
<Button disabled type="light">按钮</Button> | ||
<Button disabled type="light">按钮</Button> | ||
</ButtonGroup> | ||
<Divider style={{ maxWidth: 220 }}>添加图标</Divider> | ||
<ButtonGroup> | ||
<Button disabled icon={<Icon type="copy" />} type="primary">复制</Button> | ||
<Button disabled icon={<Icon type="delete" />} type="success">删除</Button> | ||
<Button disabled icon={<Icon type="file-add" />} type="warning">添加文件</Button> | ||
<Button disabled icon={<Icon type="map" />} type="danger">地图</Button> | ||
<Button disabled icon={<Icon type="linux" />} type="light">Linux</Button> | ||
<Button disabled icon={<Icon type="apple" />} type="dark">Apple</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button disabled icon={<Icon type="copy" />} type="primary">复制</Button> | ||
<Button disabled icon={<Icon type="delete" />} type="primary">删除</Button> | ||
<Button disabled icon={<Icon type="file-add" />} type="primary">添加文件</Button> | ||
<Button disabled icon={<Icon type="map" />} type="primary">地图</Button> | ||
<Button disabled icon={<Icon type="linux" />} type="primary">Linux</Button> | ||
<Button disabled icon={<Icon type="apple" />} type="primary">Apple</Button> | ||
</ButtonGroup> | ||
<ButtonGroup style={{ marginTop: 5 }}> | ||
<Button disabled icon={<Icon type="copy" />} >复制</Button> | ||
<Button disabled icon={<Icon type="delete" />} >删除</Button> | ||
<Button disabled icon={<Icon type="file-add" />}>添加文件</Button> | ||
<Button disabled icon={<Icon type="map" />} >地图</Button> | ||
<Button disabled icon={<Icon type="linux" />} >Linux</Button> | ||
<Button disabled icon={<Icon type="apple" />}>Apple</Button> | ||
</ButtonGroup> | ||
<div style={{ marginTop: 5 }}> | ||
<Button icon={<Icon type="weibo" />} disabled basic type="primary" /> | ||
<Button icon={<Icon type="chrome" />} disabled basic type="success" /> | ||
<Button icon={<Icon type="taobao" />} disabled basic type="warning" /> | ||
<Button icon={<Icon type="apple" />} disabled basic type="danger" /> | ||
<Button icon={<Icon type="weibo" />} disabled basic type="dark" /> | ||
</div> | ||
); | ||
} | ||
</div> | ||
); | ||
export default Demo | ||
``` | ||
@@ -255,46 +257,46 @@ | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button, ButtonGroup, Row, Col } from 'uiw'; | ||
export default function Demo() { | ||
return( | ||
<Row gutter={10}> | ||
<Col style={{ maxWidth: 120 }}> | ||
<ButtonGroup vertical> | ||
<Button type="primary">按钮</Button> | ||
<Button type="primary">按钮</Button> | ||
<Button type="primary">按钮</Button> | ||
<Button type="primary">按钮</Button> | ||
</ButtonGroup> | ||
</Col> | ||
<Col style={{ maxWidth: 120 }}> | ||
<ButtonGroup vertical> | ||
<Button type="success">按钮</Button> | ||
<Button disabled type="success">按钮</Button> | ||
<Button type="success">按钮</Button> | ||
<Button type="success">按钮</Button> | ||
</ButtonGroup> | ||
</Col> | ||
<Col style={{ maxWidth: 120 }}> | ||
<ButtonGroup vertical> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
</ButtonGroup> | ||
</Col> | ||
<Col style={{ maxWidth: 120 }}> | ||
<ButtonGroup vertical> | ||
<Button type="primary">主要按钮</Button> | ||
<Button type="success">成功按钮</Button> | ||
<Button type="warning">警告按钮</Button> | ||
<Button type="danger">错误按钮</Button> | ||
<Button type="light">亮按钮</Button> | ||
<Button type="dark">暗按钮</Button> | ||
</ButtonGroup> | ||
</Col> | ||
</Row> | ||
); | ||
} | ||
const Demo = ()=>( | ||
<Row gutter={10}> | ||
<Col style={{ maxWidth: 120 }}> | ||
<ButtonGroup vertical> | ||
<Button type="primary">按钮</Button> | ||
<Button type="primary">按钮</Button> | ||
<Button type="primary">按钮</Button> | ||
<Button type="primary">按钮</Button> | ||
</ButtonGroup> | ||
</Col> | ||
<Col style={{ maxWidth: 120 }}> | ||
<ButtonGroup vertical> | ||
<Button type="success">按钮</Button> | ||
<Button disabled type="success">按钮</Button> | ||
<Button type="success">按钮</Button> | ||
<Button type="success">按钮</Button> | ||
</ButtonGroup> | ||
</Col> | ||
<Col style={{ maxWidth: 120 }}> | ||
<ButtonGroup vertical> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
<Button type="light">按钮</Button> | ||
</ButtonGroup> | ||
</Col> | ||
<Col style={{ maxWidth: 120 }}> | ||
<ButtonGroup vertical> | ||
<Button type="primary">主要按钮</Button> | ||
<Button type="success">成功按钮</Button> | ||
<Button type="warning">警告按钮</Button> | ||
<Button type="danger">错误按钮</Button> | ||
<Button type="light">亮按钮</Button> | ||
<Button type="dark">暗按钮</Button> | ||
</ButtonGroup> | ||
</Col> | ||
</Row> | ||
); | ||
export default Demo | ||
``` | ||
@@ -306,32 +308,32 @@ | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button, Divider } from 'uiw'; | ||
export default function Demo() { | ||
return( | ||
<div> | ||
<Button basic type="primary">主要按钮</Button> | ||
<Button basic type="success">成功按钮</Button> | ||
<Button basic type="warning">警告按钮</Button> | ||
<Button basic type="danger">错误按钮</Button> | ||
<Button basic type="light">亮按钮</Button> | ||
<Button basic type="dark">暗按钮</Button> | ||
<Divider style={{ maxWidth: 220 }}>激活</Divider> | ||
<Button basic active type="primary">主要按钮</Button> | ||
<Button basic active type="success">成功按钮</Button> | ||
<Button basic active type="warning">警告按钮</Button> | ||
<Button basic active type="danger">错误按钮</Button> | ||
<Button basic active type="light">亮按钮</Button> | ||
<Button basic active type="dark">暗按钮</Button> | ||
<Divider style={{ maxWidth: 220 }}>禁用</Divider> | ||
<Button basic disabled type="primary">主要按钮</Button> | ||
<Button basic disabled type="success">成功按钮</Button> | ||
<Button basic disabled type="warning">警告按钮</Button> | ||
<Button basic disabled type="danger">错误按钮</Button> | ||
<Button basic disabled type="light">亮按钮</Button> | ||
<Button basic disabled type="dark">暗按钮</Button> | ||
</div> | ||
); | ||
} | ||
const Demo = ()=>( | ||
<div> | ||
<Button basic type="primary">主要按钮</Button> | ||
<Button basic type="success">成功按钮</Button> | ||
<Button basic type="warning">警告按钮</Button> | ||
<Button basic type="danger">错误按钮</Button> | ||
<Button basic type="light">亮按钮</Button> | ||
<Button basic type="dark">暗按钮</Button> | ||
<Divider style={{ maxWidth: 220 }}>激活</Divider> | ||
<Button basic active type="primary">主要按钮</Button> | ||
<Button basic active type="success">成功按钮</Button> | ||
<Button basic active type="warning">警告按钮</Button> | ||
<Button basic active type="danger">错误按钮</Button> | ||
<Button basic active type="light">亮按钮</Button> | ||
<Button basic active type="dark">暗按钮</Button> | ||
<Divider style={{ maxWidth: 220 }}>禁用</Divider> | ||
<Button basic disabled type="primary">主要按钮</Button> | ||
<Button basic disabled type="success">成功按钮</Button> | ||
<Button basic disabled type="warning">警告按钮</Button> | ||
<Button basic disabled type="danger">错误按钮</Button> | ||
<Button basic disabled type="light">亮按钮</Button> | ||
<Button basic disabled type="dark">暗按钮</Button> | ||
</div> | ||
); | ||
export default Demo | ||
``` | ||
@@ -343,5 +345,5 @@ | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
import { Button, Divider } from 'uiw'; | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button, Divider ,Icon } from 'uiw'; | ||
@@ -354,20 +356,20 @@ const chat = ( | ||
export default function Demo() { | ||
return( | ||
<div> | ||
<Button icon="weibo" basic type="primary">主要按钮</Button> | ||
<Button icon="chrome" basic type="success">成功按钮</Button> | ||
<Button icon="taobao" basic type="warning">警告按钮</Button> | ||
<Button icon="apple" basic type="danger">错误按钮</Button> | ||
<Button icon="weibo" basic type="dark">暗按钮</Button> | ||
<Divider /> | ||
<Button icon="weibo" basic type="primary" /> | ||
<Button icon="chrome" basic type="success" /> | ||
<Button icon="taobao" basic type="warning" /> | ||
<Button icon="apple" basic type="danger" /> | ||
<Button icon="weibo" basic type="dark" /> | ||
<Button icon="weibo" basic type="dark" /> | ||
</div> | ||
); | ||
} | ||
const Demo = ()=>( | ||
<div> | ||
<Button icon={<Icon type="weibo" />} basic type="primary">主要按钮</Button> | ||
<Button icon={<Icon type="chrome" />} basic type="success">成功按钮</Button> | ||
<Button icon={<Icon type="taobao" />} basic type="warning">警告按钮</Button> | ||
<Button icon={<Icon type="apple" />} basic type="danger">错误按钮</Button> | ||
<Button icon={<Icon type="weibo" />} basic type="dark">暗按钮</Button> | ||
<Divider /> | ||
<Button icon={<Icon type="weibo" />} basic type="primary" /> | ||
<Button icon={<Icon type="chrome" />} basic type="success" /> | ||
<Button icon={<Icon type="taobao" />} basic type="warning" /> | ||
<Button icon={<Icon type="apple" />} basic type="danger" /> | ||
<Button icon={<Icon type="weibo" />} basic type="dark" /> | ||
<Button icon={<Icon type="weibo" />} basic type="dark" /> | ||
</div> | ||
); | ||
export default Demo | ||
``` | ||
@@ -377,19 +379,19 @@ | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button } from 'uiw'; | ||
export default function Demo() { | ||
return( | ||
<div> | ||
<Button active type="primary">主要按钮</Button> | ||
<Button active type="success">成功按钮</Button> | ||
<Button active type="warning">警告按钮</Button> | ||
<Button active type="danger">错误按钮</Button> | ||
<Button active type="light">亮按钮</Button> | ||
<Button active type="dark">暗按钮</Button> | ||
<Button active type="link"> (超连接样式)link </Button> | ||
</div> | ||
); | ||
} | ||
const Demo = ()=>( | ||
<div> | ||
<Button active type="primary">主要按钮</Button> | ||
<Button active type="success">成功按钮</Button> | ||
<Button active type="warning">警告按钮</Button> | ||
<Button active type="danger">错误按钮</Button> | ||
<Button active type="light">亮按钮</Button> | ||
<Button active type="dark">暗按钮</Button> | ||
<Button active type="link"> (超连接样式)link </Button> | ||
</div> | ||
); | ||
export default Demo | ||
``` | ||
@@ -399,19 +401,19 @@ | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button } from 'uiw'; | ||
export default function Demo() { | ||
return( | ||
<div> | ||
<Button disabled type="primary">主要按钮</Button> | ||
<Button disabled type="success">成功按钮</Button> | ||
<Button disabled type="warning">警告按钮</Button> | ||
<Button disabled type="danger">错误按钮</Button> | ||
<Button disabled type="light">亮按钮</Button> | ||
<Button disabled type="dark">暗按钮</Button> | ||
<Button disabled type="link"> (超连接样式)link </Button> | ||
</div> | ||
); | ||
} | ||
const Demo = ()=>( | ||
<div> | ||
<Button disabled type="primary">主要按钮</Button> | ||
<Button disabled type="success">成功按钮</Button> | ||
<Button disabled type="warning">警告按钮</Button> | ||
<Button disabled type="danger">错误按钮</Button> | ||
<Button disabled type="light">亮按钮</Button> | ||
<Button disabled type="dark">暗按钮</Button> | ||
<Button disabled type="link"> (超连接样式)link </Button> | ||
</div> | ||
); | ||
export default Demo | ||
``` | ||
@@ -422,20 +424,19 @@ | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button, Row, Col } from 'uiw'; | ||
export default function Demo() { | ||
return( | ||
<Row gutter={10}> | ||
<Col style={{ maxWidth: 320 }}> | ||
<Button block type="primary">主要按钮</Button> | ||
<Button block type="success">成功按钮</Button> | ||
<Button block type="warning">警告按钮</Button> | ||
<Button block type="danger">错误按钮</Button> | ||
<Button block type="light">亮按钮</Button> | ||
<Button block type="dark">暗按钮</Button> | ||
</Col> | ||
</Row> | ||
); | ||
} | ||
const Demo = ()=>( | ||
<Row gutter={10}> | ||
<Col style={{ maxWidth: 320 }}> | ||
<Button block type="primary">主要按钮</Button> | ||
<Button block type="success">成功按钮</Button> | ||
<Button block type="warning">警告按钮</Button> | ||
<Button block type="danger">错误按钮</Button> | ||
<Button block type="light">亮按钮</Button> | ||
<Button block type="dark">暗按钮</Button> | ||
</Col> | ||
</Row> | ||
); | ||
export default Demo | ||
``` | ||
@@ -447,23 +448,23 @@ | ||
```jsx mdx:preview | ||
import React from 'react'; | ||
import { Button, Divider } from 'uiw'; | ||
```jsx mdx:preview&disableCheckered=true&codeSandbox=true&codePen=true | ||
import React from "react" | ||
import { Button, Divider ,Icon} from 'uiw'; | ||
export default function Demo() { | ||
return( | ||
<div> | ||
<Button size="small" type="primary">主要按钮</Button> | ||
<Button size="default" type="success">成功按钮</Button> | ||
<Button size="large" type="warning">警告按钮</Button> | ||
<Button size="small" type="danger">错误按钮</Button> | ||
<Button size="default" type="light">亮按钮</Button> | ||
<Button size="large" type="dark">暗按钮</Button> | ||
<Divider /> | ||
<Button icon="weibo" size="small" type="primary">微博</Button> | ||
<Button icon="chrome" size="small" type="success">谷歌浏览器</Button> | ||
<Button icon="chrome" type="success">谷歌浏览器</Button> | ||
<Button icon="apple" size="large" type="warning">淘宝</Button> | ||
</div> | ||
); | ||
const Demo =()=>{ | ||
return <div> | ||
<Button size="small" type="primary">主要按钮</Button> | ||
<Button size="default" type="success">成功按钮</Button> | ||
<Button size="large" type="warning">警告按钮</Button> | ||
<Button size="small" type="danger">错误按钮</Button> | ||
<Button size="default" type="light">亮按钮</Button> | ||
<Button size="large" type="dark">暗按钮</Button> | ||
<Divider /> | ||
<Button icon={<Icon type="weibo" />} size="small" type="primary">微博</Button> | ||
<Button icon={<Icon type="chrome" />} size="small" type="success">谷歌浏览器</Button> | ||
<Button icon={<Icon type="chrome" />} type="success">谷歌浏览器</Button> | ||
<Button icon={<Icon type="apple" />} size="large" type="warning">淘宝</Button> | ||
</div> | ||
} | ||
export default Demo | ||
``` | ||
@@ -490,2 +491,2 @@ | ||
| -------- | -------- | -------- | -------- | | ||
| vertical | 竖排列 | Boolean | `false` | | ||
| vertical | 竖排列 | Boolean | `false` | |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
225759
39
1926
479
5
1
1
+ Added@emotion/is-prop-valid@1.2.2(transitive)
+ Added@emotion/memoize@0.8.1(transitive)
+ Added@emotion/unitless@0.8.1(transitive)
+ Added@types/stylis@4.2.5(transitive)
+ Added@uiw/icons@2.6.1(transitive)
+ Added@uiw/react-icon@5.0.0-bate-9(transitive)
+ Added@uiw/utils@5.0.0-bate-9(transitive)
+ Addedcamelize@1.0.1(transitive)
+ Addedcss-color-keywords@1.0.0(transitive)
+ Addedcss-to-react-native@3.2.0(transitive)
+ Addedcsstype@3.1.3(transitive)
+ Addednanoid@3.3.7(transitive)
+ Addedpicocolors@1.1.0(transitive)
+ Addedpostcss@8.4.38(transitive)
+ Addedpostcss-value-parser@4.2.0(transitive)
+ Addedshallowequal@1.1.0(transitive)
+ Addedsource-map-js@1.2.1(transitive)
+ Addedstyled-components@6.1.13(transitive)
+ Addedstylis@4.3.2(transitive)
+ Addedtslib@2.6.2(transitive)
- Removed@uiw/icons@2.6.10(transitive)
- Removed@uiw/react-icon@4.22.3(transitive)
- Removed@uiw/utils@4.22.3(transitive)
Updated@uiw/utils@^5.0.0-bate.2.0