I want to display a dictionary in a nice way. In standard HTML I would use DL tag. I didn't find an analog in ant.design yet.
When you use the ant-design, you have to install yarn add antd or npm install antd --save
After, the easiest way for ant-design is adding the index.html(ex.For React)
https://cdnjs.com/libraries/antd
You can use these link.
<link type="stylesheet" href="paste the antd css from url">
And then, you will be use this.
Lastly, I recommend to you "min.css" file.
If you use ant.design, it doesn't mean that you can not use standard HTML tags, you can still use them.
For example, this will look nice:
import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
ReactDOM.render(
<div>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</div>,
document.getElementById('container')
)
Related
I'm migrating an application to Dart 2 and Angular 5.
I have this code in an html file
<material-list-item *ngFor="let key of keyList"
(trigger)="clickItem(key)">{{key}}
</material-list-item>
Everything works if I declare the use of 'materialDirectives' in the corresponding dart file, but if I only import 'MaterialListItemComponent', the click on the item is not triggered.
I actually tried to add a couple more directives, but using the following list does not work:
MaterialButtonComponent,
MaterialIconComponent,
MaterialDialogComponent,
MaterialListComponent,
MaterialListItemComponent,
MaterialInputComponent,
MaterialPopupComponent,
ModalComponent,
PopupSourceDirective,
ButtonDirective.
materialDirectives is deprecated and I don't wan't to include everything if not necessary. Looking for an answer to this question but also for a way to identify which directives are used by different components.
MaterialListItemComponent extends ButtonDirective which has the logic for trigger. So that should be all you need. Along with NgFor for just the code in your example.
The demo which is similar to your code uses:
FocusItemDirective,
FocusListDirective,
MaterialIconComponent,
MaterialListComponent,
MaterialListItemComponent,
MaterialSelectItemComponent,
NgFor
Is there any runtime errors?
Installed material flex layout in my project but i unable to see the file in #node_modules and its not rendering properly for flex layout css.
Below code i followed, please suggest any thing missing here.
installed
npm install #angular/flex-layout#latest --save
imported app.components.ts
import { ObservableMedia } from '#angular/flex-layout';
imported in app.moduel.ts
import { FlexLayoutModule } from '#angular/flex-layout';
imports: [
BrowserModule,
BrowserAnimationsModule,
FlexLayoutModule
],
Node:
installed version
#angular/flex-layout#2.0.0-beta.9
for reference
Nothing seems to be missing. Pay attention to your Angular version - "Deprecated support for Angular 2.4.x" https://github.com/angular/flex-layout
You should be able to find the lib here: node_modules/#angular/flex-layout. Here is some basic directive usage example. Hope it helps!
<div fxLayout="row" fxLayoutAlign="space-around center">
<div fxFlex="33"></div>
<div fxFlex="33"></div>
<div fxFlex="33"></div>
</div>
Flex layout works great with angular, all you need is here.
Please visit this link and follow documentation:
https://github.com/angular/flex-layout
---------Extra Note---------------
If you are using visual code there is also a plugin for angular flex layout which can be used for more fast coding.
I have application builded on top of the aurelia-skeleton-navigation. Everything works ok, but can't find solution how to properly import jquery-ui library. Need that one to implement draggable dialog.
I've installed jquery-ui:
jspm install jquery-ui
Trying to test something as simple as (it's in app.js):
import 'jquery-ui';
...
attached() {
...
$("#dialog").dialog();
}
Unfortunately, dialog function isn't working. Is it something important that i'm missing? Or perhaps it's little bit more complicated than simple import ...
I'll appreciate any tips.
my working solution for this was installing a component version of jquery-ui:
https://github.com/components/jqueryui
npm install components-jqueryui
jspm install npm:components-jqueryui
Then:
import { datepicker } from 'components-jqueryui';
attached(){
$( "#datepicker" ).datepicker();
}
And in the view:
<input type="text" id="datepicker">
Hope this can help.
I noticed this when I run my dart app both with 1.7.0-dev4.3 and dev-4.1
Missing definition for <polymer-element>, please add the following HTML import at the top of this file: <link rel="import" href="../../../../packages/polymer/polymer.html">. (more details)
lib/src/core-overlay/core-overlay-layer.html:10:1
<polymer
-element name="core-overlay-layer">
I have not used any core-overlay-layer in my app so far and this seems to be one of the polymer-core components.
I have just done a clean install of the latest Dart dev SDK with the same result.
I've been documenting a software package using Sphinx and reStructuredText.
Within my documents, there are some long code snippets. I want to be able to have them hidden as default, with a little "Show/Hide" button that would expand them (Example).
Is there a standard way to do that?
You don't need a custom theme. Use the built-in directive container that allows you to add custom css-classes to blocks and override the existsting theme to add some javascript to add the show/hide-functionality.
This is _templates/page.html:
{% extends "!page.html" %}
{% block footer %}
<script type="text/javascript">
$(document).ready(function() {
$(".toggle > *").hide();
$(".toggle .header").show();
$(".toggle .header").click(function() {
$(this).parent().children().not(".header").toggle(400);
$(this).parent().children(".header").toggleClass("open");
})
});
</script>
{% endblock %}
This is _static/custom.css:
.toggle .header {
display: block;
clear: both;
}
.toggle .header:after {
content: " ▶";
}
.toggle .header.open:after {
content: " ▼";
}
This is added to conf.py:
def setup(app):
app.add_css_file('custom.css')
Now you can show/hide a block of code.
.. container:: toggle
.. container:: header
**Show/Hide Code**
.. code-block:: xml
:linenos:
from plone import api
...
I use something very similar for exercises here: https://training.plone.org/5/mastering-plone/about_mastering.html#exercises
You can use the built-in HTML collapsible details tag by wrapping the code in two raw HTML directives
.. raw:: html
<details>
<summary><a>big code</a></summary>
.. code-block:: python
lots_of_code = "this text block"
.. raw:: html
</details>
Produces:
<details>
<summary><a>big code</a></summary>
<pre>lots_of_code = "this text block"</pre>
</details>
I think the easiest way to do this would be to create a custom Sphinx theme in which you tell certain html elements to have this functionality. A little JQuery would go a long way here.
If, however you want to be able to specify this in your reStructuredText markup, you would need to either
get such a thing included in Sphinx itself or
implement it in a Sphinx/docutils extension...and then create a Sphinx theme which knew about this functionality.
This would be a bit more work, but would give you more flexibility.
There is a very simplistic extension providing exactly that feature: https://github.com/scopatz/hiddencode
It works rather well for me.
The cloud sphinx theme has custom directive html-toggle that provides toggleable sections. To quote from their web page:
You can mark sections with .. rst-class:: html-toggle, which will make the section default to being collapsed under html, with a “show section” toggle link to the right of the title.
Here is a link to their test demonstration page.
sphinx-togglebutton
Looks like a new sphinx extension has been made to do just this since this question has been answered.
Run: pip install sphinx-togglebutton
Add to conf.py
extensions = [
...
'sphinx_togglebutton'
...
]
In rst source file:
.. admonition:: Show/Hide
:class: dropdown
hidden message
since none of the above methods seem to work for me, here's how I solved it in the end:
create a file substitutions.rst in your source-directory with the following content:
.. |toggleStart| raw:: html
<details>
<summary><a> the title of the collapse-block </a></summary>
.. |toggleEnd| raw:: html
</details>
<br/>
add the following line at the beginning of every file you want to use add collapsible blocks
..include:: substitutions.rst
now, to make a part of the code collapsible simply use:
|toggleStart|
the text you want to collapse
..code-block:: python
x=1
|toggleEnd|
Another option is the dropdown directive in the sphinx-design extension. From the docs:
Install sphinx-design
pip install sphinx-design
Add the extension to conf.py in the extensions list
extensions = ["sphinx_design"]
Use the dropdown directive in your rst file:
.. dropdown::
Dropdown content