Is there a way to style the textInput in react-native android?
Like change the underlineColor when selected and the cursor color?
As of React Native version 0.21, there is still no way to style the cursor color via view props. I have successfully styled the cursor color by adding a custom style to my app theme.
You will want to place this code in the styles.xml file, which is located in the android folder of your React project, at android/app/src/main/res/values/styles.xml.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- typical material style colors -->
<item name="colorPrimary">#color/kio_turquoise</item>
<item name="colorPrimaryDark">#color/kio_hot_pink</item>
<!-- sets cursor color -->
<item name="colorControlActivated">#android:color/black</item>
</style>
</resources>
Note that this style is global, and will set the cursor color for all Android TextInput views in your React Native app.
For the underline color you can use underlineColorAndroid property: https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js#L290
See example: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TextInputExample.android.js#L222
For cursor color there is no such property exposed at the moment. You can always use custom android theme for your app if you want to change that globally for all textviews in your app (read more here: http://developer.android.com/guide/topics/ui/themes.html)
Besides implementing #Kio Krofovitch solution I also made color.xml file in the same ../res/values folder in which I wrote something like:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="orange">#ff5500</color>
<color name="articlecolor">#3399FF</color>
<color name="article_title">#3399FF</color>
<color name="cachecolor">#8ad0e8</color>
</resources>
and then accordingly edited the styles.xml as follows:
...
<item name="colorControlActivated">#color/orange</item>
</style>
</resources>
There is actually a prop doing this for TextInput :
selectionColor (to change cursor color as well as selection color)
underlineColorAndroid (to change the underline color of textInput in
Android)
<TextInput
underlineColorAndroid="#FF0000"
selectionColor="rgba(0,0,0,0.4)"
/>
Here is the documentation.
Related
I'm looking to customize the downward arrow icon in the react multi-select component. In the documentation, there is an attribute ArrowRenderer which takes reactNode as a value.
How to configure this to customize the styles?
Dropdown looks like:
Any help would be highly appreciated
Put your react node in div tag with specific class(Name) and then access that class by css selectors.
<MultiSelect
arrowRenderer={()=>
<div className="custom-arrow" >
<CustomArrowComponent />
</div>
}
/>
I have an SVG in a folder icon.svg, I'm trying to render it in a button along with text. Specifically, it's the Google icon and i'm trying to render it next to some text that says "SIGN IN WITH GOOGLE"
I'm importing the SVG as is and trying to pass it next to the button but, the file path is rendering instead:
function App() {
return (
<div className="App">
<button>{SVG}SIGN IN WITH GOOGLE</button>
</div>
);
}
That renders a button that says /static/media/Icon.a1611096.svgSIGN IN WITH GOOGLE
How is one supposed to render the icon inside the button properly?
EDIT: I've been messing with the icon and the button and got close:
https://codesandbox.io/s/10k7rr3rp4
First you have to save the icon in assets folder. Then import it into the component which you want to use in
import {ReactComponent as Logo} from '../../assets/google.svg';
Now you can use it like a component
<button>
<Logo className='logo' /> Sign in with Google
</button>
You can use the require function as follows:
<button><img src={require(SVG)} alt="test" />SIGN IN WITH GOOGLE</button>
another solution could be to use styled-components with ::before pseudo element.
i just moved the images folder to the public folder.
live example
The size Quasar Button component can be adjusted and from docs it seems the icon in a button should change size accordingly. See this picture for example from the docs:
When I try the icon stays same size (button changes). My code:
<q-btn
v-if="$route.name === 'resetpassword'"
class="absolute-top-right"
flat
round
wait-for-ripple
dense
size="15px"
color="primary"
icon="mdi-window-close"
#click.native="goToSignIn"
/>
What's wrong?
1. The Problem
I ran into the same problem today. But if you change the button size to an extreme number (e.g. 200px), you'll see that the icon DID change size with the button.
The problem is that the default padding area between the icon and the button is too big, which makes the icon look small comparing to the button itself.
2. The Solution
Here's how I solve it using Deep Selectors. You make a custom button component around your button code. Then give it following style:
<style scoped>
.q-btn>>>.q-icon {
font-size: 40px;
}
</style>
And also give the size attribute in your template the same size, so size="40px". Then all aspects of the button have same size.
When using Vue with 3rd party UI Frameworks/Components, Deep Selector makes it really easy to make quick changes to component styles. And the changes can also be scoped (only change style locally) if you put the scoped keyword.
A good solution is to use q-icon inside q-btn for changing the size of the icon.
<q-btn size="xs" color="primary" dense>
<q-icon name="add" size="15px"></q-icon>
</q-btn>
I used Quasar v2.0.4. With Quasar v2.0.4, you can change the icon(or button) size with size attribute.
For example:
<q-btn size="xl" icon="close" />
<q-btn size="100px" icon="close" />
But if you use size attribute with fab or fab-mini attribute , size attribute doesn't work, then, only fab or fab-mini attribute works instead of size attribute.
For example:
<q-btn size="xl" fab icon="close" />
<q-btn size="100px" fab-mini icon="close" />
I want to use Font Awesome Icons in my Gatsby project. I would love to include font awesome with a CDN.
Just including it in a script tag doesn't work. I think I need to import it with import ... from '../fontawesome.css' but i am not able to get this working and also wanted to use a cdn for that. Or do I need to parse it with a css library for gatsby?
Please give me advice or hints how to do it.
For anyone visiting this page in late 2018+, I would highly recommend using react-icons.
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
It's better to include every module that your application needs in just one JS. But if you still want to use CDN, just copy and edit the default template:
cp .cache/default-html.js src/html.js
If you want to pack font-awesome in the project bundle, you may choose:
Use some react icon library. e.g. react-fontawesome
Include the CSS files
For the last option, you must move the css and fonts in pages folder and then include fa in your js file.
import './css/font-awesome.css'
To use a font-awesome class, use the className attribute
<i className="fa fa-twitter"></i>
If you are looking get the js code from a CDN, use Netlify
Here is the recommended way to use Font-Awesome icons in Gatsby:
Add the following code snippet (mentioned in official react-fontawesome docs) in your higher components like Layout or Page.
import { library } from '#fortawesome/fontawesome-svg-core'
import { fab } from '#fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '#fortawesome/free-solid-svg-icons'
library.add(fab, faCheckSquare, faCoffee)
First npm install -S and import free-brands-svg-icons or/ and free-solid-svg-icons only if you need icons from them.
Then in each component where to use icons, add the following code:
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome"
Now use it in your component like shown below:
<FontAwesomeIcon icon={["fab", "apple"]} style={{color:"#000000"}} />
I believe it is at this step where things go wrong. You need to include 'fab' in icon prop as shown above if you are adding brand icons. Otherwise if using (let say) solid icons, then just enter the spinal-case (e.g check-square) styled name of the icon without [] enclosing brackets in icon prop instead of camelCase (checkSquare) and you don't need to include 'fa' in the beginning.
Just an addition to last comment.
The reason you need to pass an array to icon prop is because the default prefix used in FontAwesomeIcon component is fas. So if you supply icon from #fortawesome/free-solid-svg-icons (e.g. faHome) you don't need to add prefix.
<FontAwesomeIcon icon={home} />
For all other packages as e.g. '#fortawesome/free-brands-svg-icons' you have to supply array to icon specifying prefix
<FontAwesomeIcon icon={["fab", "laravel"]} />
Also, nice to know thing, is that you DON'T need to import all fab icons into your library. Same like with solid icons ('fas') you can import just icons you need and then just add them to library.
Something like:
// fab icon (brand)
import { faLaravel } from "#fortawesome/free-brands-svg-icons"
// fas icon (solid)
import { faHome } from "#fortawesome/free-solid-svg-icons"
library.add(faHome, faLaravel)
The simplest solution is to add font-awesome script in layout.js <Helmet> tag:
<Helmet>
<html lang={site.lang} />
<link
rel="shortcut icon"
type="image/x-icon"
href={Favicon}
></link>
{/* adding google fonts */}
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet"/>
{/* adding font-awesome icons */}
<script src="https://kit.fontawesome.com/02130b3d51.js" crossorigin="anonymous"></script>
<style type="text/css">{`${site.codeinjection_styles}`}</style>
<body className={bodyClass} />
</Helmet>
Now add simply, the font-awesome icons where ever you like:
<h2 onClick={scrollToBottom} style={buttonStyle} className="scroll-btn" aria-label="to bottom" component="span">
{/* adding font-awesome icon */}
<i className="fas fa-arrow-alt-circle-down"></i>
</h2>
It's really this simple!!
Using Polymer 1.0 on Firefox 39.0 and Chrome 43.0
Polymer Starter Kit
I essentially have:
<body unresolved class="fullbleed layout vertical">
<template is="dom-bind" id="app">
<paper-drawer-panel id="paperDrawerPanel" narrow="true">
<div drawer>
Drawer
</div>
<div main>
Main
</div>
</paper-drawer-panel>
</template>
</body>
This is from the Polymer Starter Kit.
I removed the forceNarrow attribute from the paper-drawer-panel, and even tried adding the attribute narrow="false", but when I view the site in my browser on my laptop (15" screen), the panel is always in narrow mode. When I look at the narrow attribute in the console, it is set to true.
It is my understanding that both the drawer and the main content to appear side-by-side when the window is larger than responsiveWidth. So why am I not seeing this behavior?
Just add force-narrow NOT forceNarrow to your paper-drawer-panel and remove the javascript. Polymer javascript attributes in camelCase like forceNarrow will be matched to camel-case in HTML.
Using narrow=true won't work as this is the state of the drawer and will effectively hide the element forever.
In Polymer Starter Kit, inside app/scripts/app.js:
window.addEventListener('WebComponentsReady', function() {
document.querySelector('body').removeAttribute('unresolved');
// Ensure the drawer is hidden on desktop/tablet
var drawerPanel = document.querySelector('#paperDrawerPanel');
drawerPanel.forceNarrow = true;
});
The line drawerPanel.forceNarrow = true; forces the drawer panel to be narrow. You can comment out the line in order to get the appropriate behavior.
I believe this was included in the starter kit to demonstrate how to get the opposite behavior of always having a collapsible drawer.