You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/tag.md
+27-30Lines changed: 27 additions & 30 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,19 +6,27 @@ _return to [overview](https://github.com/DNN-Connect/razor-blade)_
6
6
7
7
## The `Tag` Object
8
8
9
-
The `Tag` object is the engine which generates HtmlTags inside _RazorBlade_ and a powerfull API will let you build html from code. These docs will give you what you need to leverage the object. Here you'll find
9
+
The `Tag` object is the engine which generates Html tags inside _RazorBlade_ and a powerfull API will let you build html from code. These docs will give you what you need to leverage the object. Here you'll find
10
10
11
11
1. a Quick-Reference for the common API
12
12
2. more instructions for doing specific things
13
13
3. advanced API for special stuff
14
14
15
15
To see this in action with many examples, visit the [RazorBlade Tutorials](https://2sxc.org/dnn-tutorials/en/razor/blade/home) on [2sxc.org](https://2sxc.org/).
16
16
17
-
## Quick-Reference: Fluent `Tag` Methods with Chaining
17
+
## How to get Tag Objects
18
18
19
-
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")`.
19
+
The following APIs will get you `Tag` objects:
20
+
21
+
1.`Tags.Tag(string tagName)` ([more](tags.md))
22
+
2.`new Tag(...)` (see below)
23
+
<!-- 3. `new ***(...)` ([more TODO HTML5](html5.md)) -->
24
+
25
+
## Understanding the Fluent API for `Tag` (Chaining)
26
+
27
+
All these methods below change the object, and return the object itself again. This fluent-API allows chaining them together, like `someTag.Id("someId").Class("float-right")`.
20
28
21
-
###Modifying Tag Attributes
29
+
## Modifying Tag Attributes
22
30
23
31
1.`Attr(name, [value], [separator])`
24
32
add an attribute - if it already exists, it will replace the value, unless a separator is specified which will then append the new value.
@@ -40,7 +48,7 @@ set / add a class to the tag; if called multiple times, will append with a semic
40
48
1.`Title(value)`
41
49
set the title attribute - if called multiple times, will always replace previous title
42
50
43
-
###Modifying the Tag Contents
51
+
## Modifying the Tag Contents
44
52
45
53
1.`Add(value)`
46
54
Add something to contents - at the end of existing content.
@@ -49,7 +57,9 @@ Add something to contents - at the end of existing content.
49
57
Replaces the content
50
58
* `value`_string | `Tag` | `IEnumerable<Tag>`_
51
59
52
-
### Output/Render API
60
+
## Output/Render API
61
+
62
+
A `Tag` object and the two properties `.Open` and `.Close` all support `IHtmlString`, so you can output them directly:
53
63
54
64
1.`@myTag`
55
65
will render the tag into the html. Implements IHtmlString and will not be encoded.
@@ -58,19 +68,6 @@ will render the opening tag to html. Implements IHtmlString and will not be enco
58
68
3.`myTag.Close`
59
69
will render the close-tag to html. Implements IHtmlString and will not be encoded.
60
70
61
-
## How to do Common Things
62
-
63
-
### How to get Tag Objects
64
-
65
-
The following APIs will get you `Tag` objects:
66
-
67
-
1.`Tags.Tag(...)` ([more](tags.md))
68
-
2.`new Tag(...)` ([more](tag.md))
69
-
3.`new ***(...)` ([more TODO HTML5](htmltags.md))
70
-
71
-
### How to Render (output) Tag Objects
72
-
73
-
All `Tag` Objects will directly output to Html since it implements `IHtmlString` both in .net 4 and .net core, so all you need is `@myTag` to render it. If you need to have the open/close tag separately, you can also use `@myTag.Open` or `@myTag.Close`. Here's an example:
74
71
75
72
```razor
76
73
@using Connect.Razor.Blade;
@@ -84,11 +81,7 @@ All `Tag` Objects will directly output to Html since it implements `IHtmlString`
84
81
@myStyle.Close
85
82
```
86
83
87
-
## Fluent `Tag` API
88
-
89
-
90
-
91
-
## `Tag` Constructors
84
+
## Deep Dive to `Tag` Constructors
92
85
93
86
In most cases you'll use `Tags.Tag(...)` ([more](tags.md)) to create a tag, since it's nicer. But for advanced cases, you can use one of these constructors:
94
87
@@ -116,11 +109,13 @@ These properties are for doing advanced stuff and not to be treated as final. We
116
109
4.`TagName`_`string` get/set_
117
110
5.`TagOverride`_`string` get/set, default `null`_ if not null will be rendered instead of what's normally in the tag. This is used for _verbatim_ tags like comments.
118
111
119
-
## Tag Objects in HtmlTags _(new in 1.2)_
112
+
## Tag Objects _(WIP for 2.1)_
120
113
121
-
Note that all these tag objects are of type `Tag`, so you can do further manipulation to them as explained below:
114
+
Note that all these tag objects are of type `Tag`, so you can do further manipulation to them as explained below. In 2.1 we want to release all tags which are part of the HTML5 standard.
122
115
123
-
### Basic Tags
116
+
...todo WIP
117
+
118
+
<!-- ### Basic Tags
124
119
125
120
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.
126
121
@@ -146,14 +141,14 @@ Note that when you see `[content]`, this means you can pass in optional content
146
141
1. `Script`
147
142
2. `Img`
148
143
3. `Picture`
149
-
4. etc.
144
+
4. etc.-->
150
145
151
146
152
147
## Options When Generating Attributes and Tags
153
148
154
149
Options like `AttributeOptions` and `TagOptions` are an optional parameter in all generator-commands. It allows you to change how attributes are generated, but remember that the default is well thought through, so you usually won't need to use it.
155
150
156
-
### AttributeOptions _(new in 1.3)_
151
+
### AttributeOptions _(new in 2.0)_
157
152
158
153
The object has the following properties and defaults:
159
154
@@ -182,4 +177,6 @@ This is how you would use these:
0 commit comments