I'm currently playing with the TabBarIOS-Component. It works perfectly but what I'm missing is a Icon-Only Style like TweetBot. Is there a way to tell TabBarIOS that I don't need/want the title?
You must explicitly set the title to an empty string:
<TabBarItem title="" />
Related
I am using Select from native-base and I'm having problem with trying to customize the selectable options from Select.Item.
react-native: 0.70.5,
native-base": "^3.4.25
<Select>
<Select.Item value="one" label="one" />
</Select>
where it will only render the label, which expects a string. I am not able to render any other component from Select.Item
what I'm trying to achieve looks a lot like the picture below:
Desired Select.Item
Edit: not a solution as it breaks the component value. You have to use leftIcon and rightIcon properties instead
You can use the label attribute to customize the item content.
Something like:
<Select>
<Select.Item
value="one"
label={
<Row>
<Icon as={MaterialCommunityIcons} name="information" />
<Text>one</Text>
</Row>
}
/>
</Select>
In my opinion, the attribute name is misleading. You can also use leftIcon and rightIcon properties on Select.Item. If you can't achieve the customization level you want with these, I'm afraid you will have to create your own Select component based on ActionSheet elements.
Note that this will not be web compatible, so if you need web support it won't be an option. I'm also not sure to which extent other components are supported within this item element.
I use this vue-stripe-checkout (Vue.js), all works fine but if i write a fake number of card a automatic message is display and say "you'r number is incorrect".
Is what i want but i don't know how to add style on that, because is as 0 style and is very ugly.
The style object don't work on that, i found in documentation a Slots for "card-errors" but i don't know what means.
If someone can help me ?
<stripe-elements
:styleObject="style"
ref="elementsRef"
:pk="publishableKey"
locale="fr"
#token="tokenCreated"
#loading="loading = $event"
>
</stripe-elements>
<button class="btn btn-success px-5" #click="submit">Payer</button>
I use cell rendering in my ag-grid for editing a date field.Inside that cell datePicker is added as shown
view of my cell
But when i am clicking the date icon date picker view is like it is fully mounded inside the cell and not visible properly.the below picture shows my issue
#Component({
selector: 'app-gender-renderer',
template: ` `
<input type="text" id="recording_date_to" [(ngModel)]="changedRecDateTo" (change)="edit()"
ngbDatepicker #d="ngbDatepicker" style="z-index: 0;"
class="form-control input-sm" />
<button class="glyphicon glyphicon-calendar" (click)="d.toggle()" type="button"></button>
})
Tried z index , it is also not working..
Can anyone please help me to solve this ?
Thank You in advance
As mentioned before, to be able to use DatePicker in cell you need to create cellEditor instead of cellRenderer, however, cellEditor just like an extension for cellRenderer.
So for angular, you need to use ICellEditorAngularComp interface and take care of
agInit(params: any): void // for init value which would be used in DatePicker
and
getValue(): any // for passing value back to the grid (and update the cell)
don't forget to return true in isPopup(): boolean method - for correct visibility.
Now, about DatePicker itself, I'm using #danielmoncada/angular-datetime-picker
(but for sure you can use anything)
And there are a few things that you need to take care :
what type of value is the datepicker library using
what type of value you will use for view and for database
and it could be handled with getValue and valueFormatter methods
That's all for theory, check my demo below and feel free to ask anything related, will try to help.
DEMO
Two things...
First, if you are really using a date picker in a cell renderer, don't.
That should be done in a cell editor, not a renderer.
Second, if you want to have an editor that is not constrained by the cell,
you have to specify that the editor is a 'popup' editor by implementing isPopup() in your editor, and returning true.
The documentation for this is at https://www.ag-grid.com/javascript-grid-cell-editing/#popup
In web css, we can set css for sub element. Example:
<div class="test">
<p>abc</p>
</div>
And we can set the <p> css by:
.test p {
font-size:20px;
}
Now in React Native, I have this:
<View style={myStyle.test}>
<Text>abc</Text>
</View>
How we can set the <Text> style by myStyle.test?
Actually you can't use like css children, you have to set a custom style for each element that you wanna use.
CSS in react native is just a subset of web css and it doesn't allow you to do what you do in webCss. All you have is inline css. So you have to style them separately. You can avoid repeating by defining a common style object and pass that instead of repeating.
You can check out this library as well:
https://github.com/vitalets/react-native-extended-stylesheet
According to docs
All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color
Now cascading is not supported in react-native, yo =u have to provide a style prop to each element for it to be styled.
im trying to use razor to generate a url like this
<img id="currentPic" src="/content/img/#Html.Raw(Model.user.defaultImage).png" />
but the .png bit is being added to the #htmlraw syntax and is not compiling. I know i need to tell the page that #htmlraw is over. I tried using ; which worked - but the ; was also displayed in the string when displayed.
How can i get it so it would display like this. When Model.user.defaultImage = random1
<img id="currentPic" src="/content/img/random1.png" />
thanks
try adding a new set of parenthesis
<img id="currentPic" src="/content/img/#(Html.Raw(Model.user.defaultImage)).png" />
Try #{Html.Raw(Model.user.defaultImage)}
I think you don't need Html.Raw, just use
<img id="currentPic" src="/content/img/#(Model.user.defaultImage).png" />
This feels like a hack, but works:
<img id="currentPic" src="/content/img/#Html.Raw(Model.user.defaultImage + ".png")" />