The Eye Dropper Color picker allows you to choose a color from the full color spectrum using HEX and RGBA.
Data Type Definition Example
Content Example
Example with Modelsbuilder
@{var color =Model.Color?.ToString();if (color !=null) {<body style="background-color: @color"></body> }}
Example without Modelsbuilder
@{var color =Model.Value<string>("Color");if (color !=null) {<body style="background-color: @color"></body> }}
Add values programmatically
See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the Content Service.
The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.
@using Umbraco.Cms.Core.Services;@inject IContentService Services;@{ // Get access to ContentServicevar contentService = Services; // Create a variable for the GUID of the page you want to updatevar guid =Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef"); // Get the page using the GUID you've definedvar content =contentService.GetById(guid); // ID of your page // Set the value of the property with alias 'color'.content.SetValue("color","#6fa8dc"); // Save the changecontentService.Save(content);}
Although the use of a GUID is preferable, you can also use the numeric ID to get the page:
@{ // Get the page using it's idvar content =contentService.GetById(1234); }
If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:
@using Umbraco.Cms.Core.PublishedCache;@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;@{ // Set the value of the property with alias 'color'content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x =>x.Color).Alias,"#6fa8dc"); // Set the value of the property with alias 'theme' content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.Theme).Alias, "rgba(111, 168, 220, 0.7)");
}