In https://github.com/ant-design/ant-design, how it the recommend method of adding spacing (margin) between buttons?
In semantic-ui, default margins defined within the library CSS. In bootstrap, one can use button groups to add spacing between buttons.
Is adding custom css or inline css the recommended way of achieving margins between buttons? Ideally, I want avoid writing any css when using a css framework
You can use https://ant.design/components/space/ to put spaces between your buttons or any other elements.
You can achieve that by simply wrapping your <Button> with <Space>
import { Button, Space } from 'antd';
<Space>
<Button>Default</Button>
<Button type="primary">Primary</Button>
</Space>
Two quick and dirty tricks
If you just want a tiny space in between, you can change
</Button><Button>
or
</Button>
<Button>
into
</Button> <Button>
and it will solve the problem
Alternatively put a {' '} in between, e.g. </Button> {' '} <Button>
I use styled components and components become really as components no global css, images and icons.
I define styles like this:
import styled from 'styled-components'
export default styled.div`
> button + button {
margin-left: 16px;
}
`
usually in a separate file for example: Controls.js
Then I use it as a component where it knows how to place the buttons (space between is 16px)
import React from 'react'
import Controls from './Controls'
import {Button} from 'antd'
export const Form = () =>
<Controls>
<Button type="primary" icon="check">
Accpet
</Button>
<Button type="danger" icon="close">
Cencel
</Button>
</Controls>
You can use ant design grid system.
Then use gutter property for Row component. That will add spacing between grids.
Put your buttons inside of a div. It will act as a button group.
Related
I use react bootstrap tabs component but when i use a custom css within this nav-link with a custom parent class indicator its not working.
<Tabs
defaultActiveKey="signup_renter"
id="uncontrolled-tab-example"
className="mb-3 approval-details-tab"
>
<Tab eventKey="signup_renter" title="About Car">
<div className="signup-renter">
this is signup renter tab
</div>
</Tab>
<Tab eventKey="signup_host" title="Details">
<div className="signup-host">
this is signup host tab
</div>
</Tab>
</Tabs>
Here is my css parent indicator:
.approval-details-tab > .nav-tabs .nav-link.active::before {
content: "";
background: #524eb7;
width: 30px;
height: 3px;
position: absolute;
top: 63% !important;
}
I use .approval-details-tab class as a parent class of nav-tabs but without parent class it works. but i need a parent class for separate design.
From the React-bootstrap documentation:
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included CSS. However, some stylesheet is required to use these components.
How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
CDN link: https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css
Add CDN at index.html file inside tag like this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"/>
Now, to override any class of `react-bootstrap', you have to use "!important" on your custom css. If you want to override the background color, use "!important" beside that css property.
Example:
.approval-details-tab{
background: #524eb7 !important;
}
To get more clear understanding of your problem, please mention which css-property you want to override of a bootstrap class. Thanks!
In React, the parent-children relationship is a bit complicated. Although a component in React seemed to be the direct child of another component, when translated to normal HTML, it doesn't. For example, take a look at this code
<div className="parent">
<Tabs className="children">
some other components inside
</Tabs>
</div>
Does div the direct parent of the component Tabs? It is not. The above code, when being translated to normal HTML component would look roughly like this
<div className="parent">
<div>
<div className="children">
some other components inside
</div>
</div>
</div>
As you can see, the element that bears the className children is no longer the direct child of the parent component. That is why in React, it is not a good idea to style components using parent-direct children relationship.
If you just want to do this way of styling because you want to avoid naming conflict, you can try out CSS Module
If you want to read the detail on how the Tabs component behave, you can read the source code
I'm building a form with many TextField elements.
In the form, there are other elements than TextField elements along with TextField elements.
The problem is that they look quite different from TextFields.
Take a look at the example below.
https://codesandbox.io/s/material-ui-demo-forked-p8s87?file=/demo.js:488-520
As you can see, InputLabel doesn't work well with the element other than Input, while FormLabel doesn't look like the right alternative to InputLabel.
What I exactly want is to replace Input as Link, other elements staying the same as with Input. What is the best practice to achieve this?
Main difference with InputLabel and FormLabel is that the InputLabel component adds an animation for us. The FormLabel component does not.
There are four different inputs that we can use in Material-UI, InputBase Input OutlinedInput and FilledInput.
The FormControl component in Material-UI is a wrapper class for an input component. It is good to use a form control when you are using any input components in Material-UI, like a checkbox, radio button, or a switch.
Hence it is good practice to use FormControl with TextField if you don't need some animation on your input control in form like "on focus", "leave focus" etc.
For more details understanding refere this link
Why dont you use Button
You can use it like this:
import { Button } from "#material-ui/core";
<FormControl>
<FormLabel shrink>hi</FormLabel>
<Button color="primary" href="/link">hello</Button>
</FormControl>
<FormControl>
<FormLabel shrink>hi</FormLabel>
<Button variant="contained" color="primary" href="/link">hello</Button>
</FormControl>
<FormControl>
<FormLabel shrink>hi</FormLabel>
<Button variant="outlined" color="primary" href="/link">hello</Button>
</FormControl>
You can play around with color & variant but it'll give you a nice look for Link
Personally recommend you to check out Rsuite Library for other such UI components.
I use ngbootstrap for popovers, but I want to override all the default styles it comes with. I have a form that should be displayed as a popover on a button click which has its own styles.
When I use [ngbPopover] it renders an element with the default class of 'popover' applied, instead of overriding each of its properties to align with my expectation, is it possible to remove it all together while rendering on the page and then I could use a custom class with popoverClass property.
<ng-template #popContent><user-form></user-form></ng-template>
<button type="button" class="btn btn-outline-secondary" [ngbPopover]="popContent">
I've got markup and bindings in my popover!
</button>
Looking into the popover source code I see lots of classes nailed without a chance to change them. I suppose the only promising approach would be exclude the css for the popover component from the import.
How to do it depends on how you import the Bootstrap css
I am trying to style an HTML element inside the component from the Fluent UI React library.
What I want to do is put the "On" / "Off" text to the left of the toggle rather than on the left. When I look at my "compiled" code I can see that the component is translated into:
<div>
<label></label>
<div id="target-me">
<button>
<span></span>
</button>
<label></label>
</div>
</div>
I want to add an inline-flex to the target-me div and set flex-flow property to row-reverse in order to get the button element to the right of the label element. The problem is, I can't manage to target the "target-me" div in my code.
How can I achieve this without rewriting a custom component ?
Thanks!
Ok, well I found the answer to my own question so here it is:
<Toggle styles={{ container: { flexFlow: "row-reverse" } }} />
Essentially you can target different parts of the component (root, container, label..) by using the styles property. Use VS Code's Intellisense to find out what elements you can target inside the component and then just give it some regular CSS-in-JS that you want.
I am trying to add a custom css class directive to my button, but whenever I do that, the angular material design goes away and the button goes back to its default ugly state. How can I make sure that my custom css class gets added to the button without it removing the mat-buutton effects?
<button
mat-button
[class]="todoItems.completed ? 'delete': null"
(click)="deleteTodo(todoItems._id)"
[disabled]="!todoItems.completed">
<mat-icon >delete</mat-icon>
</button>
Here is the css
.delete:hover {
color: red
}
I want my class to be applied only if the completed property is true and when that property is true the delete button will turn red when I hover on it.
The hovering part works fine but the problem I have is that the material design disappears and it turns into the default style of button
mat-button applies its own css classes to the <button> at run time.
When you are doing [class]="todoItems.completed ? 'delete': null" it is hard overridding these classes.
To append your class to the existing ones, you need to use ngClass instead.