In Panel Types of Wagtail Page,
class wagtail.admin.edit_handlers.xxxxxPanel(field_name, classname=None, widget=None, heading='', disable_comments=False)
Q1: I am wondering what are the comprehensive list of possible values of classname=? Id did not find any solid reference for this argument.
Q2: And What are the purpose for introducing classname= ? only for rendering the Wagtail CMS editing page or it also influences the rendering of published HTML page? (for example, classname=title will render as <h2> tag instead of <p> tag in published HTML page)
The classname option adds the given string to the class="..." attribute on the panel's HTML within the editing interface. It does not affect the front-end rendering.
Since it's just a string, you can set any value you like there, but of course it will only have an effect if there's a corresponding CSS rule for it. full and title are the only documented styles provided by Wagtail itself, but it's possible to add your own custom styles via the insert_editor_css hook.
Related
How can I go to a different section of a page in react. Right now, I have separated different sections in folders but not sure how to make a button that clicks to a different section in react. Any suggestions or ideas?
You should be able to use anchor tags in react as you would in HTML.
using JSX, tag the place on the page you want to go to with an ID:
<h3 id="education">Education</h3>
Then where you want the link to be located, place an a tag using the # syntax:
Education
Clicking on the a tag should scroll the page to the education H3 tag.
Is it possible to have this markup in the html:
<tabs>
<tab title="a title" tab-content="content">
<tab title="a title" tab-content="content">
</tabs>
and have react take that structure and create tabs functionality from it? i.e. create a list from the tab titles and divs for the content which get switched on/off depending on which tab is active.
I've come a background in Angular so may be thinking too angular-centric.
There are a variety of ways to go about creating tabbed content in React. What I believe you're asking though - specifying the content in the html - seems counter to the "react way" of doing things. From the React docs:
Remember: React is all about one-way data flow down the component
hierarchy. It may not be immediately clear which component should own
what state. This is often the most challenging part for newcomers to
understand...
The data for a given component is passed to the DOM rather than derived from it. So I wouldn't expect a React navigation component to get its functionality from existing html content but from the props passed in from the parent component or state that it manages itself.
While you could build this yourself, you may want to look at react-router which will provide some mechanisms for client-side routing and managing tabbed content.
I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. Below is my code, where I want to place images instead of text:
<super-navbar>
<super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
<super-navbar-title>MyApp</super-navbar-title>
<super-navbar-button side="right">Search</super-navbar-button>
</super-navbar>
Instead of "menu" text I want to have hamburger type icon or png image at least. Same for search text.
Thanks.
This can be accomplished right now by removing the <super-navbar> section and writing your own html header.
If you look in the layout file for your project there is an import statement as you mentioned:
<link rel="import" href="/components/supersonic/components/import.html">
There is a section that states:
* #name super-navbar-button
* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.
Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids
One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡
<super-navbar-button ng-click="toggleMenuDrawer()">
≡
</super-navbar-button>
They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i>
It works in the main content area, but makes the navbar behave differently when nested in a <super> element.
When creating, for example, dropdown menus I use the # sign on the link that toggles the dropdown. It works just fine with just for that and many other things where I need a link just to do something and stay on the same page.
Now I'm using angular and the problem I face is that when I use this sign on a link it thinks I'm referencing the route for / so that the app goes to the first screen.
How can I deal with this?
As far as I know another "ugly" workaround is to put href="javascript:;" to avoid the unintended navigation.
Or remove the href altogether but then when you mouseover you have no pointer. you need to add this to your CSS as described on UI Bootstrap page.
From: http://angular-ui.github.io/bootstrap/
Original Bootstrap's CSS depends on empty href attributes to style
cursors for several components (pagination, tabs etc.). But in
AngularJS adding empty href attributes to link tags will cause
unwanted route changes. This is why we need to remove empty href
attributes from directive templates and as a result styling is not
applied correctly. The remedy is simple, just add the following
styling to your application:
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
I am currently using ExtJs 4.2 for developing my web pages. I would like to know whether we can define a template and can reuse the template across the pages..To be little more clear, the page header and footer remains the same across pages and only body component changes.
I mean something similar to tiles in jsp.
My scenario is like this:
I have defined a border layout in which the region="north" contains the header part, region ="south" contains the footer part and region="west" and region="center" have the body content.
All my pages have a similar layout...ie..the content at west/center is only changing across pages...so do we have solution to simplify this without defining the entire layout in all the pages...
Please let me know if further clarifications are required
~Ragesh Ak
I think you will want to use Ext.define, and extend the viewport component, giving it a border layout. See the ExtJS tutorial on creating custom components for how to do that. You will want to give it a border layout, and have static panels/containers/menus/toolbars for you north and south objects.
How you model your content/center and navigation/west components depends on the style of application you are building. If you are following the single page application concept with the Model/Store/View/Controller pattern that ExtJS gives you using Ext.app.Application, then you will want to drop empty containers in those slots since you can't swap out a border layout component. Putting in empty containers will allow you to call the removeAll function and then add your new items when changing views. If you are building a regular site that reloads the page whenever you move between views, you can extend the viewport that you created, and put your content directly into the viewport since it won't ever need to change.
Use define to configure a class that extends container and has the border layout you just described, so you can reuse this new class as you need.