building-components | Sandbox project for process of building components | Frontend Framework library

by mariohernandez CSS Version: Current License: No License

X-Ray Key Features Code Snippets Community Discussions(4)Vulnerabilities Install Support

kandi X-RAY | building-components Summary

building-components is a CSS library typically used in User Interface, Frontend Framework, Gulp applications. building-components has no bugs, it has no vulnerabilities and it has low support. You can download it from GitHub.

You will find all working files within the /src folder. This project was built with Twig, which is a PHP templating system, but it can also be built with plain html, jekyll or handlebars. Reason for using Twig was that this is the platform I use for buiding drupal themes. All code changes get compiled into /dist by using gulp. See commands below for compiling Sass, JS, Styleguide.

Support

Quality

Security

License

Reuse

Support

building-components has a low active ecosystem.

It has 7 star(s) with 1 fork(s). There are no watchers for this library.

It had no major release in the last 6 months.

building-components has no issues reported. There are no pull requests.

It has a neutral sentiment in the developer community.

The latest version of building-components is current.

Quality

building-components has no bugs reported.

Security

building-components has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

License

building-components does not have a standard license declared.

Check the repository for any license declaration and review the terms closely.

Without a license, all rights are reserved, and you cannot use the library in your applications.

Reuse

building-components releases are not available. You will need to build from source code and install.

Installation instructions, examples and code snippets are available.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of building-components

Get all kandi verified functions for this library.

building-components Key Features

No Key Features are available at this moment for building-components.

building-components Examples and Code Snippets

No Code Snippets are available at this moment for building-components.

Community Discussions

Trending Discussions on building-components

Blazor pages: how to use BuildRenderTree to add dynamic content

When should I generate html using RenderTreeBuilder instead Razor syntax

Creating custom element without using class keyword

Getting null when trying to select a template element in an html import

QUESTION

Blazor pages: how to use BuildRenderTree to add dynamic content

Asked 2020-Apr-20 at 08:20

Background: We run dozens of sites for clients; all use an identical code base (ASP.NET WebForms) but completely different designs. Page structure is generated programmatically from SQL Server meta-data, using controls such as Panel, which are added to the ASP.NET page's Controls collection, and become DIVs in the rendered HTML.

Objective: We want to migrate eventually to ASP.NET CORE. However, there seems to be no equivalent to the page's controls collection. The closest thing I can find is the RenderTreeBuilder to add a Blazor component.

Question: Is it possible use BuildRenderTree to add a component which contains our home-baked HTML (for instance, to contain everything between and ?

I've read articles such as:

https://chrissainty.com/building-components-via-rendertreebuilder/

https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.1#manual-rendertreebuilder-logic

... and experimented with adding HTML elements, but it's extremely cumbersome, and I'd like to programmatically generate the HTML for pretty much the whole page, and add it as one RenderFragment (is that the right term?).

Is this possible? Is there an alternative?

Edit:

@Henk's answer, using the MarkupString struct, and mine, using RenderTreeBuilder.AddMarkupContent seem similar in terms of effort and plumbing required.

Are there any pros and cons of the two approaches I should consider?

...

ANSWER

Answered 2020-Apr-19 at 17:25

If you just want HTML (plain, dead) then you don't need a rendertree:

Source https://stackoverflow.com/questions/61274355

QUESTION

When should I generate html using RenderTreeBuilder instead Razor syntax

Asked 2020-Feb-05 at 16:43

With Blazor we can generate the component's Html elements using Razor syntax or overriding BuildRenderTree(RenderTreeBuilder builder).

I've noticed that who writes libraries usually prefer to create a single .cs file per component defining the Html elements inside the BuilderRenderTree method. Instead, who writes a project prefer to create two files per component (Html in .razor and logic .cs) or a single .razor file (Html and logic in one place).

I've already read

So, my question is

Why (and when) should I override BuilderRenderTree?

...

ANSWER

Answered 2020-Feb-05 at 15:49

My general guide is that if you can do it using .razor syntax it's always easier to create, edit, read and maintain.

However there are some cases where it's not possible to do this. One example is a demo I did last year for dynamic components: I need to render a component but I only have the System.Type value - this allows me to render different components via code.

See the relevant C# file

Source https://stackoverflow.com/questions/60078260

QUESTION

Creating custom element without using class keyword

Asked 2020-Jan-03 at 12:26

This is actually more a question about the object-orientation model in ES6. However I am going to use the creation of a new custom element as an example.

So the new and shiny (as of today) method to create a new custom element is via customElements.define() which take in a tag name, a constructor, and options (which is optional) according to MDN, Google, and of course the spec. All the documentation listed uses a variation of the new class keyword for constructor.

Assuming I don't like the new class syntax, and considering for most part class is a syntatic sugar (according to this tutorial). The spec even specifically state that

A parameter-less call to super() must be the first statement in the constructor body, to establish the correct prototype chain and this value before any further code is run.

By reading the tutorial I came out with this to try if it is possible (also to revise and re-learn Javascript's object model).

...

ANSWER

Answered 2017-Sep-06 at 17:37

In some simple situations it is possible to define a custom element without the class keyword.

The trick is to use Reflect.construct() to replace the super() call.

Source https://stackoverflow.com/questions/46071707

QUESTION

Getting null when trying to select a template element in an html import

Asked 2019-Oct-27 at 21:13

In my app, I do an html import from A to a file B which has this. But it alerts null. If I open B directly in the browser, it alerts the template HTML dom element. How can this happen, which this same code pretty much is from google own documents for web components https://developers.google.com/web/fundamentals/architecture/building-components/customelements.

...

ANSWER

Answered 2019-Oct-27 at 21:13

Why does this happen?

Two factors to take into consideration when importing a file that contains a script, and a template:

The script will execute at import time, while markup and other resources need to be added to the main page explicitly
- As pointed out in this article on imports (by Eric Bidelman, same author as Google documentation linked in question):

An import link doesn't mean "#include the content here". It means "parser, go off an fetch this document so I can use it later". While scripts execute at import time, stylesheets, markup, and other resources need to be added to the main page explicitly.

A script in an import is executed in the context of the window that contains the imported document. So window.document refers to the main page document, not the template document.

This should explain why your script alerts null. Because the script is executed immediately, while the template hasn't been added to the main page yet.

How to get the desired result:

You can create a reference to the import document itself where the template can be found.

Source https://stackoverflow.com/questions/45726483

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install building-components

If you haven't yet, install nvm: https://github.com/creationix/nvm.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: