I'm building blog using Sanity CMS. I want to style all elements I have in SanityBlocks like p, h1, h2, h3, h4. Below is the element I'm using to get the body of a single post.
<SanityBlocks :blocks="blocks" :serializers="serializers" />
In blockContent.js I have those styles.
styles: [
{ title: 'Normal', value: 'normal' },
{ title: 'H1', value: 'h1' },
{ title: 'H2', value: 'h2' },
{ title: 'H3', value: 'h3' },
{ title: 'H4', value: 'h4' },
{ title: 'Quote', value: 'blockquote' },
],
Related
TopBar are define as shown
I want to be able to decrease and spacing between multiple button, but their doesn't seem to be a way to achieve this
const options = {
topBar: {
rightButtons: [
{
id: 'id',
text: 'Button',
},
{
id: 'id2',
text: 'Button2',
},
],
},
};
I've tried adding styling to each button definition but it doesn't seem to have that functionality
const options = {
topBar: {
rightButtons: [
{
id: 'id',
text: 'Button',
style: {
marginHorizantal: -10, <= ?
}
},
{
id: 'id2',
text: 'Button2',
},
],
},
};
I'm using vue 3 treeview to show the list of buildings, real state etc. now I want to specify an icon for root which is home icon, and the first parent to be building, and the children to be store.
but as I saw treeview only had open & close Icon to handle :( can anyone tell me how to customize it?
<blocks-tree class="justify-content-center d-flex" :data="treeData"
:horizontal="treeOrientation==='1'"
:config="config"
:collapsable="true">
<template #node="{data}">
<span>
<input type="checkbox"
:checked="selected.indexOf(data.some_id)> -1"
#change="(e)=>toggleSelect(data,e.target.checked)"/>
{{data.label}}
</span>
</template>
</blocks-tree>
the data:
let treeData = reactive({
label: '4-4-2-2-0-0-0',
expand: true,
some_id: 1,
icon: 'fa fa-home',
children: [
{ label: '4-4-2-2-1-0-0', some_id: 2, icon: 'fa fa-building', },
{ label: '4-4-2-2-1-0-1', some_id: 3, icon: 'fa fa-building',},
{
label: '4-4-2-2-1-0-2',
some_id: 4,
expand: false,
children: [
{ label: '4-4-2-2-1-1-2', some_id: 5 },
{
label: '4-4-2-2-1-2-2',
some_id: 6,
expand: false,
children: [
{ label: 'واحد 1', some_id: 7 },
{ label: 'واحد 2', some_id: 8 },
]
},
]
},
]
});
and config:
config: {
roots: ['1'],
parentIcon: {
type: 'class',
class: 'fa fa-home'
}
}
How do I change the 'items' from a 'RNCPickerSelect' when I've selected a value from another 'RNCPickerSelect'?
For example, when I select a value called 'brand' from a RNCPickerSelect, the other RNCPickerSelect displays the 'models' associated with that specific 'brandName'. Basically, I want the 'items' from the other RNCPickerSelect to be influenced by the first RNCPickerSelect.
Here's the code:
================================Brands===================================
<RNPickerSelect
pickerProps={{ style: {overflow: 'hidden' } }}
onValueChange={(value) => console.log(value)}
placeholder={brandplaceholder}
// style={styles.dropbox}
items={[
{ label: 'brand1', value: 'brand1' },
{ label: 'brand2', value: 'brand2' },
{ label: 'brand3', value: 'brand3' },
]}
onValueChange={(val) => setBrand(val)}
/>
==========================================================================
=================================Models===================================
<RNPickerSelect
pickerProps={{ style: {overflow: 'hidden' } }}
onValueChange={(value) => console.log(value)}
placeholder={brandplaceholder}
// style={styles.dropbox}
items={[
{ label: 'model1', value: 'model1' },
{ label: 'model2', value: 'model2' },
{ label: 'model3', value: 'model3' },
]}
onValueChange={(val) => setModel(val)}
/>
==========================================================================
===============================Model Ideas================================
items={[
{ label: 'model4', value: 'model4' },
{ label: 'model5', value: 'model5' },
{ label: 'model6', value: 'model6' },
]}
**and**
items={[
{ label: 'model7', value: 'model7' },
{ label: 'model8', value: 'model8' },
{ label: 'model9', value: 'model9' },
]}
==========================================================================
Thanks!
With the codes provided by #FreakyCoder, I've successfully fixed and improved the 'RNCPickerSelect'. I have adjusted the code to fit my project and have added some extra lines of codes as well. Thanks again #FreakyCoder!
The Sample Codes:
export default function MainPage() {
//===============Example Selections===============//
const firstPick = [
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
];
const secondPick = [
{ label: 'Football2', value: 'football2' },
{ label: 'Baseball2', value: 'baseball2' },
{ label: 'Hockey2', value: 'hockey2' },
];
const thirdPick = [
{ label: 'Football3', value: 'football3' },
{ label: 'Baseball3', value: 'baseball3' },
{ label: 'Hockey3', value: 'hockey3' },
];
//================================================//
const [dynamicPickerArr, setDynamicPickerArr] = useState(HondaModel)
return(
<RNPickerSelect
onValueChange={(value) => { setModel(value)
// Magic here
// Your changed value logic should be here
if(value=='football')
return Football=setDynamicPickerArr(thirdPick)
else if(value=='baseball')
return Baseball=setDynamicPickerArr(secondPick)
else if(value=='hockey')
return Baseball=setDynamicPickerArr(firstPick)
}
}
items={[
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]}
/>
<RNPickerSelect
onValueChange={(value) => console.log(value)}
items={dynamicPickerArr}
/>
)
}
you can do that with a simple state logic. When the first picker selects, it will update the other picker's predefined items array.
import React from "react";
import RNPickerSelect from 'react-native-picker-select';
const firstPick = [
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]
const secondPick = [[
{ label: 'Football2', value: 'football2' },
{ label: 'Baseball2', value: 'baseball2' },
{ label: 'Hockey2', value: 'hockey2' },
]
export const Dropdown = () => {
const [dynamicPickerArr, setDynamicPickerArr] = useState(firstPick)
return (
<RNPickerSelect
onValueChange={(value) => {
// Magic here
// Your changed value logic should be here
setDynamicPickerArr(secondPick)}
}
items={[
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]}
/>
<RNPickerSelect
onValueChange={(value) => console.log(value)}
items={}
/>
);
};
I have an object of type block to get a WYSIWYG editor. It looks like this:
{
title: "Block",
type: "block",
styles: [
{ title: "Normal", value: "normal" },
{ title: "H1", value: "h1" },
{ title: "H2", value: "h2" },
{ title: "H3", value: "h3" },
{ title: "H4", value: "h4" },
{ title: "Quote", value: "blockquote" }
],
lists: [{ title: "Bullet", value: "bullet" }],
marks: {
decorators: [
{ title: "Strong", value: "strong" },
{ title: "Emphasis", value: "em" }
],
annotations: [
{
title: "URL",
name: "link",
type: "object",
fields: [
{
title: "URL",
name: "href",
type: "url"
}
]
}
]
}
}
But I see no option to be able to choose the color of the text. Is there a way to enable this? Maybe a plugin?
There is indeed a plugin for this. In your terminal, cd to you Sanity Content Studio folder, then run:
sanity install #sanity/color-input
This will append #sanity/color-input to the plugins array in your sanity.json file and locally install the #sanity/color-input npm package.
Then, go ahead and add the color type to the annotations array in the block content where you want to enable text color. E.g.:
export default {
name: 'blockContent',
type: 'array',
title: 'Block Content with Color',
of: [
{
type: 'block',
marks: {
annotations: [
{name: 'color', title: 'Color', type: 'color'}
]
}
}
]
}
Also, keep in mind that you'll now get text annotated with color specifics. How (and if) your front-end(s) choose to render the structured text is up to you.
I have Json data that has children elements. I need to bind the store to an editable grid and have the edits populated to the store.
The data tree does get populated into the ItemFileWriteStore. The datagrid displays only the parent data and none of the children data.
SAMPLE.TXT
{
"items": [
{
"profileId": "1",
"profileName": "ABC",
"profileType": "EmailProfile",
"profilePreferences": [
{
"profilePreferenceId": "1",
"displayText": "Bob",
"address": "primary#some.com"
},
{
"profilePreferenceId": "2",
"displayText": "Sally",
"address": "secondary#some.com"
},
{
"profilePreferenceId": "3",
"displayText": "Joe",
"address": "alternate#some.com"
}
]
}
]
}
javascript
var sampleLayout = [
[
{ field: 'profileName', name: 'profileName', width: '100px' },
{ field: 'profilePreferences.displayText', name: 'displayText', width: '100px' },
{ field: 'profilePreferences.address', name: 'address', width: '100px' }
]];
function populateGrid() {
var url = "sample.txt"; //Will be replaced with endpoint URL
dojo.xhrGet({
handleAs: 'json',
url: url,
error: function (e) {
alert("Error: " + e.message);
},
load: showJsonData
});
}
function showJsonData(response, ioArgs) {
var profileStore = new dojo.data.ItemFileWriteStore({
data: {
items: response.items
}
});
var sampleGrid = dijit.byId("sampleGrid");
sampleGrid.store = profileStore;
sampleGrid.startup();
}
you need to be using dojox.grid.TreeGrid or 'fake' the JSON to present every even row with a blank profileName. Two samples follows, one for TreeGrid another on DataGrid - not tested in working environment though.
Given Hierachial JSON:
{
identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid
items: [{
id: '1',
profileName: 'Admin',
profilePreferences: [
{ id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
{ id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
]
}, {
id: '2',
profileName: 'Visitor',
profilePreferences: [
{ id: '2_1', displayText: 'Foo', address: 'Texas' }
{ id: '2_2', displayText: 'Bar', address: 'Indiana' }
]
}]
}
TreeGrid Structure:
{
cells: [
[
{ field: "profileName", name: "profileName", width: "100px" },
{ field: "profilePreferences",
children: [
{ field: "displayText" name: "displayText", width: "100px" },
{ field: "address" name: "address", width: "100px" }
]
]
]
}
reference: dojo docs
Given flattened 'fake-children' JSON:
{
identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid
items: [{
id: '1',
profileName: 'Admin', preferenceText: '', preferenceAddr: ''
}, {
id: '2',
profileName: '', preferenceText: 'John', preferenceAddr: 'NY'
}, {
id: '3',
profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
}, {
id: '4', // Not with '.' dot seperator like so
profileName: '', preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
} ]
DataGrid structure:
[[
{'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
{'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
{'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]
reference dojo docs