blobt
/
study_react_ts
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

button插件2

master
blobt 4 years ago
parent
9b2983c8c5
commit
7b99f9a791
5 changed files with 109 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .eslintcache
  2. 4
      src/App.tsx
  3. 64
      src/components/Button/_style.scss
  4. 33
      src/styles/_mixin.scss
  5. 7
      src/styles/index.scss

2
.eslintcache
View File

@ -1 +1 @@
[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx":"6"},{"size":508,"mtime":1609414907652,"results":"7","hashOfConfig":"8"},{"size":425,"mtime":1608882568140,"results":"9","hashOfConfig":"8"},{"size":425,"mtime":1609589147292,"results":"10","hashOfConfig":"8"},{"size":535,"mtime":1608965352064,"results":"11","hashOfConfig":"8"},{"size":485,"mtime":1608970157307,"results":"12","hashOfConfig":"8"},{"size":1301,"mtime":1609588234575,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"46l3t",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"23"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["28","29"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],["30","31"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["32","33"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx",[],{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"34","replacedBy":"38"},{"ruleId":"36","replacedBy":"39"},{"ruleId":"40","severity":1,"message":"41","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12},{"ruleId":"40","severity":1,"message":"43","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12,"suggestions":"44"},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],["45"],["46"],"react-hooks/exhaustive-deps","React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["47"],"no-global-assign","no-unsafe-negation",{"desc":"48","fix":"49"},"Update the dependencies array to be: [url]",{"range":"50","text":"51"},[415,419],"[url]"]
[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx":"6"},{"size":508,"mtime":1609414907652,"results":"7","hashOfConfig":"8"},{"size":425,"mtime":1608882568140,"results":"9","hashOfConfig":"8"},{"size":570,"mtime":1609600603207,"results":"10","hashOfConfig":"8"},{"size":535,"mtime":1608965352064,"results":"11","hashOfConfig":"8"},{"size":485,"mtime":1608970157307,"results":"12","hashOfConfig":"8"},{"size":1301,"mtime":1609588234575,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"46l3t",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"23"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["28","29"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],["30","31"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["32","33"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx",[],{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"34","replacedBy":"38"},{"ruleId":"36","replacedBy":"39"},{"ruleId":"40","severity":1,"message":"41","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12},{"ruleId":"40","severity":1,"message":"43","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12,"suggestions":"44"},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],["45"],["46"],"react-hooks/exhaustive-deps","React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["47"],"no-global-assign","no-unsafe-negation",{"desc":"48","fix":"49"},"Update the dependencies array to be: [url]",{"range":"50","text":"51"},[415,419],"[url]"]

4
src/App.tsx
View File

@ -4,8 +4,10 @@ import Button, { ButtonType, ButtonSize } from './components/Button/button';
const App: React.FC = () => { const App: React.FC = () => {
return ( return (
<div className="App"> <div className="App">
<Button disabled> Hello </Button>
<Button size={ButtonSize.Samll} disabled> Hello </Button>
<Button btnType={ButtonType.Primary} size={ButtonSize.Large}> Hello </Button> <Button btnType={ButtonType.Primary} size={ButtonSize.Large}> Hello </Button>
<Button btnType={ButtonType.Danger} > Hello </Button>
<Button btnType={ButtonType.Default} > Hello </Button>
<Button btnType={ButtonType.Link} href="https://www.aihomee.com"> Hello </Button> <Button btnType={ButtonType.Link} href="https://www.aihomee.com"> Hello </Button>
</div> </div>
); );

64
src/components/Button/_style.scss
View File

@ -0,0 +1,64 @@
.btn {
position: relative;
display: inline-block;
font-weight: $btn-font-weight;
line-height: $btn-line-height;
color: $body-color;
white-space: nowrap;
text-align: center;
vertical-align: middle;
background-image: none;
border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $border-radius);
box-shadow: $btn-box-shadow;
cursor: pointer;
transition: $btn-transition;
&.disabled,
&[disabled] {
cursor: not-allowed;
opacity: $btn-disabled-opacity;
box-shadow: none;
> * {
pointer-events: none;
}
}
}
.btn-lg {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $border-radius-lg);
}
.btn-sm {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $border-radius-sm);
}
.btn-primary {
@include button-style($primary, $primary, $white);
}
.btn-danger {
@include button-style($danger, $danger, $white);
}
.btn-default {
@include button-style($white, $gray-400, $body-color, $white, $primary,$primary );
}
.btn-link {
font-weight: $font-weight-normal;
color: $btn-link-color;
text-decoration: $link-decoration;
box-shadow: none;
&:hover {
color: $btn-link-hover-color;
text-decoration: $link-hover-decoration;
}
&:focus,&.focus{
text-decoration: $link-hover-decoration;
box-shadow: none;
}
&:disable,&.disable{
color: $btn-link-disabled-color;
pointer-events: none;
}
}

33
src/styles/_mixin.scss
View File

@ -0,0 +1,33 @@
@mixin button-size($padding-y, $padding-x, $front-size, $border-radius) {
padding: $padding-y $padding-x;
font-size: $front-size;
border-radius: $border-radius;
}
@mixin button-style(
$background,
$border,
$color,
$hover-background: lighten($background, 7.5%),
$hover-border: lighten($border, 10%),
$hover-color: $color
) {
color: $color;
background: $background;
border-color: $border;
&:hover {
color: $hover-color;
background: $hover-background;
border-color: $hover-border;
}
&:hover,&.focus {
color: $hover-color;
background: $hover-background;
border-color: $hover-border;
}
&:disabled,&.disabled {
color: $color;
background: $background;
border-color: $border;
}
}

7
src/styles/index.scss
View File

@ -3,3 +3,10 @@
//layout //layout
@import "reboot"; @import "reboot";
//mixin
@import "mixin";
//button
@import "../components/Button/style";
Write Preview
Loading…
Cancel
Save