Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 84d97c48 编写于 作者: O oasis-cloud
浏览文件
操作

docs: popover demo 增加白色底

上级 93f9eb3e
隐藏空白更改
内联 并排
Showing with 236 addition and 211 deletion
src/packages/popover/demo.scss
浏览文件 @ 84d97c48
......@@ -24,3 +24,11 @@
.customContent .popover-content {
width: 200px;
}
.demo-cell-popove {
flex-wrap: wrap;
}
.nut-popover {
height: 38px;
}
src/packages/popover/demo.taro.tsx
浏览文件 @ 84d97c48
import React, { useRef, useState } from 'react'
import { Button, Icon, Popover } from '@/packages/nutui.react.taro'
import { Button, Icon, Popover, Cell } from '@/packages/nutui.react.taro'
import '@/packages/popover/demo.scss'
interface List {
......@@ -130,92 +130,98 @@ const BadgeDemo = () => {
<>
<div className="demo">
<h2>基础用法</h2>
<Popover
visible={lightTheme}
onClick={() => {
lightTheme ? setLightTheme(false) : setLightTheme(true)
}}
list={itemList}
style={{ marginRight: '30px' }}
>
<Button type="primary" shape="square">
明朗风格
</Button>
</Popover>
<Popover
visible={darkTheme}
theme="dark"
onClick={() => {
darkTheme ? setDarkTheme(false) : setDarkTheme(true)
}}
list={itemList}
>
<Button type="primary" shape="square">
暗黑风格
</Button>
</Popover>
<Cell>
<Popover
visible={lightTheme}
onClick={() => {
lightTheme ? setLightTheme(false) : setLightTheme(true)
}}
list={itemList}
style={{ marginRight: '30px' }}
>
<Button type="primary" shape="square">
明朗风格
</Button>
</Popover>
<Popover
visible={darkTheme}
theme="dark"
onClick={() => {
darkTheme ? setDarkTheme(false) : setDarkTheme(true)
}}
list={itemList}
>
<Button type="primary" shape="square">
暗黑风格
</Button>
</Popover>
</Cell>
<h2>选项配置</h2>
<Popover
visible={showIcon}
theme="dark"
onClick={() => {
showIcon ? setShowIcon(false) : setShowIcon(true)
}}
list={iconItemList}
style={{ marginRight: '30px' }}
>
<Button type="primary" shape="square">
展示图标
</Button>
</Popover>
<Popover
visible={disableAction}
onClick={() => {
disableAction ? setDisableAction(false) : setDisableAction(true)
}}
list={itemListDisabled}
onChoose={chooseHandle}
>
<Button type="primary" shape="square">
禁用选项
</Button>
</Popover>
<Cell>
<Popover
visible={showIcon}
theme="dark"
onClick={() => {
showIcon ? setShowIcon(false) : setShowIcon(true)
}}
list={iconItemList}
style={{ marginRight: '30px' }}
>
<Button type="primary" shape="square">
展示图标
</Button>
</Popover>
<Popover
visible={disableAction}
onClick={() => {
disableAction ? setDisableAction(false) : setDisableAction(true)
}}
list={itemListDisabled}
onChoose={chooseHandle}
>
<Button type="primary" shape="square">
禁用选项
</Button>
</Popover>
</Cell>
<h2>自定义内容</h2>
<Popover
visible={customized}
onClick={() => {
customized ? setCustomized(false) : setCustomized(true)
}}
location="bottom-start"
className="customContent"
>
<Button type="primary" shape="square">
自定义内容
</Button>
{customized ? (
<div className="self-content" style={selfContentStyle}>
{selfContent.map((item: any) => {
return (
<div
className="self-content-item"
style={selfContentItem}
key={item.name}
>
<Icon name={item.name} size="15" />
<div className="self-content-desc" style={selfContentDesc}>
{item.desc}
<Cell>
<Popover
visible={customized}
onClick={() => {
customized ? setCustomized(false) : setCustomized(true)
}}
location="bottom-start"
className="customContent"
>
<Button type="primary" shape="square">
自定义内容
</Button>
{customized ? (
<div className="self-content" style={selfContentStyle}>
{selfContent.map((item: any) => {
return (
<div
className="self-content-item"
style={selfContentItem}
key={item.name}
>
<Icon name={item.name} size="15" />
<div
className="self-content-desc"
style={selfContentDesc}
>
{item.desc}
</div>
</div>
</div>
)
})}
</div>
) : (
''
)}
</Popover>
)
})}
</div>
) : (
''
)}
</Popover>
</Cell>
<h2 className="demoClass">位置自定义</h2>
<Popover
......@@ -231,26 +237,28 @@ const BadgeDemo = () => {
<div className="brick" />
</Popover>
<div className="customButtonBox">
{customLocation.current.map((location, i) => {
const k = Object.keys(location)[0] as any
const v = Object.values(location)[0]
return (
<Button
key={i}
type="primary"
shape="square"
style={{ width: '160px', marginBottom: '8px' }}
onClick={() => {
setCustomLocationName(k)
setCustomLocationShow(!customLocationShow)
}}
>
{k} 弹出
</Button>
)
})}
</div>
<Cell className="demo-cell-popover">
<div className="customButtonBox">
{customLocation.current.map((location, i) => {
const k = Object.keys(location)[0] as any
const v = Object.values(location)[0]
return (
<Button
key={i}
type="primary"
shape="square"
style={{ width: '140px', marginBottom: '8px' }}
onClick={() => {
setCustomLocationName(k)
setCustomLocationShow(!customLocationShow)
}}
>
{k}
</Button>
)
})}
</div>
</Cell>
</div>
</>
)
......
src/packages/popover/demo.tsx
浏览文件 @ 84d97c48
......@@ -3,6 +3,7 @@ import { useTranslate } from '../../sites/assets/locale'
import { Popover } from './popover'
import Button from '@/packages/button'
import Icon from '@/packages/icon'
import Cell from '@/packages/cell'
interface T {
[props: string]: string
......@@ -169,24 +170,24 @@ const BadgeDemo = () => {
flex-wrap: wrap;
justify-content: space-around;
}
.brickBox {
display: flex;
justify-content: center;
margin: 80px 0;
}
.brick {
width: 60px;
height: 60px;
background: #1989fa;
border-radius: 10px;
}
.popover-content {
width: 100px;
}
.customContent .popover-content{
width: 200px;
}
......@@ -197,92 +198,99 @@ const BadgeDemo = () => {
<style>{styles}</style>
<div className="demo">
<h2>{translated.title}</h2>
<Popover
visible={lightTheme}
onClick={() => {
lightTheme ? setLightTheme(false) : setLightTheme(true)
}}
list={itemList}
style={{ marginRight: '30px' }}
>
<Button type="primary" shape="square">
{translated.light}
</Button>
</Popover>
<Popover
visible={darkTheme}
theme="dark"
onClick={() => {
darkTheme ? setDarkTheme(false) : setDarkTheme(true)
}}
list={itemList}
>
<Button type="primary" shape="square">
{translated.dark}
</Button>
</Popover>
<Cell>
<Popover
visible={lightTheme}
onClick={() => {
lightTheme ? setLightTheme(false) : setLightTheme(true)
}}
list={itemList}
style={{ marginRight: '30px' }}
>
<Button type="primary" shape="square">
{translated.light}
</Button>
</Popover>
<Popover
visible={darkTheme}
theme="dark"
onClick={() => {
darkTheme ? setDarkTheme(false) : setDarkTheme(true)
}}
list={itemList}
>
<Button type="primary" shape="square">
{translated.dark}
</Button>
</Popover>
</Cell>
<h2>{translated.title1}</h2>
<Popover
visible={showIcon}
theme="dark"
onClick={() => {
showIcon ? setShowIcon(false) : setShowIcon(true)
}}
list={iconItemList}
style={{ marginRight: '30px' }}
>
<Button type="primary" shape="square">
{translated.showIcon}
</Button>
</Popover>
<Popover
visible={disableAction}
onClick={() => {
disableAction ? setDisableAction(false) : setDisableAction(true)
}}
list={itemListDisabled}
onChoose={chooseHandle}
>
<Button type="primary" shape="square">
{translated.disableAction}
</Button>
</Popover>
<Cell>
<Popover
visible={showIcon}
theme="dark"
onClick={() => {
showIcon ? setShowIcon(false) : setShowIcon(true)
}}
list={iconItemList}
style={{ marginRight: '30px' }}
>
<Button type="primary" shape="square">
{translated.showIcon}
</Button>
</Popover>
<Popover
visible={disableAction}
onClick={() => {
disableAction ? setDisableAction(false) : setDisableAction(true)
}}
list={itemListDisabled}
onChoose={chooseHandle}
>
<Button type="primary" shape="square">
{translated.disableAction}
</Button>
</Popover>
</Cell>
<h2>{translated.content}</h2>
<Popover
visible={customized}
onClick={() => {
customized ? setCustomized(false) : setCustomized(true)
}}
location="bottom-start"
className="customContent"
>
<Button type="primary" shape="square">
{translated.content}
</Button>
{customized ? (
<div className="self-content" style={selfContentStyle}>
{selfContent.map((item: any) => {
return (
<div
className="self-content-item"
style={selfContentItem}
key={item.name}
>
<Icon name={item.name} size="15" />
<div className="self-content-desc" style={selfContentDesc}>
{item.desc}
<Cell>
<Popover
visible={customized}
onClick={() => {
customized ? setCustomized(false) : setCustomized(true)
}}
location="bottom-start"
className="customContent"
>
<Button type="primary" shape="square">
{translated.content}
</Button>
{customized ? (
<div className="self-content" style={selfContentStyle}>
{selfContent.map((item: any) => {
return (
<div
className="self-content-item"
style={selfContentItem}
key={item.name}
>
<Icon name={item.name} size="15" />
<div
className="self-content-desc"
style={selfContentDesc}
>
{item.desc}
</div>
</div>
</div>
)
})}
</div>
) : (
''
)}
</Popover>
)
})}
</div>
) : (
''
)}
</Popover>
</Cell>
<h2 className="demoClass">{translated.title3}</h2>
<Popover
......@@ -297,27 +305,28 @@ const BadgeDemo = () => {
>
<div className="brick" />
</Popover>
<div className="customButtonBox">
{customLocation.current.map((location, i) => {
const k = Object.keys(location)[0] as any
const v = Object.values(location)[0]
return (
<Button
key={i}
type="primary"
shape="square"
style={{ width: '160px', marginBottom: '8px' }}
onClick={() => {
setCustomLocationName(k)
setCustomLocationShow(!customLocationShow)
}}
>
{k} {translated.popup}
</Button>
)
})}
</div>
<Cell className="demo-cell-popover">
<div className="customButtonBox">
{customLocation.current.map((location, i) => {
const k = Object.keys(location)[0] as any
const v = Object.values(location)[0]
return (
<Button
key={i}
type="primary"
shape="square"
style={{ width: '140px', marginBottom: '8px' }}
onClick={() => {
setCustomLocationName(k)
setCustomLocationShow(!customLocationShow)
}}
>
{k}
</Button>
)
})}
</div>
</Cell>
</div>
</>
)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或