How can I add custom icons for each item in side-menu. The image to use is from my 'assets/imgs/' directory and not from ionic icons.
app.html
<ion-list no-lines class="ion-list" style="max-width: 100%;">
<button style="color:rgb(65, 65, 65);" class="title" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon style="font-size:30px;color: #B2B2B2;" class="icon" name="{{p.icon}}"> </ion-icon> <b>{{p.title}} </b>
<!-- <ion-icon style="float:right;" name="arrow-forward" *ngIf="p.title != 'Logout'"></ion-icon> -->
</button>
</ion-list>
app.component.ts
this.pages = [
{ title: 'Dashboard', component: HomePage, icon: 'home'} ,
{ title: 'Profile', component: ProfilePage, icon: 'contact' },
{ title: 'About Us', component: AboutUsPage, icon: 'help-circle' },
{ title: 'ContactUs', component: ContactUsPage, icon: 'call' },
{ title: 'SOA', component: SoaPage, icon: 'document' },
{ title: 'Feedback', component: FeedbackPage, icon: 'chatbubbles' },
{ title: 'Logout', component: SignInPage, icon: 'log-out' }
];
You can Replace icons with Images:
for Example:
component.ts
this.pages = [
{ title: 'Dashboard', component: HomePage, img: 'assets/imgs/image1.png'} ,
{ title: 'Profile', component: ProfilePage, img: 'assets/imgs/image2.png' },
];
component.html
<ion-list no-lines class="ion-list" style="max-width: 100%;">
<button style="color:rgb(65, 65, 65);" class="title" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<img style="width: 25px; height: 25px;" [src]="p.img"> <b>{{p.title}} </b>
<!-- <ion-icon style="float:right;" name="arrow-forward" *ngIf="p.title != 'Logout'"></ion-icon> -->
</button>
</ion-list>
just Replace your icon tag with img tag.
Related
I am trying to custom style my icon adding a bigger font size, the background is working fine but the font size is not, I read that I can use important! but I want to know why it is not working as it has been working in version 4 .
const useStyles = makeStyles((theme: Theme) => ({
root: {
flexGrow: 1,
},
icon: {
fontSize: 140,
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'red',
},
},
}));
<Box style={{ display: 'flex', alignItems: 'center' }}>
<EmojiObjectsIcon color='primary' className={classes.icon} onClick={switchTheme} />
</Box>
add px for fontSize like this :
const useStyles = makeStyles((theme: Theme) => ({
root: {
flexGrow: 1,
},
icon: {
fontSize: '140px',
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'red',
},
},
}));
const PublicSidebar = () => {
const classes = useStyles();
return (
<Box style={{ display: 'flex', alignItems: 'center' }}>
<EmojiObjectsIcon color='primary' className={classes.icon} onClick={switchTheme} />
</Box>
)
}
how to handle RichText incoming from API call?
I recieve a String full of inline styling as tags. I found this pub package:
https://pub.dev/packages/styled_text
which is rather useful. However it doesn't handle everything. For example I'm having difficulties in handling blockquote.
Anotherwords, what is the recommended way to handle a String with inline tags?
These Three are the Main Package for this :
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/html_parser.dart';
import 'package:flutter_html/style.dart';
Example :
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/html_parser.dart';
import 'package:flutter_html/style.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.deepPurple,
),
home: new MyHomePage(title: 'flutter_html Example'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
const htmlData = """
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<h3>Ruby Support:</h3>
<p>
<ruby>
漢<rt>かん</rt>
字<rt>じ</rt>
</ruby>
is Japanese Kanji.
</p>
<h3>Support for <code>sub</code>/<code>sup</code></h3>
Solve for <var>x<sub>n</sub></var>: log<sub>2</sub>(<var>x</var><sup>2</sup>+<var>n</var>) = 9<sup>3</sup>
<p>One of the most <span>common</span> equations in all of physics is <br /><var>E</var>=<var>m</var><var>c</var><sup>2</sup>.</p>
<h3>Inline Styles:</h3>
<p>The should be <span style='color: blue;'>BLUE style='color: blue;'</span></p>
<p>The should be <span style='color: red;'>RED style='color: red;'</span></p>
<p>The should be <span style='color: rgba(0, 0, 0, 0.10);'>BLACK with 10% alpha style='color: rgba(0, 0, 0, 0.10);</span></p>
<p>The should be <span style='color: rgb(0, 97, 0);'>GREEN style='color: rgb(0, 97, 0);</span></p>
<p>The should be <span style='background-color: red; color: rgb(0, 97, 0);'>GREEN style='color: rgb(0, 97, 0);</span></p>
<p style="text-align: center;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
<p style="text-align: right;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
<p style="text-align: justify;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
<p style="text-align: center;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
<h3>Table support (with custom styling!):</h3>
<p>
<q>Famous quote...</q>
</p>
<table>
<colgroup>
<col width="50%" />
<col span="2" width="25%" />
</colgroup>
<thead>
<tr><th>One</th><th>Two</th><th>Three</th></tr>
</thead>
<tbody>
<tr>
<td rowspan='2'>Rowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan\nRowspan</td><td>Data</td><td>Data</td>
</tr>
<tr>
<td colspan="2"><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></td>
</tr>
</tbody>
<tfoot>
<tr><td>fData</td><td>fData</td><td>fData</td></tr>
</tfoot>
</table>
<h3>Custom Element Support:</h3>
<flutter></flutter>
<flutter horizontal></flutter>
<h3>SVG support:</h3>
<svg id='svg1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
<circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
<circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
</svg>
<h3>List support:</h3>
<ol>
<li>This</li>
<li><p>is</p></li>
<li>an</li>
<li>
ordered
<ul>
<li>With<br /><br />...</li>
<li>a</li>
<li>nested</li>
<li>unordered
<ol>
<li>With a nested</li>
<li>ordered list.</li>
</ol>
</li>
<li>list</li>
</ul>
</li>
<li>list! Lorem ipsum dolor sit amet.</li>
<li><h2>Header 2</h2></li>
<h2><li>Header 2</li></h2>
</ol>
<h3>Link support:</h3>
<p>
Linking to <a href='https://github.com'>websites</a> has never been easier.
</p>
<h3>Image support:</h3>
<p>
<img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
<a href='https://google.com'><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></a>
<img alt='Alt Text of an intentionally broken image' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30d' />
</p>
<h3>Video support:</h3>
<video controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" />
</video>
<h3>Audio support:</h3>
<audio controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" />
</audio>
<h3>IFrame support:</h3>
<iframe src="https://google.com"></iframe>
""";
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('flutter_html Example'),
centerTitle: true,
),
body: SingleChildScrollView(
child: Html(
data: htmlData,
//Optional parameters:
style: {
"html": Style(
backgroundColor: Colors.black12,
// color: Colors.white,
),
// "h1": Style(
// textAlign: TextAlign.center,
// ),
"table": Style(
backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
),
"tr": Style(
border: Border(bottom: BorderSide(color: Colors.grey)),
),
"th": Style(
padding: EdgeInsets.all(6),
backgroundColor: Colors.grey,
),
"td": Style(
padding: EdgeInsets.all(6),
alignment: Alignment.topLeft,
),
"var": Style(fontFamily: 'serif'),
},
customRender: {
"flutter": (RenderContext context, Widget child, attributes, _) {
return FlutterLogo(
style: (attributes['horizontal'] != null)
? FlutterLogoStyle.horizontal
: FlutterLogoStyle.markOnly,
textColor: context.style.color,
size: context.style.fontSize.size * 5,
);
},
},
onLinkTap: (url) {
print("Opening $url...");
},
onImageTap: (src) {
print(src);
},
onImageError: (exception, stackTrace) {
print(exception);
},
),
),
);
}
}
You can use flutter_html to render html string.
flutter_html official documentation
I can't find any documentation on how to create an icon with rectangle backgrounds like here:
There are no props for <Icon /> or <SvgIcon /> that I can find that would do this out of the box. I can style them like that myself, but was wondering if there is an existing way.
You can use the useStyles to add colors to your elements:
const useStyles = makeStyles(theme => ({
root: {
"& > svg": {
margin: theme.spacing(1)
}
},
icon1: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
},
icon2: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.text.primary,
borderRadius: theme.shape.borderRadius
},
icon3: {
backgroundColor: theme.palette.text.primary,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
},
icon4: {
backgroundColor: theme.palette.text.secondary,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
}
}));
And inside your icon:
<div className={classes.root}>
<AddIcon fontSize="large" color="primary" className={classes.icon1} />
<AddIcon fontSize="large" color="primary" className={classes.icon2} />
<AddIcon fontSize="large" color="primary" className={classes.icon3} />
<AddIcon fontSize="large" color="primary" className={classes.icon4} />
</div>
Here is a working example: https://codesandbox.io/s/mui-icons-styling-8t4rb?file=/demo.js
Code Sandbox here:
https://codesandbox.io/s/ypx4qpjvpx
Relevant bits:
const styles = theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper
},
label: {
fontWeight: "normal"
},
selected: {
fontWeight: "bold"
}
});
<Tabs value={value} onChange={this.handleChange}>
<Tab
label="Item One"
classes={{
label: classes.label,
selected: classes.selected
}}
/>
<Tab
label="Item Two"
classes={{
label: classes.label,
selected: classes.selected
}}
/>
<Tab
label="Item Three"
href="#basic-tabs"
classes={{
label: classes.label,
selected: classes.selected
}}
/>
</Tabs>
What I'm trying to do here is I need to override the default font weight style, but on selected, I want it to be bold.
The problem is - these have the same level of specificity, and label appears after selected, so it overrides it.
How would I make selected more specific/achieve what I want without using !important.
I think the easiest way is to use the root class instead of label (for the Tab component).
Demo: https://codesandbox.io/s/q3pmn9o7m4
(I added colours to make the changes easier to see.)
<Tab
label="Item One"
classes={{
root: classes.tabRoot,
selected: classes.selected,
}}
/>
const styles = theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
tabRoot: {
fontWeight: "normal",
color: "#fff",
},
selected: {
fontWeight: "bold",
color: "#0ff",
}
});
A different way: https://codesandbox.io/s/8op0kwxpj
const styles = theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
tabRoot: {
fontWeight: "normal",
color: "#fff",
'&$selected': {
fontWeight: "bold",
color: "#0ff",
},
},
selected: {},
});
When I click a button this warning coming out which I running it in my web browser.(ionic serve -l)
I have <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> in my app.html file, is it problem?
UPDATE:
button image (button in slide menu - feedback button)
app.html
<ion-list>
<ion-list-header>导航栏</ion-list-header>
<button menuClose ion-item *ngFor="let p of loggedInPages" (click)="openPage(p)">
<ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
{{p.title}}
</button>
</ion-list>
app.components.ts
appPages: PageInterface[] = [
{ title: '新闻', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
{ title: 'SOS', name: 'TabsPage', component: TabsPage, index: 1, icon: 'call' },
{ title: '服务', name: 'TabsPage', component: TabsPage, index: 2, icon: 'people' },
{ title: '反馈', name: 'FeedbackPage', component: FeedbackPage, icon: 'information-circle' },
// { title: '机场志愿者入口', name: 'TabsPage', component: TabsPage, index: 0, icon: 'minan-sos' }
];
loggedInPages: PageInterface[] = [
{ title: '新闻', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
{ title: 'SOS', name: 'TabsPage', component: TabsPage, index: 1, icon: 'call' },
{ title: '服务', name: 'TabsPage', component: TabsPage, index: 2, icon: 'people' },
{ title: '反馈', name: 'FeedbackPage', component: FeedbackPage, icon: 'information-circle' },
{ title: '注销', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsOut: true }
];
openPage(page: PageInterface) {
let params = {};
if (page.index) {
params = { tabIndex: page.index };
}
if (this.nav.getActiveChildNavs().length && page.index != undefined) {
this.nav.getActiveChildNavs()[0].select(page.index);
} else {
// Set the root of the nav with params if it's a tab index
this.nav.setRoot(this.nav.setRoot(page.component, params), params).catch((err: any) => {
console.log(`Didn't set nav root: ${err}`);
});
}
if (page.logsOut === true) {
// Give the menu time to close before changing to logged out
this.userData.logout();
}
}