-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: sidenavbar, pagination, tabbar , badge, avatar
- Loading branch information
Showing
53 changed files
with
3,043 additions
and
237 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| <script lang="ts"> | ||
| export default { | ||
| props: {}, | ||
| setup() { | ||
| const handleClick = () => { | ||
| console.log('触发点击头像') | ||
| } | ||
| return { handleClick } | ||
| }, | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="demo full avatar-demo"> | ||
| <h2 class="title"> | ||
| 支持三种尺寸：small、normal、large | ||
| </h2> | ||
| <nut-cell> | ||
| <nut-avatar size="large"> | ||
| <image | ||
| class="w-60px h-60px" | ||
| mode="scaleToFill" | ||
| src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" | ||
| /> | ||
| </nut-avatar> | ||
| <nut-avatar size="normal"> | ||
| <img | ||
| class="w-40px h-40px" | ||
| src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" | ||
| > | ||
| </nut-avatar> | ||
| <nut-avatar size="small"> | ||
| <img | ||
| class="w-30px h-30px" | ||
| src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" | ||
| > | ||
| </nut-avatar> | ||
| </nut-cell> | ||
| <h2 class="title"> | ||
| 支持两种形状：square、round | ||
| </h2> | ||
| <nut-cell> | ||
| <nut-avatar shape="square"> | ||
| <nut-icon name="my" /> | ||
| </nut-avatar> | ||
| <nut-avatar shape="round"> | ||
| <nut-icon name="my" /> | ||
| </nut-avatar> | ||
| </nut-cell> | ||
| <h2 class="title"> | ||
| 支持三种类型：图片、Icon 以及字符 | ||
| </h2> | ||
| <nut-cell> | ||
| <nut-avatar> | ||
| <img | ||
| class="w-30px h-30px" | ||
| src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" | ||
| > | ||
| </nut-avatar> | ||
| <nut-avatar><nut-icon name="my" /></nut-avatar> | ||
| <nut-avatar>王</nut-avatar> | ||
| </nut-cell> | ||
| <h2 class="title"> | ||
| Icon 和字符型可以自定义颜色及背景色 | ||
| </h2> | ||
| <nut-cell> | ||
| <nut-avatar class="demo-avatar" bg-color="#FA2C19"> | ||
| <nut-icon name="my" color="#fff" /> | ||
| </nut-avatar> | ||
| <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)"> | ||
| 小明 | ||
| </nut-avatar> | ||
| </nut-cell> | ||
| <h2 class="title"> | ||
| 带徽标的头像 | ||
| </h2> | ||
| <nut-cell> | ||
| <nut-badge value="8"> | ||
| <nut-avatar shape="square"> | ||
| <nut-icon name="my" /> | ||
| </nut-avatar> | ||
| </nut-badge> | ||
| <nut-badge dot> | ||
| <nut-avatar shape="square"> | ||
| <nut-icon name="my" /> | ||
| </nut-avatar> | ||
| </nut-badge> | ||
| </nut-cell> | ||
| <h2 class="title"> | ||
| 头像组合展现 | ||
| </h2> | ||
| <nut-cell> | ||
| <nut-avatar-group span="-4"> | ||
| <nut-avatar> | ||
| <img | ||
| class="w-30px h-30px" | ||
| src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" | ||
| > | ||
| </nut-avatar> | ||
| <nut-avatar><nut-icon name="my" /></nut-avatar> | ||
| <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)"> | ||
| 小明 | ||
| </nut-avatar> | ||
| </nut-avatar-group> | ||
| </nut-cell> | ||
|
|
||
| <nut-cell> | ||
| <nut-avatar-group max-count="3" max-color="#fff" max-bg-color="#498ff2"> | ||
| <nut-avatar> | ||
| <img | ||
| class="w-30px h-30px" | ||
| src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" | ||
| > | ||
| </nut-avatar> | ||
| <nut-avatar><nut-icon name="my" /></nut-avatar> | ||
| <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)"> | ||
| 小明 | ||
| </nut-avatar> | ||
| <nut-avatar><nut-icon name="my" /></nut-avatar> | ||
| </nut-avatar-group> | ||
| </nut-cell> | ||
| <h2 class="title"> | ||
| 组合头像可控制层级方向 | ||
| </h2> | ||
| <nut-cell> | ||
| <nut-avatar-group max-count="3" z-index="right" max-content="..."> | ||
| <nut-avatar> | ||
| <img | ||
| class="w-30px h-30px" | ||
| src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" | ||
| > | ||
| </nut-avatar> | ||
| <nut-avatar><nut-icon name="my" /></nut-avatar> | ||
| <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)"> | ||
| 小明 | ||
| </nut-avatar> | ||
| <nut-avatar><nut-icon name="my" /></nut-avatar> | ||
| </nut-avatar-group> | ||
| </nut-cell> | ||
|
|
||
| <h2 class="title"> | ||
| 点击头像触发事件 | ||
| </h2> | ||
| <nut-cell> | ||
| <nut-avatar @click="handleClick"> | ||
| <nut-icon name="my" /> | ||
| </nut-avatar> | ||
| </nut-cell> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss"> | ||
| .avatar-demo { | ||
| .nut-cell { | ||
| align-items: flex-end; | ||
| border-radius: 0; | ||
| & > view { | ||
| margin-right: 30px; | ||
| } | ||
| } | ||
| .demo-avatar { | ||
| color: #fff; | ||
| } | ||
| } | ||
| </style> | ||
|
|
||
| <route lang="json"> | ||
| { | ||
| "style": { | ||
| "navigationBarTitleText": "Avatar" | ||
| } | ||
| } | ||
| </route> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| <script lang="ts" setup> | ||
| </script> | ||
|
|
||
| <template> | ||
| <view class="demo badge-demo"> | ||
| <h2 class="title"> | ||
| 基础用法 | ||
| </h2> | ||
| <nut-row> | ||
| <nut-badge :value="8"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge :value="76"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge value="NEW"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge value="NEW" bubble> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge dot> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| </nut-row> | ||
| <h2 class="title"> | ||
| 最大值 | ||
| </h2> | ||
| <nut-row> | ||
| <nut-badge :value="200" :max="9"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge :value="200" :max="20"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge :value="200" :max="99"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| </nut-row> | ||
|
|
||
| <h2 class="title"> | ||
| 自定义颜色 | ||
| </h2> | ||
| <nut-row> | ||
| <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| </nut-row> | ||
|
|
||
| <h2 class="title"> | ||
| 自定义徽标内容 | ||
| </h2> | ||
| <nut-row> | ||
| <nut-badge> | ||
| <template #icon> | ||
| <nut-icon name="check" color="#1919" size="12px" /> | ||
| </template> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge> | ||
| <template #icon> | ||
| <nut-icon name="link" color="#ffffff" size="12px" /> | ||
| </template> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge> | ||
| <template #icon> | ||
| <nut-icon name="download" color="#ffffff" size="12px" /> | ||
| </template> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| </nut-row> | ||
|
|
||
| <h2 class="title"> | ||
| 自定义位置 | ||
| </h2> | ||
| <nut-row> | ||
| <nut-badge :value="8" top="5" right="5"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge :value="76" top="10" right="10"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| <nut-badge value="NEW"> | ||
| <nut-avatar shape="square" /> | ||
| </nut-badge> | ||
| </nut-row> | ||
|
|
||
| <h2 class="title"> | ||
| 独立展示 | ||
| </h2> | ||
| <nut-row> | ||
| <nut-badge :value="8" /> | ||
| <nut-badge :value="76" /> | ||
| <nut-badge value="NEW" /> | ||
| </nut-row> | ||
| </view> | ||
| </template> | ||
|
|
||
| <style lang="scss"> | ||
| .badge-demo { | ||
| .nut-badge { | ||
| margin-top: 20px; | ||
| margin-right: 40px; | ||
| } | ||
| } | ||
| </style> | ||
|
|
||
| <route lang="json"> | ||
| { | ||
| "style": { | ||
| "navigationBarTitleText": "Badge" | ||
| } | ||
| } | ||
| </route> |
Oops, something went wrong.