I am using Ant Design with React. Ant Design has a menu component: https://ant.design/components/menu/
Is it possible to make the menu uncollapsable/unfoldable? I read the documentation, and there was no parameter to turn off folding/collapsing.
I know I'm coming late to the party but for other people struggling with this - there is an undocumented (as far as I could tell from official docs) prop of Menu component called disabledOverflow. Setting it to true solved it for me.
Kudos to VS Code editor, it suggested this property to me and saved my day!
I made it work by including a min-width style object to the Menu
<Menu
theme="dark"
mode="horizontal"
style={{minWidth: '800px'}}
>
...
</Menu>
Antd Inline Menu This gives you a menu that does not collapse.
Moreover it is only collapsible when you give the
inlineCollapsed={this.state.collapsed}
props to Menu Component
Related
I'm working with Ant design table component : https://ant.design/components/table/#components-table-demo-row-selection.
I'm trying to implement the accessibility features in my table component, but the table component doesn't have the configuration for accessibility. Also the table caption tag is missing from the component which is required for screen readers.
Also for adding the aria attributes to the checkboxes/radio for row selection, I have to use getCheckboxProps property of rowSelection prop.
<Table
rowSelection={{
type: "checkbox",
getCheckboxProps: (record) => ({
"aria-label": "row selection"
})
}}
columns={columns}
dataSource={data}
/>
But this method does not add the aria attribute to the checkbox in header for selection all rows.
codesandbox link for above example : https://codesandbox.io/s/selection-antd41610-forked-qpfow?file=/index.js
any way to make this table component accessible friendly?
I don't know the exact solution to solve that problem. However, In github
Somebody asked the same question as you and they discussed a lot. I will leave link below you can check it too.
I am using antd and bootstrap together. I haven't tried yet but I think you can implement accessibility of bootstrap to antd table. I know that sounds silly but maybe this will work you can't know if you don't try. I am a beginner react coder btw so I just tried to help as much as I can. I hope this link will help. Greetings
https://github.com/ant-design/ant-design/issues/22343
I am using React and Semantic UI for my website and I'm looking to create a modal popup to provide some action items on the page.
Currently, with Semantic's Modal, you must choose between three dimmer options (Default, inverted and blurring). In my case, I want the pop-up to appear, but I don't want ANY overlay. The page behind the model should appear as normal. Strangely, this isn't easy/obvious to implement.
On my page, I have the following example model code.
<Modal dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>Some contents.</p>
</Modal.Description>
</Modal.Content>
</Modal>
The three options (default,inverted and blur) obviously don't work.
I have tried using styling to set the background color to transparent and other optoins, but nothing seems to work.
<Modal style={{backgroundColor: "transparent"}} dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
I know there must be an easy solution here..what is it?
Thx for your help.
Is used to be possible to set dimmer={false}, but this is deprecated (see link below) according to the documentation, and you will need to use styling in order to make it transparent, so your solution is close to what you need to do. If you inspect the rendered Modal, you'll see that you need to override the background-color of the .ui.dimmer css class. You should be able to do that in your component's stylesheet.
https://github.com/Semantic-Org/Semantic-UI-React/pull/2882
I have a Popover menu with material-ui and I have noticed that in default mode the library puts a layer to capture outside clicks to close the menu. I was wondering is there a way to change the background color or assign a class to this layer to give it some style?
Thanks
I don't see any possibilities in v0.19.3 (Popover.js component), but looks like the new version (they are currently working on, still in beta) will have such possibility:
<Popover
backdropInvisible={false}
backdropClassName="MyBackDropClass"
...
>
...
</Popover>
Also it looks like it will be possible to provide your own backdrop component or provide transition delay.
If the project you're working on can rely on beta version of material-ui, just test it out:
npm install material-ui#next
I am studying about Material-UI but I couldn't find in the Demo (example) anything similar with what they have in their website.
My problem is I want to copy this example, so I am trying to reproduce the container (not the content) using the <Card /> component, but it doesn't reproduce very well, so I want to know if there is a specific component to use.
If I understand your question correctly, you're looking for a way to emulate the collapsible demo container that reveals the code behind the demos in Material-UI's documentation (and you want to do so using Material-UI components).
That specific container is implemented in the docs site as an internal component and is composed of Material-UI components with a reliance on JSS for styling. It is also open-source, so looking at the code should help you.
Here is an excerpt from the render method:
<div className={classes.root}>
<IconButton onClick={this.handleCodeButtonClick} className={classes.codeButton}>
<CodeIcon />
</IconButton>
<Collapse in={this.state.codeOpen}>
<MarkdownElement className={classes.code} text={`\`\`\`js\n${raw}\n\`\`\``} />
</Collapse>
<div className={classes.demo} data-mui-demo={name}>
<DemoComponent />
</div>
</div>
This is a component that is used for demos in the Material-UI documentation. It is little more than a styled div with an IconButton.
The MarkdownElement contains the code that is toggled by the code button presented at the top-right of the container. It is wrapped in a Collapse component, which handles the animated transition that takes place when the visibility of that code is toggled.
The DemoComponent is where the demo is presented.
All style is handled using JSS, defined in a stylesheet object.
I'm sure you can build this into a Card by following this pattern. It should be pretty straight-forward, something like adding an action to the CardHeader that triggers a state change and toggles whatever you're looking to expand.
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle