Compare commits
2 Commits
b6275ec636
...
973ce29ac7
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
973ce29ac7 | ||
|
|
79772ff208 |
@@ -102,7 +102,6 @@
|
|||||||
}
|
}
|
||||||
window.addEventListener('resize', onResize)
|
window.addEventListener('resize', onResize)
|
||||||
onResize()
|
onResize()
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import MessageContainer from "./chat/MessageContainer.js"
|
|||||||
import ContactsListItem from "./main/ContactsListItem.js"
|
import ContactsListItem from "./main/ContactsListItem.js"
|
||||||
import RecentsListItem from "./main/RecentsListItem.js"
|
import RecentsListItem from "./main/RecentsListItem.js"
|
||||||
import useEventListener from './useEventListener.js'
|
import useEventListener from './useEventListener.js'
|
||||||
|
import ShadowInner from './ShadowInner.js'
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [recentsList, setRecentsList] = React.useState([
|
const [recentsList, setRecentsList] = React.useState([
|
||||||
@@ -168,7 +169,8 @@ export default function App() {
|
|||||||
// 分割线
|
// 分割线
|
||||||
}
|
}
|
||||||
<div style={{
|
<div style={{
|
||||||
height: 'calc(var(--whitesilk-window-height) - 16px)',
|
// 我们删除了 body 的padding 因此不需要再 calc 了
|
||||||
|
height: 'var(--whitesilk-window-height)',
|
||||||
marginRight: '10px',
|
marginRight: '10px',
|
||||||
}}>
|
}}>
|
||||||
<mdui-divider vertical></mdui-divider>
|
<mdui-divider vertical></mdui-divider>
|
||||||
@@ -193,6 +195,7 @@ export default function App() {
|
|||||||
<div>
|
<div>
|
||||||
<MessageContainer style={{
|
<MessageContainer style={{
|
||||||
height: '100%',
|
height: '100%',
|
||||||
|
paddingBottom: '20px',
|
||||||
}}>
|
}}>
|
||||||
<Message
|
<Message
|
||||||
nickName="Fey"
|
nickName="Fey"
|
||||||
@@ -239,6 +242,40 @@ export default function App() {
|
|||||||
Test
|
Test
|
||||||
</Message>
|
</Message>
|
||||||
</MessageContainer>
|
</MessageContainer>
|
||||||
|
{
|
||||||
|
// 输入框
|
||||||
|
}
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingBottom: '0.1rem',
|
||||||
|
paddingTop: '0.1rem',
|
||||||
|
height: '4rem',
|
||||||
|
position: 'sticky',
|
||||||
|
bottom: '0',
|
||||||
|
backgroundColor: 'rgb(var(--mdui-color-background))',
|
||||||
|
}}>
|
||||||
|
<mdui-text-field variant="outlined" placeholder="喵呜~">
|
||||||
|
<mdui-button-icon slot="end-icon" icon="more_vert"></mdui-button-icon>
|
||||||
|
</mdui-text-field>
|
||||||
|
<mdui-button-icon icon="send" style={{
|
||||||
|
marginTop: '0.75rem',
|
||||||
|
marginBottom: '0.75rem',
|
||||||
|
marginLeft: '0.75rem',
|
||||||
|
marginRight: '0.4rem',
|
||||||
|
}}></mdui-button-icon>
|
||||||
|
</div>
|
||||||
|
{/* <mdui-top-app-bar style={{
|
||||||
|
position: 'sticky',
|
||||||
|
bottom: '0',
|
||||||
|
}}>
|
||||||
|
<mdui-button-icon icon="menu"></mdui-button-icon>
|
||||||
|
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
|
||||||
|
<div style={{
|
||||||
|
flexGrow: 1,
|
||||||
|
}}></div>
|
||||||
|
<mdui-button-icon icon="more_vert"></mdui-button-icon>
|
||||||
|
</mdui-top-app-bar> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user