Skip to content

Commit

Permalink
Data Sources: Added docs for Umbraco uCssClassName
Browse files Browse the repository at this point in the history
Fixes #151
  • Loading branch information
leekelleher committed Jun 15, 2022
1 parent 4689e5a commit c584e26
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 9 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 17 additions & 9 deletions docs/data-sources/data-source--ucssclassname.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,31 @@

### Data Sources


> :rotating_light::rotating_light::rotating_light: **This documentation has not been written yet.** :rotating_light::rotating_light::rotating_light:
> If you have a desire to contribute back to the Contentment package project, (and you have the time), please consider helping me write the documentation pages for the data-sources.
> Any discussion, guidance or feedback can be had on issue #151.
> https://github.com/leekelleher/umbraco-contentment/issues/151

#### uCssClassName

A homage to @marcemarc's bingo-famous [uCssClassNameDropdown](https://our.umbraco.com/packages/backoffice-extensions/ucssclassnamedropdown/) package!

This data-source enables you to select the class names from a local CSS file, to populate the items of a compatible editor, e.g. [Data List](../editors/data-list.md).


##### How to configure the editor?

_[TBC]_
The configuration of the uCssClassName data-source has the following options:

![Configuration Editor for uCssClassName](data-source--ucssclassname--configuration-editor-01.png)

The first field is **Path to stylesheet**, here you can enter a local relative CSS file path.

e.g. `~/umbraco/lib/font-awesome/css/font-awesome.min.css`

The next field **Class Name Regex** is used to set the [Regular Expression (RegEx)](https://docs.microsoft.com/en-us/dotnet/standard/base-types/regular-expressions) pattern to match the class names in the CSS file. For the [FontAwesome](https://fontawesome.com/) example, this would be `\.fa-([^:]*?):before`.

The next field is for **Exclusions** _(optional),_ a comma-separated list of partial class names to exclude from the resulting list.

The last field is **Icon Pattern**, this is a formatted string to set the icon's class for inside the Umbraco backoffice. In the case of FontAwesome, this would be `icon-fa fa-{0}`.


##### What is the value's object-type?

_[TBC]_
The value for the uCssClassName data-source item is a `string`.
Depending on the `List editor` used, this may be wrapped in a `List<string>`.

0 comments on commit c584e26

Please sign in to comment.