How can I include a button with an input field, so that it looks like this (without the icon):
The purpose of this is so that if somebody enters invalid text, he can click on the button for some suggestions.
(I think this part could be achieved by a JavaScript function which calls a SlingServlet, returning some suggestions to be displayed e.g. maybe as an alert.)
Since you've clarified in comments that having them in one line is important for you, you could wrap them both in a toolbar XType:
<toolbar
jcr:primaryType="cq:Widget"
xtype="toolbar">
<items
jcr:primaryType="cq:WidgetCollection">
<input
jcr:primaryType="cq:Widget"
xtype="textfield"
name="./myInput">
</input>
<button
jcr:primaryType="cq:Widget"
xtype="button"
name="./myButton"
text="Submit">
</button>
</items>
</toolbar>
I think you can then also style the widgets further, e.g. width of the input field.
Check out the API docs too, they have some examples of a ComboBox on the toolbar page, which talks of type-ahead & suggested values — it sounds like it could be adapted to what you're looking for, if the data field came from an external JSON source (e.g. your SlingServlet), rather than coded inline.
Related
Im using react-simple-maps with react-tooltip
Looks like the hover works fine, but I try to click on a link I've added on the tooltip but before I can get to the tooltip, it disappears and I can't access the content with my mouse.
is this possible?
Depending on what your implementation specifically looks like, I think the delayHide property is what you're looking for. It defines the delay after the hover event ends until the tooltip disappears, in milliseconds.
<ReactTooltip delayHide={1000} />
I am building a React app with a hefty search functionality. Essentially, I need to conditionally render Radio buttons based on other Radio buttons input. I am using the MUI library for Radio buttons.
Here's an example of the type of functionality that I need
if (value === 'Option1') {
return <Option1Radios />
}
I know this has to do with useState, so the actual code will look nothing like the above example, but that's the best way I can explain what I'm looking for.
Currently, I have the basic set of radio options that are necessary for all searches at the top. When the user reaches the 3rd set of radio buttons, I need to take their choice in those radio buttons, and render a large selection of radio buttons based upon that 3rd selection. My current plan is to create components for each set of radio buttons that can appear, and then set it up to render those components when the proper button is checked (Option1Radio component, Option2Radio component, etc.)
Example.js
<Form.Row>
<FormControl>
<FormLabel id="demo-row-radio-buttons-group-label">Options</FormLabel>
<RadioGroup
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group"
>
<FormControlLabel value="Option1" control={<Radio />} label="Option1" />
<FormControlLabel value="Option2" control={<Radio />} label="Option2" />
<FormControlLabel value="Option3" control={<Radio />} label="Option3" />
</RadioGroup>
</FormControl>
</Form.Row>
I have been looking for a resource on how to conditionally render Radio buttons in this way, but I've been unable to find anything. I would imagine there is some resource that shows me the proper way to set these up, so ideally if someone could link me to that (or even just a website that has implemented this type of searching that I could inspect,) that would be very helpful. If not, if someone could possibly give a code example on how to get this done I would greatly appreciate it.
My assumption on how this needs to be done:
I assume that in my main search page, I need to set the state of the search form.
I assume that I need to change the state of the search form to reflect the value of the specific radio option, so that it will render the appropriate set of options.
Thank you for the help and I'm happy to provide anything else that may help. I know this may seem like a ridiculous question, essentially asking for documentation/guide, but I have searched for a few hours now to no avail! Thank you again!
You can do conditional rendering like this:
Define the state to control the rendering:
const [contition, setCondition] = useState(false);
This code only displays <Option1Radios /> when your condition is true:
return {condition && <Option1Radios />};
Here is an article about it: https://medium.com/geekculture/stop-using-for-conditional-rendering-in-react-a0f7b96200f8. ps: I still prefer && syntax specially in TypeScript where you can ensure the variable is always a boolean.
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'm working on fixing some responsive design issues with a sidebar component in React, and one problem with it is that the label text on the tabs gets wicked scrunched up on smaller screens. I want to hide this text but I can't seem to find a good way to do it.
I've tried replacing the label text with a div that is hidden via bootstrap on small/x-small screens, but that doesn't work
<Tab
icon={<Icon className="material-icons geometry">category</Icon>}
label={<div className=".hidden-xs .hidden-sm">GEOMETRY</div>}
value='a' />
Ideally this text should go away on smaller screens but it just acts as though I hadn't put anything there at all. In fact, any bootstrap classes I try to add to that div seem to have no effect. How might I go about fixing this?
If you are using Material UI, you can use Hidden tag to hide label based on mobile viewport. When you use tag 'Hidden' with prop xsDown, the label will be hidden at or below xs breakpoint.
<Tab
icon={<CategoryIcon ></CategoryIcon>}
label={<Hidden xsDown>GEOMETRY</Hidden>}>
</Tab>
https://codesandbox.io/s/wispy-bird-vftel?fontsize=14
I am using react js to develop my web application and I am using React material design for the UI. Below is the url which I am referring.
https://material-ui-next.com/
I am trying to achieve something like this
I am using the tabs but I can't get a two line text as like the image I shared. either I can use image and label or if the label is too big then it goes in multi line. How can I achieve two line text as like the image
In order to make multiline text, you can insert the HTML < pre > tag, from which the text formatting is retained. Then it remains to inherit the style of the text.
<Typography>
<pre style={{ fontFamily: 'inherit' }}>
{content}
</pre>
</Typography>
It's an old question, but I see nobody has answered it yet.
In order to get multi line and multi styles for your tab label, you need to place your labels and values in two different items. (make sure you wrap them in a div first)
The preferred way in MUI #1.0.0 is to use the <Typography /> tag.
Check out the typography docs for all the variants.
So it would look something like this:
<Tab
value={this.state.value}
label={
<div>
<Typography variant="caption">
Following
</Typography>
<Typography variant="title">
58
</Typography>
</div>
}
/>
However since all your tabs need that, you should probably create a function to take care of that.
I have created a sandbox based on the MUI example provided here: https://codesandbox.io/s/vw6107rv3