Actions
Combination of toolbar and a dropdown menu. Items in toolbar will only be shown if there is enough space. Otherwise they will be visible in the dropdown menu. JavaScript detects if space is changing and rearranges. IMPORTANT: As of right now, children you pass will be rendered twice. Once in the toolbar and once in the dropdown.
Examples
Basic usage
Example
Live demo
Code
import { useState } from "react"
import { Actions } from "blue-react"
import { MenuItem } from "blue-react"
import { EmojiHeartEyesFill } from "react-bootstrap-icons"
export default function BasicUsageExample() {
const [width, setWidth] = useState(392)
return (
<>
<div className="border" style={{ width: `${width}px` }}>
<Actions>
<MenuItem label="Child 1" icon={<>🌍</>} />
<MenuItem label="Child 2" icon={<>🌑</>} />
<MenuItem label="Child 3" icon={<>☀️</>} />
<MenuItem label="Child 4" icon={<>🚀</>} />
<MenuItem label="Child 5" icon={<>🌌</>} />
<MenuItem icon={<EmojiHeartEyesFill />} label="John Boy">
<MenuItem icon={<EmojiHeartEyesFill />} label="I am a child item" />
</MenuItem>
</Actions>
</div>
<label className="mt-3">
<span className="form-label">Change width</span>
<input
type="range"
className="form-range"
min={100}
max={1200}
value={width}
onChange={({ target }) => {
setWidth(parseInt(target.value))
}}
/>
</label>
</>
)
}
Inside layout header
Example
Live demo
Code
import { Actions } from "blue-react"
import { HeaderTitle } from "blue-react"
import { MenuItem } from "blue-react"
import { SimpleLayout } from "blue-react"
export default function InsideLayoutHeaderDemo() {
return (
<div
style={{
background: "var(--blue-app-bg)",
width: "400px"
}}
>
<SimpleLayout
header={
<>
<HeaderTitle>My page</HeaderTitle>
<Actions>
<MenuItem label="Child 1" icon={<>🌍</>} />
<MenuItem label="Child 2" icon={<>🌑</>} />
<MenuItem label="Child 3" icon={<>☀️</>} />
<MenuItem label="Child 4" icon={<>🚀</>} />
<MenuItem label="Child 5" icon={<>🌌</>} />
</Actions>
</>
}
style={{ height: "400px" }}
/>
</div>
)
}
Props
| Name | Description | Type | Default |
|---|