Semantic UI React : How to move Button from Left to Right - javascript

I am using semantic UI React . I included semantic UI React Button but default it showing in Left , I want to show it in Right . Someone please help me how I can move semantic button to right .
<Button.Group>
<Button>Cancel</Button>
<Button.Or />
<Button positive>Save</Button>

The beautiful one solution is just to add floated="right" to your Button.Group like that:
<Button.Group floated="right">
<Button>Cancel</Button>
<Button.Or />
<Button positive>Save</Button>
</Button.Group>
You can also check this: https://codesandbox.io/s/n0wzzxxl0m
All the options for Button.Group are provided here: https://react.semantic-ui.com/elements/button/

You can achieve that via wrapping the button group in a container that will align its children to the right via css.
css:
.rightAlign {
display: flex;
justify-content: right;
}
Button component in wrapping container:
import React from "react";
import { Button } from "semantic-ui-react";
const MyButtons = () => {
return (
<div className="rightAlign">
<Button.Group>
<Button>Cancel</Button>
<Button.Or />
<Button positive>Save</Button>
</Button.Group>
</div>
);
};
export default MyButtons;
See it working here: https://codesandbox.io/s/3yqy09k35m?fontsize=14

Related

How can I get top element behavior on children?

Hello thanks for the help in advance. I explain the behavior I want to achieve in react. Here is the sandbox for a better understanding. The behavior of the code is as follows:
There is a div marked with a 1px border and inside it there is a button and another div where it will render an array. Clicking on the button adds that same button to the array and renders it alongside the first one. Multiple clicks on the first button will generate a column of buttons next to the first button. So far so good.
What I want to achieve is that clicking on any of the buttons in the column generates another column of buttons next to the button we click on. And so on. At this point, I'm stuck. Thank you.
import "./styles.css";
import { useState } from "react";
export default function App() {
const [btnCount, setBtnCount] = useState([]);
const style = {
maxWidth: "100px",
display: "flex",
padding: "10px",
border: "solid 1px"
};
function handleAdd() {
setBtnCount(btnCount.concat(btn));
}
const btn = <button onClick={handleAdd}>Click</button>;
return (
<div>
<div style={style}>
<div style={{ margin: "5px" }}>{btn}</div>
<div>
{btnCount.map((e, index) => {
return <div key={index}>{e}</div>;
})}
</div>
</div>
</div>
);
}

How to remove text highlight color with css

I'm building a note editor in which everything is structured in terms of blocks so when the user selects multiple blocks i.e multiple paragraphs I'm showing a blue overlay over the box container of the block similar to notion.so, But what I want to do is when I show the blue overlay I want to remove the highlight color of the text (The blue highlight when you select text) I've tried user select none but it doesn't work as the class gets added afterwards, I've also tried -webkit-tap-highlight-color but it also doesn't seem to work
Demo:
https://www.awesomescreenshot.com/video/4910570?key=905d37aa5750ac2ef7055097c33b6f2b
Sandbox:
https://codesandbox.io/s/react-playground-forked-vgel5?file=/Paragraph.js
import React from "react";
import { Popover } from "antd";
import GrabMenu from "../GrabMenu/GrabMenu";
import grabIcon from "../../icons/noteeditor/grab-icon.svg";
import { useSelected, useSlateStatic } from "slate-react";
import showSelectedHalo from "../../utils/showSelectedHalo";
import getClassNameForStyling from "../../utils/getClassNameForStyling";
const Paragraph = (props) => {
const selected = useSelected();
const editor = useSlateStatic();
return (
<div {...props.attributes} className="paragraph-block block">
<div className="grab-icon-container" contentEditable={false}>
<img
src={grabIcon}
className="grab-icon"
onClick={props.clearSelection}
/>
</div>
// The blue overlay
<div
className={
showSelectedHalo(editor, selected, props.element) || props.allSelected
? "block-selected-halo block-selected"
: "block-selected-halo"
}
contentEditable={false}
></div>
// Text
<p className={`${getClassNameForStyling(props).trim()}`}>
{props.children}
</p>
</div>
);
};
export default Paragraph;
If you want to hide that blue color everywhere use this rule:
::selection {
background-color: transparent;
}
Hope this helped.

Add svg image as icon for Input of Semantic UI

I'm using Input from Semantic UI in order to create a search input:
import React from 'react';
import { Input } from 'semantic-ui-react';
export default ({ placeholder, onChange }) => {
return (
<Input
icon="search"
icon={<img src={searchIcon} />}
iconPosition="left"
placeholder={placeholder}
onChange={onChange}
/>
);
};
It works and looks good.
The problem is that I need to change its icon with an svg image. So the svg is imported in the file and used like this:
import React from 'react';
import { Input } from 'semantic-ui-react';
import searchIcon from '../../assets/icons/searchIcon.svg';
export default ({ placeholder, onChange }) => {
return (
<Input
icon={<img src={searchIcon} />}
iconPosition="left"
placeholder={placeholder}
onChange={onChange}
/>
);
};
The problem is that it puts the icon outside of the input and on the right side of it.
It should be inside the input and on the left part.
There were no styling changes after the svg was added, why isn't it in the same position as the original icon?
Most likely semantic-ui adding special styles when we add some icon by attribute "icon". Semantic-ui-react doesn't support custom icons. :,(
In the type declaration we can read:
/** Optional Icon to display inside the Input. */icon?: any | SemanticShorthandItem<InputProps>
My proposition: add some styles to CSS, like me in the sandbox
.input {
position: relative;
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
}
img {
position: absolute;
right: 5px;
width: 10px;
}
I got it working by passing a custom component where the svg image is wrapped by an i tag that has a an icon class:
const CustomIcon = (
<i className="icon">
<img width={38} height={38} src={searchIcon} />
</i>
);
const App = () => {
return (
<Input icon={CustomIcon} iconPosition="left" placeholder="placeholder" />
);
};
The benefit to this approach is that you can change the iconPosition without it breaking the styling with this approach.
To give more context the icon getting displayed at the right position is due to the styles applied to this selector: .ui.icon.input>i.icon. Because it expects an i tag the styles won't be applied if you don't wrap the image between i tags.

set styling to div which contain TextInput field

I'm new to react and material ui. I'm using material ui version "1.0.0-beta.17" and react 15.6.2. Also has styled-components 2.0.0 and styled-components-breakpoint 1.0.1.
I have two TextInput fields in a div element.
const mycomponent = ({props}) => {
<div>
<SomeComponent />
<div>
<TextInput id="testId1" />
<TextInput id="testId2" />
</div>
</div>
}
Now when it render, it adds additional parent div to each input fields
Like this,
<div>
<div class="field--testId1">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId1">
</div>
</div>
<div class="field--testId2">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId2">
</div>
</div>
</div>
Now how can I target to the div to apply styles with class name field--testId1, field--testId2.
Here classname are generated by default material ui,
for example
.field--testId2{
width: "48%",
float: "left"
}
.field--testId2{
width: "48%",
float: "left"
}
I'm learning react and material ui so any help is much appreciated.
in order to override an existing class, you can add a styled-component wrapper instead of the wrapping div and override the child classes:
const TextInputWrapper = styled.div`
.field--testId2 {
// your custom styling
}
`
<TextInputWrapper>
<TextInput id="testId1" />
<TextInput id="testId2" />
</TextInputWrapper>
If you want to target div which has input, than you can follow these steps
Add a class to parent div, lets say wrapper
Target the closest div using > css selector
.wrapper > div {
border: 1px solid red;
width: 48%;
float: left;
margin-left: 1%;
}
input {
width: 100%;
box-sizing: border-box;
}
<div class="wrapper">
<div class="field--testId1">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId1">
</div>
</div>
<div class="field--testId2">
<div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
<input id="testId2">
</div>
</div>
</div>
You give class directly to your textfield component and you can add your custom styles.
<TextInput className="your-class" id="testId1" />
You should use #material-ui/styles to extend your component's styles. Take a like at this answer, it's similar to your case: https://stackoverflow.com/a/67512965/8950820. Here is and example:
You should use #material-ui/styles to extend your Text Fields styles like this:
import React from 'react';
import { makeStyles, TextField } from '#material-ui/core';
const useStyles = makeStyles({
textField: {
border: 0,
borderRadius: 3,
padding: '0px 30px',
// Other styles here...
},
});
export default function MyComponent() {
const classes = useStyles();
return (
<div>
<TextField
size="large"
variant="outlined"
label="A text field title"
className={classes.textField}
/>
</div>
);
}
Learn more about the documentation at this link: #material-ui.com/styles

HTML Markup: Write elements textContent via attribute instead of via passing the value as a child?

I'm pretty sure the answer to this is no, but,
Is there any way to write HTML elements like this:
<button innerText="This is the button text" />
<!-- INSTEAD OF LIKE THIS: -->
<button>This is the button text</button>
For an example like this, my request seems unwieldy, but it makes more sense when you have multiple elements that look like this that you're returning via ReactJS.
<button
className="btn"
somePropA="Some Value"
somePropB="Some Value"
somePropC="Some Value"
title="Some title"
>
Some button innerText
</button>
<!-- VERSUS: -->
<button
className="btn"
somePropA="Some Value"
somePropB="Some Value"
somePropC="Some Value"
title="Some title"
innerText="Some button innerText"
/>
I'd love to be able to do this for button, span, etc.
With React, you can create a component for Button (or input, or any other HTML element) and pass the info as props, like this:
From a parent component:
import React, {Component} from 'react';
import Button from './button'; // This is your button component
class App extends Component {
render() {
return (<Button
innerText="Your inner text" // Here, you can pass the text as props. You could also pass a class name, id, etc.
/>);
}
}
export default App;
From a child (Button) component. I'm using a functional stateless component, but you can use a stateful component if you prefer:
import React from 'react';
const Button = ({innerText})=>{
return <button>{innerText}</button>
}
export default Button;
That can easily be done using CSS using its pseudo element and attr() function, like this, and you can target any element with the attribute selector.
For custom attribute one is suppose to use the data-* prefix, so I added that here.
Stack snippet
[data-innerText]::before {
content: attr(data-innerText);
}
/* specifically target span base element */
span[data-innerText] {
display: inline-block;
color: red;
font-size: 20px;
padding: 20px;
letter-spacing: 10px;
text-transform: uppercase;
}
<button data-innerText="This is the button text"></button>
<div>
<span data-innerText="This is a span"></span>
</div>
<div>
<button>And it only adds the text to elements that have the attribute set</button>
</div>
You could do this with Javascript, but there is no way built into HTML. Your javascript would look something like:
document.getElementById("mybtn").value = "Hello";
You can do it for any element, using any attribute with only HTML and CSS's attr() function:
button:after {
content: attr(any-attr);
}
<button any-attr="YOUR TITLE"></button>

Categories