mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(nimbus-icon): new icon & docs & omit tooltip of svg

Browse Source
This commit is contained in:
07akioni 2019-07-15 15:05:29 +08:00
parent 6a4ec4bfca
commit 1ba5ba69de
6 changed files with 132 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
demo/components/nimbusIconDemo.vue
View File

@ -19,17 +19,35 @@
color="#63e2b7"
size="24"
/>
<n-nimbus-icon
type="ban"
size="24"
/>
</div>
<div class="n-doc-section__source">
<textarea>
/**
* Valid type: share
* Valid type: share, ban
*/
<n-nimbus-icon
type="share"
color="#63e2b7"
size="24"
/></textarea>
/>
<n-nimbus-icon
type="ban"
size="24"
/>
<style lang="scss" scoped>
.n-nimbus-icon-ban /deep/ g {
fill: red;
transition: fill .3s ease-in-out;
}
.n-nimbus-icon-ban:hover /deep/ g {
fill: green;
}
</style>
</textarea>
</div>
</div>
</div>
@ -49,3 +67,14 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.n-nimbus-icon-ban /deep/ g {
fill: red;
transition: fill .3s ease-in-out;
}
.n-nimbus-icon-ban:hover /deep/ g {
fill: green;
}
</style>

43
packages/nimbus/Icon/src/icons/ban.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
<title>ban</title>
<g
id="Layer_2"
data-name="Layer 2"
:fill="color"
>
<g
id="Layer_1-2"
data-name="Layer 1"
>
<g id="Page-1">
<g id="Pods---Form---06-30-2019-Copy-10">
<g id="Group-17">
<g id="Disabled---SVG-Icon">
<path
id="Shape"
class="cls-1"
d="M50,0A50,50,0,1,0,85.36,14.64,50,50,0,0,0,50,0Zm0,89.58A39.59,39.59,0,0,1,18.19,26.44L73.56,81.81A39.41,39.41,0,0,1,50,89.58Zm31.81-16L26.44,18.19A39.59,39.59,0,0,1,81.81,73.56Z"
/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'black'
}
}
}
</script>

53
packages/nimbus/Icon/src/icons/share.vue
View File

@ -2,31 +2,46 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
><title>share</title><g
id="Layer_2"
data-name="Layer 2"
><g
id="Layer_1-2"
:fill="color"
data-name="Layer 1"
><g id="Symbols"><g id="New-Page"><g
id="noun_new-tab_1167424"
data-name="noun new-tab 1167424"
><path
id="Path"
class="cls-1"
d="M2.94,16h8.12A2.93,2.93,0,0,0,14,13.06v-5a.66.66,0,0,0-.68-.68h0a.66.66,0,0,0-.67.68v5a1.58,1.58,0,0,1-1.59,1.59H2.94a1.58,1.58,0,0,1-1.59-1.59V4.94A1.58,1.58,0,0,1,2.94,3.35h5a.66.66,0,0,0,.68-.67A.66.66,0,0,0,7.9,2h-5A2.93,2.93,0,0,0,0,4.94H0v8.12A2.93,2.93,0,0,0,2.94,16Z"
/><path
class="cls-1"
d="M16,5V.72a.34.34,0,0,0,0-.14s0,0,0,0,0,0,0-.06,0,0,0-.07a.08.08,0,0,0,0-.05.86.86,0,0,0-.19-.19l0,0a.18.18,0,0,0-.14-.09l-.07,0-.14,0H11a.68.68,0,0,0-.69.7.69.69,0,0,0,.69.7H13.6L7.21,7.81a.69.69,0,0,0,1,1L14.6,2.4V5a.69.69,0,0,0,.7.69h0A.73.73,0,0,0,16,5Z"
/></g></g></g></g></g></svg>
>
<title>share</title>
<g
id="Layer_2"
data-name="Layer 2"
:fill="color"
>
<g
id="Layer_1-2"
data-name="Layer 1"
>
<g id="Symbols">
<g id="New-Page">
<g
id="noun_new-tab_1167424"
data-name="noun new-tab 1167424"
>
<path
id="Path"
class="cls-1"
d="M2.94,16h8.12A2.93,2.93,0,0,0,14,13.06v-5a.66.66,0,0,0-.68-.68h0a.66.66,0,0,0-.67.68v5a1.58,1.58,0,0,1-1.59,1.59H2.94a1.58,1.58,0,0,1-1.59-1.59V4.94A1.58,1.58,0,0,1,2.94,3.35h5a.66.66,0,0,0,.68-.67A.66.66,0,0,0,7.9,2h-5A2.93,2.93,0,0,0,0,4.94H0v8.12A2.93,2.93,0,0,0,2.94,16Z"
/>
<path
class="cls-1"
d="M16,5V.72a.34.34,0,0,0,0-.14s0,0,0,0,0,0,0-.06,0,0,0-.07a.08.08,0,0,0,0-.05.86.86,0,0,0-.19-.19l0,0a.18.18,0,0,0-.14-.09l-.07,0-.14,0H11a.68.68,0,0,0-.69.7.69.69,0,0,0,.69.7H13.6L7.21,7.81a.69.69,0,0,0,1,1L14.6,2.4V5a.69.69,0,0,0,.7.69h0A.73.73,0,0,0,16,5Z"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String
type: String,
default: 'black'
}
}
}

19
packages/nimbus/Icon/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<i
:class="`n-nimbus-icon n-nimbus-${type}-icon`"
:class="`n-nimbus-icon n-nimbus-icon-${type}`"
:style="styles"
v-on="$listeners"
>
@ -8,16 +8,22 @@
v-if="type==='share'"
:color="color"
/>
<ban-icon
v-else-if="type==='ban'"
:color="color"
/>
<span v-else>icon-type is invalid</span>
</i>
</template>
<script>
import shareIcon from './icons/share'
import banIcon from './icons/ban'
export default {
name: 'NNimbusIcon',
components: {
shareIcon
shareIcon,
banIcon
},
props: {
type: {
@ -46,4 +52,13 @@ export default {
}
}
}
// <style>
// .n-nimbus-icon svg:hover g {
// fill:blue;
// }
// .n-nimbus-icon svg g {
// transition: fill .3s ease-in-out;
// fill:red;
// }
// </style>
</script>

3
styles/NimbusIcon.scss
View File

@ -5,4 +5,7 @@
text-align: center;
display: inline-block;
position: relative;
svg {
pointer-events: none;
}
}

4
think.md
View File

@ -7,4 +7,6 @@ npm run dev
# git problem...
我的锅...远程分支没设定好，推得哪个自己都不知道。
# test 时候 vue v-model 产生的效果必须在 $nextTick() 之后才会产生，虽然它声称自己是同步的...
我的锅，忘了为啥了。确实是同步的，是我没有考虑到v-model这东西应该用什么方法测试。
我的锅，忘了为啥了。确实是同步的，是我没有考虑到v-model这东西应该用什么方法测试。
# Vue 的深度选择器出了问题
a >>> b 被编译成了 a > > > b