Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
iJungleboy committed Apr 8, 2019
1 parent 4f93329 commit d410370
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 24 deletions.
24 changes: 10 additions & 14 deletions docs/htmltags.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,34 @@
<img src="assets/razor-blade-logo.png" width="100%">

# Razor Blade HtmlTags API _v2.0_

TODO: CHANGE TO HTML5 ETC. AS A LOT IS DIFFERENT NOW

# Razor Blade Fluent Tag API _v2.0_

_return to [overview](https://github.com/DNN-Connect/razor-blade)_

## Introduction to the HtmlTags API
## Introduction to the Fluent Tag API

Building valid HTML in code is tricky, especially when you have attributes containing dangerous characters like `'` and `"`, which is common both in JSON attributes as well as when you need attributes based on content added by editors. So we created an extensive API to generate safe html and encode things optimally - this is what this is for. Here's a basic example:

```razor
@using Connect.Razor.Blade.Html;
@using Connect.Razor.Blade;
@{
var box = new Div().Id("wrapper").Class("box");
}
@box.Wrap()
@box.Wrap("some content")
@box.Open
Nice content
@box.Close
```

_Note: If you're looking for the API to manipulate html strings, like for stripping away all tags or encoding/decoding Html, check out the [Tags API](tags.md)_

## Using the HtmlTags API

HtmlTags is a namespace, so to start using it, you'll need to add
`using Connect.Razor.Blade.HtmlTags;`
into your razor file

_Note: If you're looking for the API to manipulate html **strings**, like for stripping away all tags or encoding/decoding Html, check out the [Tags API](tags.md)_

## Tag Objects in HtmlTags _(new in 2.0)_
## Tag Objects in _(new in 2.0)_

Below each tag you'll see a list of methods that can be called to set a value common to that tag. These are for chaining, so you can do things like
`var img = new Img().Src("...").Class("...").Id("...");`
The methods with a note _append_ would append a value if called multiple times, whereas _replace_ would replace the value. See the [Tag](htmltags.tag.md) documentations on this. All these objects also have the common methods like `Id()`, `Class()`, `Title()`, `Data()`, `Wrap()` etc. so do check the `Tag` documentations.
The methods with a note _append_ would append a value if called multiple times, whereas _replace_ would replace the value. See the [Tag](tag.md) documentations on this. All these objects also have the common methods like `Id()`, `Class()`, `Title()`, `Data()`, `Wrap()` etc. so do check the `Tag` documentations.

_Note that when you see `[content]`, this means you can pass in optional content into the tag. This can be a string, or another tag._

Expand Down
16 changes: 7 additions & 9 deletions docs/htmltags.tag.md → docs/tag.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<img src="assets/razor-blade-logo.png" width="100%">

# Razor Blade Tag Object _new in 1.3_
# Razor Blade Tag Object _new in 2.0_

_return to [overview](https://github.com/DNN-Connect/razor-blade)_

Expand All @@ -16,8 +16,7 @@ To see this in action with many examples, visit the [RazorBlade Tutorials](https

## Quick-Reference: Fluent `Tag` Methods with Chaining

All these methods below change the object, and return the object itself again. This fluent-API allows chaining them together, like `myImg.Id("someId").Class("float-right")`. Remember that you will need to include this namespace:
`@using Connect.Razor.Blade.HtmlTags;`
All these methods below change the object, and return the object itself again. This fluent-API allows chaining them together, like `myImg.Id("someId").Class("float-right")`.

### Modifying Tag Attributes

Expand Down Expand Up @@ -65,9 +64,9 @@ will render the close-tag to html. Implements IHtmlString and will not be encode

The following APIs will get you `Tag` objects:

1. `Tags.Tag(...)` in `Connect.Razor.Blade` ([more](tags.md))
2. `new Tag(...)` in `Connect.Razor.Blade.HtmlTags` ([more](htmltags.md))
3. `new ***(...)` in `Connect.Razor.Blade.HtmlTags` ([more](htmltags.md))
1. `Tags.Tag(...)` ([more](tags.md))
2. `new Tag(...)` ([more](tag.md))
3. `new ***(...)` ([more TODO HTML5](htmltags.md))

### How to Render (output) Tag Objects

Expand All @@ -85,10 +84,9 @@ All `Tag` Objects will directly output to Html since it implements `IHtmlString`
@myStyle.Close
```

## Advanced `HtmlTags.Tag` API
## Fluent `Tag` API


The `Tag` object lies in the `Connect.Razor.Blade.HtmlTags` namespace, so to start using it, you'll need to add
`using Connect.Razor.Blade.HtmlTags;`.

## `Tag` Constructors

Expand Down
2 changes: 1 addition & 1 deletion docs/tags.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ The following commands may seem unnecessary, but there are many cases where your
[read more](html.md) -->

2. `Tags.Tag(name, [content])`
generate a [Tag](htmltags.tag.md) object which can be used like these brief examples ([more](htmltags.tag.md)):
generate a [Tag](tag.md) object which can be used like these brief examples ([more](tag.md)):
`@Tags.Tag("div")`
`@Tags.Tag("div", "inner content")`
`@Tags.Tag("div").Id("box").Wrap("inner message")`
Expand Down

0 comments on commit d410370

Please sign in to comment.