提交 c6c19b9e 编写于 作者: richard_1015's avatar richard_1015

style: modify button type

上级 5c962a16
......@@ -2,14 +2,14 @@
<div class="demo full">
<h2>基础用法</h2>
<nut-drag :style="{ top: '100px', left: '8px' }">
<div class="drag-demo">触摸移动</div>
<nut-button type="primary">触摸移动</nut-button>
</nut-drag>
<h2 style="top:30px;position:relative">限制拖拽方向</h2>
<nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
<div class="drag-demo">只能X轴拖拽</div>
<nut-button type="primary">只能X轴拖拽</nut-button>
</nut-drag>
<nut-drag direction="y" :style="{ top: '200px', right: '50px' }">
<div class="drag-demo">只能Y轴拖拽</div>
<nut-button type="primary">只能Y轴拖拽</nut-button>
</nut-drag>
<h2 style="top:70px;position:relative">自动吸边</h2>
<nut-drag
......@@ -17,7 +17,7 @@
:attract="true"
:style="{ top: '300px', left: '8px' }"
>
<div class="drag-demo">拖动我</div>
<nut-button type="primary">拖动我</nut-button>
</nut-drag>
</div>
</template>
......@@ -31,28 +31,4 @@ export default createDemo({
});
</script>
<style lang="scss" scoped>
.drag-demo {
width: 148px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(
135deg,
rgba(250, 44, 25, 1) 0%,
rgba(250, 63, 25, 1) 45%,
rgba(250, 89, 25, 1) 83%,
rgba(250, 100, 25, 1) 100%
);
border-radius: 24px;
color: #fff;
}
.drag {
width: 100px;
height: 100px;
display: inline-block;
background: red;
transform: translate3d(0, 0, 1px);
}
</style>
<style lang="scss" scoped></style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册